Create Web Shop for mobile games

A Web Shop is a solution that allows you to sell virtual goods, virtual currency, and bundles using the Xsolla payment interface and a store interface on your website. Users will have access to over 700 payment methods.

The page below describes how to create a website using the Web Shop template. To learn more about the solution and utilize all of its features, refer to the documentation.

To create a Web Shop:

  1. Create a project in the Publisher Account.
  2. Create a website.
  3. Configure the key 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 the game on Google Play or App Store to preconfigure the store interface (logo, background image, colors, text in the footer). 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 main 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

Configure key blocks

All blocks contain default settings. You can choose to enable or disable specific block functions and customize them as desired.

Set up Header block

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.
Note
If you added a link to Google Play or the App Store when creating the site, Header block will be configured automatically.
If needed, customize the block by:
  1. Set the corresponding toggles to the On position:
    • Login Button. The user authentication button will be displayed in the site header.
    • Fixed position. This feature allows the header to remain visible when scrolling the page.
    • Custom Background. The header background will change to a custom background.
  2. Configure the buttons in the block.

Lead block

Block with basic information about your Web Shop - the game the site is created for and who the developer is. If you didn’t add a link to Google Play or the App Store when creating the site, configure the following elements of Lead block in the main part of the constructor:
  1. Add the game icon.
  2. Specify the game name.
  3. Specify the game developer.
If needed, customize the block by:
  1. Adding a background image.
  2. Configure the cards with site information by toggling the switches to the On position:
    • Description cards
    • Card icons
    • Card titles
    • Card descriptions

Fast login

The Fast Login block provides users with the ability to authenticate on the site. You can use the block in addition to the login button in the header or instead of it. The appearance and capabilities of the block depend on the selected authentication method.
Note
To select the authentication method, go to the Login Settings in the builder.
If you are using user ID authentication, we recommend adding instructions on how to find the ID in the game. To do this:
  1. Toggle the Instructions switch to On.
  2. Click on the line that appears at the bottom of the block.
  3. Replace the text of the instruction for users.

If needed, customize the block by:

  1. Adjusting the display of the block’s header and description.
  2. Replacing the default texts with your own.

To configure the block when using user ID authentication:

  1. Adjust the display of the block’s header and description. You can also replace the default text with your own.
  2. To show instructions on how to find the user ID in the game, toggle the Instruction switch to On. Click on the appearing line at the bottom of the block and replace the text that users will see.

Set up block Store

Block for selling virtual items, bundles, and virtual currency packs. This block contains automatically created sections you can delete and replace with new ones.

  1. If needed, customize the block by:
    • Adding a title
    • Enabling the display of product group names
    • Enabling tabs for easy navigation in the store
    • Adding a custom background
    • Configuring the login call-to-action button.

  1. In the store section, select the type of item you want to sell on the site and its group from the dropdown list.

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. In the store section 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 and bundles.
      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 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 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 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. If needed, customize the card layout by setting the corresponding toggles to On in the card layout settings.

  1. You can Hide section if empty by toggling the corresponding switch to the On position.

Note
If you added a link to Google Play or the App Store when creating the site, the Footer block will be configured automatically.
If needed, to customize the block:
  1. Select layout style.
  2. Customize background.
  3. Add Share options buttons, configure social media icons.
  4. Add links to the social networks.
  5. Add age restrictions.
  • Web Shop Integration Guide
  • All Site Builder 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: May 24, 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!