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.
  1. Click Create.
  2. Choose:
    • global theme of the site
    • colors of mail elements
    • button’s roundness
    • header fonts and body texts
  3. 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

Note
If you used info from your game when creating Web Shop, the Header block will be set up automatically.
    1. Fix the block position. The function allows the header to remain visible while moving the page.
    2. Add your game logo.
    3. Add a background image.
    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.
Notice
If created or imported items and virtual currencies are not displayed in the site builder window, make sure that the created groups of items and packages are Enabled, and that items have been moved to the created groups. You can view and set up items created via Publisher Account in the Store section.

  1. Choose Item card layout:

    • Featured.This card layout allows you to draw the attention of users to products or special offers. We recommend that you use this layout for bonus and discount promotions, and time and number limited promotions and items.
      In the card layout settings you can:
      • hide or show an item’s image and description
      • ensure fit or maximize an item’s image
      • change text color
      • use a custom background for the carousel
    • Horizontal.This card layout allows you to place the name, description, and price of the product to the right of the image.
      In the card layout settings you can:
      • hide or show an item’s image and description
      • ensure fit or maximize an item’s image
      • enable or disable horizontal scroll on mobile devices
      • use a custom background for the section
    • Vertical.This card layout allows you to place the name, description, and price of the product at the bottom of the image.
      In the card layout settings you can:
      • hide or show an item’s image and description
      • ensure fit or maximize an item’s image
      • enable or disable horizontal scroll on mobile devices
      • use a custom background for the section
    • 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.
      In the card layout settings you can:
      • hide or show an item’s image and description
      • ensure fit or maximize an item’s image
      • enable or disable horizontal scroll on mobile devices
      • use a custom background for the section
Note
You can only use the Vertical, Large and Featured layouts for bundles.
  1. 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.
  2. 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.
  3. Horizontal scroll is available for mobile devices. To enable it, set the Horizontal scroll on mobile devices toggle to On.
  4. To add a custom background, set the Custom background toggle to On and upload your image.
  5. 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.
  1. In the Layout block, you can change the following design elements:
    • Heading.
    • Image inside the block.
Note
When you add more than one subscription plan, you cannot add an image to the block and use the Image toggle.
    • Icons to customize subscription product features.

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

  1. 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.
Note
When a subscription product changes, the available subscription plans also change. To create new products, use the Create a product method or contact the your Customer Success Manager.
  1. 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.
  2. 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.

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

Note
If you used info from your game when creating Web Shop, the Footer block will be set up automatically.
  1. Select layout style.
  2. Customize background.
  3. Add Share buttons, set up favicon and publication.
  4. Add links to the social networks.
  5. Add age restrictions.

Next steps

  1. Import item catalog or set up catalog manually.
  2. Implement granting of purchases to the user.
  • Integration flow
  • Blocks
    • Was this article helpful?
      Thank you!
      Is there anything we can improve? Message
      We’re sorry to hear that
      Please explain why this article wasn’t helpful to you. Message
      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?

      Don’t want to answer

      Thank you for your feedback!
      Last updated: January 22, 2024

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

Report a problem
We always review our content. Your feedback helps us improve it.
Provide an email so we can follow up
Thank you for your feedback!