Documentation

Themes and branding in webshops

Discover how to style a webshop with theme tokens, branding media, and AI-generated themes.
Read time 4 minutesLast updated 4 days ago
A webshop's theme defines its visual appearance, including colors, typography, and layout. Branding adds the media displayed around the product list, such as the background image, hero banner, and thumbnail.
You configure both in the Edit webshop view, using two adjacent panels:
  • Customize theme: Controls colors, typography, layout tokens, the background image, theme generation inputs, and the webshop thumbnail. Theme generation inputs include app store URLs and screenshots, and let you refine the result conversationally with AI.
  • Customize layout: Controls the banner image that appears at the top of the webshop.
The webshop uses a single mobile-first layout. You can customize colors, typography, and media, but the overall page structure is fixed: the hero banner appears at the top, products appear below it, and the footer remains sticky.

Themes

A theme is a design configuration that the webshop uses to render the shop. A theme controls the following elements:
  • Brand and accent colors, including hover and disabled variants.
  • Background colors and gradients.
  • Typography, including font family, weight, and size scale.
  • Layout values such as corner radius, spacing, and elevation.
To customize the theme, generate one from your game’s Apple App Store or Google Play Store listing or from your own screenshots. Then, refine the theme with AI by describing the changes you want. The assistant updates the theme based on your instructions. Resetting the theme restores the Unity default.
A theme belongs to one environment's draft configuration. Changing the theme in one environment doesn't affect any other environment.
For the full procedure, refer to Generate a webshop theme with AI.

Branding media

Branding consists of the media that the webshop displays around the product list. You can set the following assets in the Edit view:
  • Webshop thumbnail: The image used for link previews and link cards. If you generate a theme from an app store URL, Unity uses the scraped app icon as the default thumbnail. To override it, upload your own thumbnail in the Customize theme section.
  • Background image: Spans the entire width and height of the display, behind the product list. Upload it under Customize theme > Background image.
  • Hero banner creative: The wide banner image displayed at the top of the webshop. Upload the hero banner in the Hero banner creative section below Customize layout.
The Customize theme section also accepts screenshots as reference material for theme generation. These screenshots can be scraped automatically from your app store URL or uploaded manually. They are inputs to the AI generator and don't appear in the webshop.

Upload and position the background image

Because the background image spans the entire width and height of the display, the visible area varies with the screen's size and shape. To upload an image and set a focal point that keeps the important content in view, follow these steps:
  1. Under Customize theme > Background image, select Browse files, or drag and drop an image file.
  2. In the Crop background image window, zoom in and drag to choose the area to upload, then select Upload.
  3. Drag the image to position the area you want to keep in view.
  4. Adjust the focal point separately for Desktop and Mobile, since each shows a different crop of the image.
  5. Select Save position.
For size, dimension, and format limits, refer to Webshop limits reference.

Theme preview without a connected catalog

To preview a theme against a realistic shop layout before your IAP catalog is connected, enable the Mock catalog toggle in the Catalog & payment provider section. Players never see mock products. For details, refer to Catalog and payments in webshops.

Draft and live preview

The Preview pane has a Current draft / Live webshop toggle at the top. Use it to compare your draft theme and branding against the version players currently see. To share a preview that others can open in their own browser, copy the Dev preview URL from the General section. This link always renders the current draft.

Theme and branding across environments

Theme and branding are part of an environment's draft configuration, so edits only affect that environment. To copy a non-production environment's draft theme and branding into production, use Apply to production in the Customize theme section. This action doesn't publish the production environment. You must still publish production for the changes to go live.
For more information about environments, drafts, and publishing, refer to Introduction to webshops.