Customize the store theme
In this article we will show you how to change the colors, fonts and shapes of your whole block-based store in one place.
💡 To learn how the block-based store works, see Block-based store.
WHAT THE THEME CONTROLS
The theme sets the look of the whole store at once. A single change reaches the Home, custom pages and the rest of the pages. It has three sections:
| Section | What it controls |
|---|---|
| Colors | Four colors that paint the whole store. |
| Typography | The fonts, the text size scale and the size and weight of each kind of text. |
| Shape | Corners, borders, shadows, spacing and the style of buttons. |
OPEN THE THEME EDITOR
1. Go to Control Panel > Settings > Interface > Appearance.
2. Click Theme.
The theme editor will open. As you change any option, the store preview updates so you can see the result right away.
💡 You can also get there from Control Panel > Settings > Store, in the Design tab. In the Theme row ("The colors and the typography of your store") click Edit. On a block-based store, this row replaces the previous color pickers.
⚠️ The theme editor needs the block-based store to be already enabled.
APPLY A READY-MADE THEME
If you do not want to start from scratch, you can begin with one of the ready-made themes. Applying a ready-made theme changes the colors, typography and shape together, and afterward you can adjust anything you want.
1. In the theme editor, open the Ready-made themes section.
2. Choose the one you like best:
| Theme | What it sets |
|---|---|
| Default | Your store's current colors, with the standard typography and shape. |
| Modern | Montserrat for titles, round corners, a medium shadow, wide spacing and filled buttons. |
| Editorial | Cormorant Garamond for titles and Raleway for body text, a thin border, a subtle shadow and outline buttons. |
| Nocturne | A dark color palette, Roboto Condensed for titles, a strong shadow and soft corners. |
3. Check the preview and adjust the colors, fonts or shape if you need to.
💡 A ready-made theme is highlighted only while your settings match it exactly. As soon as you change any detail, the card is renamed Custom.
CHANGE THE COLORS
Each color has a picker with a field to type the hex code and a palette of preset colors. If you have the exact code of your brand color, paste it into the field, for example #ff66ff.
| Color | What it paints |
|---|---|
| Header and footer | The navigation bar, the footer and colored bands. |
| Buttons and links | Anything a reader can click. |
| Background | The page background. |
| Text | Titles and body copy. |
Keep the following in mind:
- Neutral shades (such as card surfaces and muted text) are calculated automatically from Background and Text. You do not have to edit them.
- A color you changed since the last publish shows an Unpublished badge and a link to Revert to the published color.
- If the contrast between the text and the background is low, the editor warns you that the text is barely visible over the background. The warning does not block publishing, but it is best to fix it so the text is easy to read.
CHANGE THE FONTS AND THE TEXT SIZE
In the Typography section you can choose the fonts and the text size.
Fonts
You can choose from seven fonts: Noto Sans, Montserrat, Raleway, Roboto, Cormorant Garamond, Roboto Condensed and Antonio.
| Font | Used for |
|---|---|
| Titles | Every title across the store. |
| Body text | Paragraphs, descriptions and details. |
If you turn on Same font as the titles, the body text uses the title font. Roboto Condensed and Antonio show a "Best for titles" badge when you pick the body font.
⚠️ You cannot use a font that is not on the list.
Text size
The Text size scale resizes every kind of text together and keeps the proportions between them.
| Option | Effect |
|---|---|
| Compact | Text about 10% smaller. |
| Normal | The standard sizes. |
| Large | Text about 10% larger. |
Fine-tune each kind of text
In Fine-tune each kind of text you can set five levels separately: Page title, Section title, Publication title, Body text and Details. Each level has three options:
| Option | Choices |
|---|---|
| Font | Titles or Body text (one of the two fonts above). |
| Size | Small, Medium or Large. |
| Weight | Regular, Medium, Semibold or Bold. |
💡 Changing the title font can make titles wider or narrower. If the difference is noticeable, the editor shows a Title width changes warning. Check the preview, because longer titles can break into more lines. The Revert to the published typography link undoes the changes in this section.
CHANGE THE SHAPE OF CARDS AND BUTTONS
In the Shape section you choose how cards, images and buttons are drawn.
| Option | What it controls | Choices | Default |
|---|---|---|---|
| Roundness | Cards, buttons, images and the search bar. | Square, Subtle, Soft, Round | Subtle |
| Border | The line around cards. | None, Thin (1px), Thick (2px) | None |
| Shadow | How much cards lift off the background. | None, Subtle, Medium, Strong | None |
| Spacing | The space between blocks, below headings and around cards. | Compact, Comfortable, Wide | Comfortable |
| Buttons | How every button in the store is drawn. | Filled, Outline, Text only | Filled |
⚠️ With Outline or Text only buttons, the editor warns you that the button is barely visible over the background when the contrast between the button color and the background is low. The Revert to the published shape link undoes the changes in this section.
PUBLISH THE THEME
The theme has its own draft and its own publish step. Publishing the Home does not publish the theme.
1. Make the changes you want in the theme editor. They are saved automatically to a theme draft, and visitors do not see them.
2. Click Publish theme.
3. In the Publish the theme? window you will see the list of changes by section (Colors, Typography and Shape), with the old and new value of each. Colors are shown as swatches.
4. Confirm. The new theme goes live for every visitor.
Keep the following in mind:
- Until you publish the theme, visitors keep seeing your store's current colors with the standard typography and shape. This also happens when you publish the Home for the first time to take the block-based store live.
- The editor shows Unpublished changes when the draft differs from the published theme.
- To drop unpublished changes, click Discard the N changes (the button shows the real count). The draft goes back to the published theme.
- The "View draft" link of a page shows the draft theme, so you can check the result before publishing.
💡 To publish pages, see Edit and publish a page in Appearance.
Colors for emails and other surfaces
Publishing the theme also updates your store's primary and secondary colors. Transactional emails and other parts of the platform use those colors, so they follow the published theme.
⚠️ After the store goes live on the block-based store, the theme is the only place to change the store's primary and secondary colors. Changes made to those colors elsewhere, such as through the API, are ignored.
FREQUENTLY ASKED QUESTIONS
I changed the colors, but visitors still see the old ones. The theme draft is not published. Go to Control Panel > Settings > Interface > Appearance > Theme and click Publish theme. Until then, the editor shows Unpublished changes.
I published the Home, but the store still has the old fonts and colors. Publishing the Home does not publish the theme. Publish it from its own editor.
The editor warns me about contrast. Can I publish anyway? Yes, the warnings do not block publishing. A low contrast can make text hard to read, so we recommend fixing it.
Why did the colors of our emails change? Because publishing the theme updates the store's primary and secondary colors, and emails use them.
Where did the color pickers in the Design tab go? On a block-based store, they are replaced by the Theme row, which opens the theme editor.
RELATED ARTICLES
- Block-based store
- Edit and publish a page in Appearance
- Set up the navigation bar and footer
- Add shelves and embedded HTML
- Create custom pages and set up their SEO
- Add a pop-up and a product page notice
We hope this tutorial has been easy for you. If you have questions, write to us at [email protected].