Discover how to style a webshop with theme tokens, branding media, and AI-generated themes.
Read time 2 minutesLast updated 21 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 hero banner and thumbnail.You configure both in the Edit view, using two adjacent panels:
Customize theme: Controls colors, typography, layout tokens, theme generation inputs and the webshop thumbnail. Theme generation inputs include app store URLs and screenshots, and you can refine the result conversationally with AI.
Hero banner: Controls the banner image that appears at the top of the webshop.
Both panels are part of an environment's draft configuration. When you publish, Unity copies both panels into the live configuration.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.
Theme tokens
A theme is a set of design tokens 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 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 is the media that the webshop displays around the product list. You can set the following assets in the Edit view:
Webshop thumbnail: 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.
Hero banner: The wide banner image displayed at the top of the webshop. Upload the hero banner in the Hero banner section below Customize theme.
Source uploads support PNG, JPEG, and WebP formats. The Dashboard re-encodes each upload before serving it, so the asset that players see might differ slightly from the source file.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.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 the full procedure, refer to Apply a non-production draft to production.For more information about environments, drafts, and publishing, refer to Introduction to webshops.