Blocks

Blocks are the logically divided sections in Site Builder combining components with the same purposes.

To find all the blocks, go to Publisher Account > Site Builder > Open Site Builder.

You can set a custom background for some blocks. To do this, go to the Layout section, switch the Custom Background toggle to On, click on the field below the toggle, and upload the desired image.
The recommended width for a custom background image in the block is 1920 px. The width of the background block may vary depending on the device on which the website is viewed. The height of the background image is stretched based on the amount of content in the block.In addition to the custom background, you can add images to Site Builder blocks. The recommended image sizes for 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 a product
• 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 a product, 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.

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 a product
• 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 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 products, 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 products: prices, promotions, names, descriptions, images, bundle contents, purchase limits.
• 4 product card styles.
• Navigation through sections using product type tabs.
• Customization of block and section titles.
• Previewing demo products.
• 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

Last updated: September 23, 2024