Create site and customize main blocks

Create site

1. Open your project in Publisher Account.
2. Click Site Builder in the side menu.
3. Click Create site.
4. Select the Web Shop template.
5. Add a link to your game in Google Play or App Store to automatically use data from the game (logo, background image, colors, text in the footer, links to buy buttons) in Web Shop. If you don’t want to use the game data, set the Use game info from Google Play or App Store toggle to Off.

6. Click Create.
7. Choose:
   • global theme of the site
   • colors of mail elements
   • button’s roundness
   • header fonts and body texts
8. In the main part of the builder:
   • Upload images and videos to blocks
   • Edit the texts that will be visible to users

Set up header block

1. 1. Fix the block position. The function allows the header to remain visible while moving the page.
   2. Add a background image.
   3. Add your game logo.
   4. Edit the buttons. You can use premade button templates. To do this, add the URL the user will be redirected to after clicking the button.

Set up block Store

1. Specify the visual settings of the block (optional):
   • header
   • titles of items groups
   • custom background
2. Set up the automatically created section of the store. To do this, in the drop-down list, select the type of item that you want to sell on the site and select its group.

3. Choose Item card layout:
   • Horizontal.

• Vertical.

• Large. We recommend using this card layout for bundles and bonuses. This shows the composition of the card on the landing without clicking on the card.

4. To display the product description in the product card on the site, set the Item description toggle switch to On.
   Users can see a detailed description by clicking on the product card.
5. You can edit the size of the image in the item card. To do it in the drop-down Image size list, choose Ensure fit or Maximize.
6. Horizontal scroll is available for mobile devices. To enable it, set the Horizontal scroll on mobile devices toggle to On.
7. To add a custom background, set the Custom background toggle to On and upload your image.
8. Add more sections of the Store (optional).

Set up Subscription block

1. In the builder, click Add block and choose the Subscription block.
2. Go to the Login settings block and choose Xsolla login as the authorization type.
3. Go back to the Subscription block.

4. In the Layout block, you can change the following design elements:
   • Heading.

1. 1. • Image inside the block.

1. 1. • Icons to customize subscription product features.

1. 1. • Custom background. Set the toggle to On to add a background.

5. If subscription products are configured in your project, or if the products were imported when the site was created, the site builder displays the Product block. Select the product you want to sell on the site from the drop-down menu.

6. Go to the Subscription block. Select a subscription plan or use the +New plan option from the drop-down menu to create a new plan.
7. If you want to sell multiple subscription plans, add any number of Subscription blocks to the site structure.

Note

When you add more than one subscription plan to the constructor, you cannot add an image to the block or use the Image toggle.

8. Replace predefined texts for titles, buttons, and descriptions in the block.

Set up Footer block

1. Select layout style.
2. Customize background.
3. Add links to the social networks.
4. Add Share buttons, set up favicon and publication.
5. Add age restrictions.

Next steps

1. Import item catalog or set up catalog manually.
2. Implement granting of purchases to the user.

Useful links

• Integration flow
• Blocks

Was this article helpful?

Thank you!

Is there anything we can improve? Message Send

We’re sorry to hear that

Please explain why this article wasn’t helpful to you. Message Send

Thank you for your feedback!

We’ll review your message and use it to help us improve your experience.
Rate this page


Rate this page

Is there anything we can improve? Send

Don’t want to answer

Thank you for your feedback!

Last updated: March 22, 2023

Found a typo or other text error? Select the text and press Ctrl+Enter.