Theme Settings — Site, Color, Type and General
General appearance settings that affect the whole store rather than individual components. You set them once, and they apply to every page of your store.
Where to find: Opens in the right panel when you click the Theme Settings (palette icon) button in the top toolbar Who it's for: Those who want to set their store's color palette, font, logo and overall look In short: General appearance settings that affect the whole store rather than individual components. You set them once, and they apply to every page of your store.
What does it do?
Theme Settings is where you define your store's "brand identity." It affects the store as a whole, not a single component: what your main color is, which font your text appears in, what your logo is, how wide your content spreads... You set these once here and they apply automatically to all pages.
To open the panel, click the Theme Settings (palette) button in the top toolbar. At the top of the panel you'll find the Theme Settings heading and the Customize your store's appearance description.
8 tabs
The Theme Settings panel consists of 8 small icon-tabs at the top. When you hover over an icon, its name appears in a tooltip:
| Icon | Tab | Contents | Guide |
|---|---|---|---|
| Site / Meta | Logo, favicon, SEO information | this file | |
| Colors | Color palette and custom colors | this file | |
| Typography | Font and text settings | this file | |
| Other | Content width, corner radius, spacing | this file | |
| Product | Product card and product page appearance | Theme Settings — Product Appearance Settings | |
| Fixed Buttons | Contact buttons fixed in the corner | Theme Settings — Fixed Buttons, Behavior and Checkout | |
| Behavior | Scroll-to-top button, cookie consent, progress bar | Theme Settings — Fixed Buttons, Behavior and Checkout | |
| Checkout | Cart/address/checkout page layouts | Theme Settings — Fixed Buttons, Behavior and Checkout |
In this file we cover the first four tabs (general appearance). The other tabs are detailed in their own guides.
Warning — saving difference: Changes in the four tabs in this file (Site, Colors, Typography, Other) go to the store when you click Publish. But the Product and Checkout tabs are different — they are saved instantly (see the relevant guides).
1) Site / Meta tab
Your store's brand and search engine (SEO) information are here.
Brand
| Setting | What does it do? |
|---|---|
| Site Logo | Your store's main logo — used in the header and generally throughout. You upload it with Select image and delete it with Remove. |
| Site Icon (Favicon) | The tiny icon shown on the browser tab. As stated in the description, square and at least 64x64 pixels is recommended. |
Meta Information (SEO)
| Setting | What does it do? |
|---|---|
| Site Title | The main title shown in search engines and on the browser tab. Example: "Store Name — Quality Products". |
| Title Template | Determines how the title appears on subpages. %s = page name, {site} = site title. Example: "%s - {site}" → "T-Shirt - Store Name". A live Preview is shown below it. |
| Site Description | The short description shown in search results (150-160 characters recommended). |
| Keywords | Comma-separated keywords. Example: "shoes, sport, sale". |
Share Image
| Setting | What does it do? |
|---|---|
| Share Image (OG Image) | The image shown when your store's link is shared on social media (WhatsApp, Facebook, X). 1200x630 pixels is recommended. |
Tip: A good favicon and share image make your store look professional. The image that appears when you send your link to someone on WhatsApp determines the first impression.
2) Colors tab
You define your store's color world here.
Dark Mode
At the very top there is a Dark Mode switch. If you turn it on, your store appears with a dark (night) theme. If it's off, the light (day) theme is used.
Color Palettes (ready-made palettes)
Under the Color Palettes heading, there are more than 40 ready-made color palettes laid out in pairs. Each box shows that palette's 4 main colors (Primary, Secondary, Accent, Background) as small squares. When you hover over the info (ⓘ) icon on a palette, a short description of that palette appears (e.g. "Natural green, ideal for organic products").
When you click a palette, all your store's colors change instantly according to that palette. The selected palette is marked with a check mark ().
Tip: Pick a palette that suits the character of your business — for example, soft pink tones for cosmetics, green tones for organic food. Starting with a ready-made palette is much faster and more harmonious than choosing colors from scratch.
Custom Colors
Under the Custom Colors heading you can adjust colors one by one, by hand. In each color row, the color's name (e.g. Primary) and the current color code are shown; when you click on it, a color picker opens.
Initially only the basic colors are shown. If you click the All button next to the heading, all colors (more than 25) open up; with Basic you return to only the main colors.
Warning: Don't overdo it when changing colors by hand — if there isn't enough contrast (difference) between the text and the background, the text becomes unreadable. Choosing a ready-made palette and making small touch-ups on it is the safest method.
3) Typography tab
You adjust the appearance of text here. Your store can use two separate fonts: one for headings and one for body text.
Font pairings
At the top of the tab there are ready-made font pairings. Each card shows the heading font on top and the body font below it, each rendered in its own typeface; the grey line at the bottom is the pairing's name (Elegant, Editorial, Contrast, Classic, Technical, Warm, Corporate, Vivid, Soft, Minimal). Clicking a card changes the heading and body font together. A appears on the selected pairing.
Pairings are a starting point; after clicking one you can still change either font individually in the two fields below.
Heading and body font
| Setting | What does it do? |
|---|---|
| Heading Font | The font for page and section headings. If you leave it empty the box reads "(body font) · same as body" and headings use the body font. Once you pick a font, a Match body button appears next to the label; pressing it returns headings to the body font. |
| Body Font | Paragraphs, descriptions, buttons — in short, everything that is not a heading. |
| Font Size | The general text size (12–24 pixel slider). |
| Font Weight | The thickness of the text (300 thin — 800 bold). |
| Line Height | The vertical space between lines (1–2.5). A high value makes the text more "airy". |
| Letter Spacing | The horizontal space between letters. |
At the very bottom there is a Preview box; it shows This is how headings look in the heading font on top and Your store's theme will appear in this font. in the body font below, live.
Advanced font tokens
Clicking Advanced font tokens reveals the Serif Font and Monospace Font fields. These do not change the store's general appearance directly; they are only used when you pick Serif or Monospace in a block's Typography setting.
Which wins — the block setting or the theme setting?
A block's own Typography → Font setting overrides the theme setting:
- If the block has Custom Font selected → that font is used.
- If the block has Serif / Monospace / Heading Font / Body Font selected → that choice is used.
- If the block has Theme (auto) selected (the default) → the heading font is used when the field's Tag setting is
h1–h6, otherwise the body font is used.
Tip: If you want a block's title to pick up the theme heading font, make sure that field's Tag setting is h1–h6. Fields tagged span or p intentionally use the body font.
Tip: Readability matters more than anything. An ornate font for headings and a plain one for body text is the safest choice — the ready-made pairings are built on exactly that logic. Check in the preview box whether the text reads comfortably.
Note: When you choose a heading font that differs from the body font, your store downloads a second font file. Using a single font family makes the page load slightly faster.
4) Other tab
The page's general size and spacing settings are here.
Content Width (Container)
You choose how wide an area your content spreads across the page:
| Option | Width |
|---|---|
| Default | 1400 pixels (ideal for most stores) |
| Wide | 1920 pixels (more spacious, for large screens) |
| Full Width | 100% (edge to edge) |
Corner Radius & Spacing
| Setting | What does it do? |
|---|---|
| Border Radius (Corner Radius) | How rounded the corners of buttons and cards will be. There are also ready-made quick options (0 – 1) below the slider. |
| Spacing | The general spacing scale between elements. |
Tip: Corner Radius determines your store's "feel": a value of 0 gives a sharp/corporate look, a high value gives a soft/friendly one. With a single setting, the style of all your buttons and cards changes consistently.
Frequently asked questions
Q: I changed the color palette but the color of some components didn't change. A: You probably gave those components a manual (fixed) color. If you want them to change together with the theme color, use the Variables option (theme colors: Primary, Accent, etc.) instead of a fixed color in the component's color setting.
Q: I uploaded my logo but it doesn't show in the store. A: A logo change is a theme setting; for it to appear in the store you need to click Publish. Also make sure your menu's (Header) logo block is set to "use site logo".
Q: I'm not sure which color is which (Primary, Accent...). A: General rule: Primary is your main brand color (buttons, highlights). Accent is a secondary highlight color. Background is the page's base. If you're not sure, choose a ready-made palette; all these colors are set automatically in a harmonious way.
Was this page helpful?
Component Pool (Right Panel)
A bird's-eye list of all the components on the open page. Instead of clicking one by one on the canvas, you manage everything from here in an organized…
Theme Settings — Fixed Buttons, Behavior and Checkout
You set the store's "helper" behaviors and the appearance of the checkout flow from here.