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.
4. Set up shopping cart.

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.

6. Click Create.
7. Choose:
   • global theme of the site
   • colors of main 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

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.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.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.

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

3. 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

4. If needed, customize the card layout by setting the corresponding toggles to On in the card layout settings.

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

Set up Footer block

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.

Set up shopping cart

You can use the shopping cart on the website. To do this:

1. In the main section of the builder, go to the Cart Settings block.
2. Set the Use shopping cart toggle switch to On.
3. Сonfigure additional shopping cart functions (optional). To do this, set the corresponding toggle switches to On:
   • Show promo code field – allows users to use a promo code or coupon in the shopping cart interface;
   • Login before shopping cart – opens the authentication window when navigating to the shopping cart if the user was not previously logged in.

Useful links

• Web Shop Integration Guide
• All Site Builder blocks
Was this article helpful?
Yes
No
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.
Last updated: August 14, 2024

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