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 1,000 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.
5. Test the site.
6. Publish the site.

Create site

1. Open your project in Publisher Account and go to Storefronts > Websites section.
2. Click Create site.
3. Select the Web Shop template.
4. Add a URL to an external platform where your game is available. This allows you to quickly create a page in the style of your game: images and the game title, developer information, and a color scheme are automatically added to the page. If you don’t want to use the game data, set the Copy game info via App Store or Google Play URL toggle to inactive.

5. Click Create Web Shop.

• Customize the site theme:
  • colors of key elements
  • border radius of elements
  • fonts for headings and body text
• Edit the content:
  • upload images and videos to blocks
  • change the texts visible to users

You can also create and configure additional pages for the website, for example, to publish news, set up a store with different items bundles, or run a blog.

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.

1. Set the following toggles to active:

1. • Login button — displays the user authentication button in the site header.

1. • Fixed position — keeps the header visible when the user scrolls the page.

1. • Custom background — replaces the default header background with a custom one.

2. Configure the buttons in the block.

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

1. Adding a background image.
2. To display site information on the Info cards, set the following toggles to active:
   • Card icons
   • Card headings
   • Card descriptions

Set up Fast login block

The Fast Login block allows you to highlight the authorization step and streamline the user’s path to purchase.

To use this Fast Login block, you must first select an authorization method in the Login Settings section. The appearance and behavior of the block depend on the chosen authentication method.

If you are using authentication via user ID, we recommend adding instructions on how to find the ID in the game. To do this:

1. In the site builder’s sidebar, go to the Login settings section.
2. Select the User ID option.
3. Set the Instructions toggle to active.

If needed, customize the instruction modal by:

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

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 item 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 drop-down list.

3. In the store section choose Item card layout:

1. • Featured. This card layout allows you to draw the attention of users to items 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.

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

1. • Horizontal. This card layout allows you to place the name, description, and price of the item to the right of the image.

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

1. • Vertical. This card layout allows you to place the name, description, and price of the item at the bottom of the image.

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

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

1. 1. 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 enabling the corresponding toggles in the card layout settings.
5. To hide the section when it has no content, set the Hide section if empty toggle to active.

Set up Footer 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 to active.
3. Configure additional shopping cart functions (optional). To do this, set the corresponding toggles:

1. • Show promo code field – allows users to use a promo code or coupon in the shopping cart interface;

1. • Login before shopping cart – opens the authentication window when navigating to the shopping cart if the user was not previously logged in.

Useful links