How to connect store to your site

How it works

Store on your site allows to attract more gamers to improve game monetization. With Store you can sell game keys (except Web Shop template), bundles, virtual items, and virtual currency packages.

Games demo Items & currencies demo

User flow

1. User goes to the game’s site and navigates to the store section.
2. User logs in to the site.
3. User clicks at the item card and sees a detailed item description.

4. User clicks on the price.
5. User pays for the purchase in the opened payment interface.

Integration flow

1. Create catalog in Publisher Account.
2. Create Store block.
3. Customize Store block.

Create catalog

To create catalog:

1. Open your project in Publisher Account.
2. In the side menu click Store > Connect.
3. Click Connect next to the section with the item type you want to sell on the site:
   • virtual currency pack
   • virtual items
   • game keys
   • bundles

Create Store block

If you create a site with Web Shop or Store template, the Store block is added to the site automatically.

The Store on Web Shop template allows you to show additional information on item cards:

• Bonuses – only for bonus promotions.
• Promotion timer – for any type of promotion. A timer appears on the item card 30 days before the end of the promotion that shows the remaining promotion time.
• Limit the number of times one user can use a promotion – for any type of promotion, if the number of uses is limited.
• Limit the number of times one user can buy this item – for virtual items if the number of uses is limited.

If you create a site with other templates, add Store block:

1. Open your project in Publisher Account.
2. In the side menu click Site Builder.
3. Click Open Site Builder.

4. Click Add block in the site template.

5. Choose Store in the blocks list.

6. In the drop-down list, select the type of item that you want to sell on the site and select its group.

7. To sell items in different places on the site, create several sections with store. To do this, click the Add store section in the Store block menu.

Store block does not support shopping cart and promo codes. To connect a shopping cart on your site, contact your Customer Success Manager or email csm@xsolla.com.

Customize block

1. Customize the section heading. To do this, click the Store heading in the site template and edit its text and style.

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

• A separate item card layout is used for game keys by default. You can’t change it and it is not available for other products.
  In the card layout settings you can:
  • hide or show an item’s image and description, release date, and game platforms
  • ensure fit or maximize an item’s image
  • enable or disable horizontal scroll on mobile devices
  • use a custom background for the section

3. To check how users will see your site, click Preview in the upper right corner of the builder.

Rate this page

Is there anything we can improve? Send

Don’t want to answer

Thank you for your feedback!

Useful links