Theme

A theme groups the look of your storefront: its colours, fonts, buttons, spacing, header, product cards and footer. Your store always serves exactly one theme, the published one. You can prepare other themes — for a season or a campaign — without changing what your customers see, then switch to one in a click. The theme you leave keeps all its settings and stays in your list.

Each task below starts from the same place: open the main menu and, under Store builder, click Theme. The Overview tab lists your themes, each with its Status and the parts of the storefront it has already configured.

Create a new theme

1. On the Overview tab, click Create a new theme.
2. In Theme name, enter a name that helps you recognise it — for example a season. Your customers never see it.
3. Click Create.

The message The theme has been created. appears. The new theme is added to your list as a draft: nothing changes on your storefront.

Choose the theme's colours and fonts

1. On the Overview tab, on the theme's card, click Detail.
2. Click the Colors & Typography tab.
3. In the Colors card, click Edit. The Theme colors screen opens.
4. Enter each colour as a 3- or 6-digit hexadecimal code, without the leading # — Primary color (prices, button background, announcement strip), Secondary color, Background color and Text color — then click Save. The message Theme colors saved. appears.
5. Back on the tab, in the Typography card, click Edit.
6. Choose a Heading font for the titles and a Body text font for everything else, or keep System font, then click Save.

The message Typography settings saved. appears.

Note — If a colour is not a valid code, the message Please enter valid hex colors, for example 1a2b3c. appears and nothing is saved.

Choose the button style

1. On the theme's detail page, click the Buttons tab.
2. In the Primary button card, click Edit.
3. Set the Background color, Text color, Corner radius (px), Border width (px), Border color, Text case and Font weight you want. A field you leave empty keeps what the storefront shows today.
4. Click Save. The message Primary button settings saved. appears.
5. Do the same in the Secondary button and Inner spacing cards if you want to adjust them.

The Preview card on the tab shows both buttons as your storefront paints them. Use the computer and phone icons at the top of the card to switch between Desktop and Mobile.

Adjust the spacing

1. On the theme's detail page, click the Spacing & layout tab.
2. Click Edit. The Spacing screen opens.
3. Set the Space between sections in pixels (desktop), Space between sections in pixels (mobile), Inner padding of sections in pixels, Page side margins in pixels and Corner radius in pixels.
4. Click Save.

The message Spacing settings saved. appears, and the Preview card shows a page in miniature with these settings.

Activate and publish a theme

A theme goes live in two steps: you first activate it, which takes it out of draft without changing your storefront, then you publish it with Use this theme.

1. On the Overview tab, on the theme's card, click Activate.
2. On the Activate this theme screen, click Activate this theme. The message Theme status updated. appears; your storefront has not changed yet.
3. Back on the Overview tab, on the same card, click Use this theme.
4. Click Use this theme to confirm.

Your storefront switches to this theme straight away. The theme it replaces keeps all its settings and stays in your list, so you can switch back the same way.

Note — Activate is offered only once the theme is complete. On the theme's detail page, each area shows Configured or Not configured: open each area that is Not configured, check it and click Save. Product options and Account pages are optional.

Reset a theme's appearance

1. On the Overview tab, on the theme's card, click Detail.
2. Click Reset.
3. Click Reset appearance to confirm.

The message Theme appearance reset. appears. The colours, typography, buttons and spacing return to their default values; your pages and their content are not affected.