Theme Editor - Theme settings

Theme settings settings panel in the theme editor — Theme Editor > Theme settings

The Theme settings panel is the entry point for all global design tokens — colours, typography, layout, component styles, and custom CSS. Select a category to open its settings panel. Changes apply across every page of your storefront and take effect in the preview immediately.

Categories

Theme settings are organised into four sections: Global design tokens that affect the overall storefront appearance.

Category	Description
Logo	Logo width in the storefront header.
Colors	Background, text, border, and status colours.
Typography	Font families and scale for headings and body text.
Layout	Maximum page width and horizontal margins.

Components

Styles for interactive UI elements.

Category	Description
Buttons	Button colours, border thickness, and corner radius.
Inputs	Form field colours, border thickness, and corner radius.
Breadcrumbs	Breadcrumb trail text and active-item colours.
Collapsible section	Expandable section colours, border, and corner radius.
Calendar	Availability calendar stock colours, borders, and padding.

Cards

Styles for card-like UI surfaces and other visual blocks.

Category	Description
Variant pills	Variant option selector colours, border, and corner radius.
Listings card	Product card colours, borders, spacing, and image settings.
Collection card	Collection card colours, borders, spacing, and image settings.
Pickup availability	The pickup availability card on the listing page.
Cart store selector	The store selector on the bag page.
Availability indicator	The availability status dot and its text.
Header bar	Header background, text, icon, and border colours.
Announcement bar	Announcement bar background and text colours.
Search bar	Search bar background colour.
Filter section	Collection page filter section border colour.

Settings

Advanced theme tools.

Category	Description
Custom CSS	Add arbitrary CSS rules to the storefront.
Theme style	View, copy, and bulk-edit all theme CSS variables. Reset the entire theme.

How it works

Each category panel has a Reset button that reverts only that category’s settings to the defaults. To reset everything at once, use the Reset entire theme button in the Theme style panel. Changes preview in real time but are not stored until you save. Save in the editor top bar writes them directly to the live storefront — there is no separate draft or publish step. Closing the editor with unsaved changes opens a dialog where you save or discard them.

Open Theme Editor
Select a settings category
Adjust values — preview updates in real time
Save — changes go live immediately

Theme Editor overview

Learn about the full Theme Editor.

Theme style

View and edit all theme CSS variables.

Welcome to TWICE Docs

Navigating in TWICE

Understand the system

Theme Editor - Theme settings

Categories

Header

Components

Cards

Settings

How it works

Theme Editor overview

Theme style

​Categories

​Header

​Components

​Cards

​Settings

​How it works

​Related

Theme Editor overview

Theme style

Categories

Header

Components

Cards

Settings

How it works

Related