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:

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".

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.

Setting	What does it do?
Font	The store's main font. When you click the button, a font selection window opens; the font you select appears immediately in the preview.
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 the sample sentence Your store's theme will appear in this font. live, with the settings you selected.

Tip: Readability matters more than anything. Using very ornate fonts only in headings and keeping body text plain gives good results. Check in the preview box whether the text reads comfortably.

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.

Theme Settings — Site, Color, Type and General

On this page