Blocks

Blocks are the logically divided sections in Site Builder that combine components with similar functionality.

To find all the blocks, in your project in Publisher Account go to the Storefronts > Websites section and click Open Site Builder in the pane of your site.

Images in blocks

You can set a custom background for some blocks. To do this, go to the Layout section, set the Custom Background toggle to active, click on the field below the toggle, and upload the desired image.

The custom background doesn’t have a fixed width or height, as it dynamically adjusts to the block dimensions. The block dimensions change depending on the block content (e.g. the text length, the presence or absence of buttons) and the device screen resolution.

You can choose one of the following ways to place a background image in a block:

• Ensure fit — the image maintains its aspect ratio and fits within the block’s height.
• Maximize — the image fills the width of the block and may be cropped from the top and bottom if it exceeds the block’s height.
• Fix — the image is stretched to fit the block without maintaining its aspect ratio.

The recommended width for a custom background image in the block is 1920 px. Determine the appropriate image ratio after adding the required content to the block.

In addition to the custom background, you can add images to Site Builder blocks. The image size recommendations for the desktop version with a screen resolution of 1200 px are provided in the block descriptions below.

Header

The block in the header of the site. Header displays user information and contains site navigation elements. You can fix the block so it remains visible on the screen when scrolling through the site.

Key features:

• Adding buttons for navigation, purchasing, or navigating to other pages.
• Adding a language switcher for the site.
• Setting up an authentication button on the site.
• Displaying information about the authenticated user.

Lead block in the Single game page template

Block with information about the game being sold on the website.

Key features:

• Customizing the text layout.
• Displaying game information: title, developer.
• Displaying game distribution platforms.
• Adding tags with custom content.
• Configuring button functions:
  • Watching videos
  • Scrolling to a block
  • Redirecting to a link
  • Purchasing an item
• Customizing the style of buttons.

Lead block in Web Shop template

The block with information about the site.

Key features:

• Customization of game information: icon, title, developer.
• Customization of cards with descriptions of site features.

Call-to-action

The block to attract user attention to key actions on the site.

Key features:

• Adding a field for the user’s email for subscribing to game news.
• Adding a button for purchasing an item, links to go to Google Play/App Store, or to another website.
• Displaying platform logos, clicking on which will take the user to your page on that platform.
• Lightbox with a video from YouTube/Vimeo.

Fast Login

The Fast Login block provides users with an additional way to authenticate on the site. The appearance of the block and its features depend on the selected authentication method.

If authentication via user ID is configured for the site, the Fast Login block displays a field for entering the ID and a login button.

Key features:

• User authentication without additional transition to the modal window.
• Setting up the content of the block. You can enable and configure the following sections:
  • Title
  • Description
  • Instructions on how to find the user ID
  • Custom background

If authentication via Xsolla Login is configured for the site, an additional button calling for authorization is displayed in the Fast Login block. When you click on the button in the block, a modal window opens for authorization using one of the Xsolla Login methods.

Key features:

• Setting up the text of the button calling for authorization
• Setting up a custom background

Gallery

Block with images, screenshots, and video materials to enhance user interest in the game.

Key features:

• Adding images and videos to slides.
• Playing videos on the landing page via a YouTube link.
• Cycling through slides with content.
• Previewing the previous and next video or image in the slider.
• Displaying arrows for sliding through content.

News

Block for publishing articles on your website.

Key features:

• publishing articles, news, announcements, game changelogs
• grouping articles by categories and displaying categories as tabs

Cards

Universal block for displaying information about the game or shop. In this block, you can add cards with any content.

Key features:

• Adding cards with texts, images, and buttons.
• Configuring button functions:
  • Watching videos
  • Scrolling to a block
  • Redirecting to a link
  • Purchasing an item
• Adjusting the sizes of cards and positioning of card elements.
• Customizing the grid layout of cards.
• Aligning content within the cards.

There is no recommended image size in the Cards block, since you can adjust the aspect ratio of the card and the image yourself.

Promo slider

The block with a gallery containing game banners, game titles, and their descriptions.

Key features:

• Ability to add a button for purchasing items, navigating to a link, or to Google Play/App Store.
• Cyclical scrolling of slides with content.
• Displaying navigation arrows for games.
• Adding a field for the user’s email for subscribing to game news.
• Displaying links to your page on various platforms.

Description

Block with game description and images.

Key features:

• Display of images and text descriptions.
• Two layout options for images and text: horizontal and vertical.
• Enlarging of images or navigating to a link by clicking on the image.

Promo codes

The block for using promo codes and coupons on the site.

Key features:

• User application of promo codes to receive bonuses on purchases.
• Applying coupons for immediate rewards.
• Adding custom JS code to expand the block’s capabilities.

Game editions

The block allows you to display detailed information about one game and showcase the features of different editions of that game.

Key features:

• Style templates for the bundle and custom style.
• Adjusting the layout of components: buttons, titles, and descriptions can be rearranged.
• Configuring the benefits lists for each edition of the game.
• Highlighting the most advantageous bundle - you can mark an edition of the game as recommended for purchase.

Store

The block for selling game keys (excluding the Web Shop template), virtual items, bundles, and virtual currency packages.

Key features:

• Selling in-game items and game keys.
• Displaying all information about items: prices, promotions, names, descriptions, images, bundle contents, purchase limits.
• 4 item card styles.
• Navigation through sections using item type tabs.
• Customization of block and section titles.
• Previewing demo items.
• Horizontal scrolling on mobile devices.
• Additional button for authentication prompt.

Reward system

The block for adding reward system. It gives an opportunity to get value points while buying, store them and collect reward chains. Value points don’t spent when you get a reward.

Key features:

• Choosing a reward chain configured in the in-game store.
• Expanding the features of the block, for example, add text, a button, or an image, using JS code.

Social media widgets

The block with access to the game’s social networks for more effective interaction with users.

Key features:

• Adding widgets for Facebook, Twitter, Discord, and Twitch.
• Two types of widget display.
• Choosing dark or light themes on Twitter and Discord.

FAQs

The block with answers to frequently asked questions about your game.

Key features:

• Predefined answers to common questions that are suitable for the majority of stores.
• Adding custom JS code to extend the block’s capabilities.

Custom code

The block allows you to use your custom CSS, JS, and HTML code on the site to implement unique functionalities not provided in the interface.

Key features:

• Synchronization of custom code across all language versions of the site without the need for individual migration.
• Separate tabs for CSS, HTML, and JS within the block.
• Syntax highlighting built-in.
• Code thumbnail for easy navigation within the block.

System requirements

Block with information about the minimum and recommended system requirements needed to run the game on different platforms.

Key features:

• Two display options:
  • Only minimum requirements
  • Minimum and recommended requirements
• Using multiple tabs for different platforms.

Subscriptions

A block that allows users access to a package of services based on specified conditions.

Key features:

• Setting icons for each component of the subscription.
• Setting an image for the subscription plan.

Footer

The block is located at the bottom of the page. It contains legal information and privacy settings.

Key features:

• Choice of block style: columns or rows.
• Adding a language switcher for the site.
• Adding a Share button to spread the site link on social networks.
• Displaying age restrictions.

Useful links