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

Note
These instructions are intended for sites created with Site Builder. If you want to connect a store on your own site, use the instructions for creating a store.

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.
  1. User clicks on the price.
  2. 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:
Note
The Web Shop template does not support selling game keys or bundles that contain game keys.

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.

  1. Click Add block in the site template.

  1. Choose Store in the blocks list.
  1. In the drop-down list, select the type of item that you want to sell on the site and select its group.
Note
If the items list is empty or you want to create a new item, click the create button or the Set up purchases link at the bottom of the section.

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

  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.
  • 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
  1. To check how users will see your site, click Preview in the upper right corner of the builder.
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!

Useful links

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!