Style controls
The Style tab holds the biggest set of look-and-feel controls: your theme preset, the color palette, surfaces, and the styling for buttons, cards, and decorative touches. Change one and it applies across the whole storefront.
Style reference
| Group | Control | Options | What it does |
|---|---|---|---|
| Themes | Theme: Playful Geometry | 1 of 6 themes | A complete preset — colours, fonts, corners and motion in one click. Picking it replaces your current look, and you can adjust anything afterwards. |
| Themes | Theme: Neo-Brutalism | 1 of 6 themes | A complete preset — colours, fonts, corners and motion in one click. Picking it replaces your current look, and you can adjust anything afterwards. |
| Themes | Theme: Botanical | 1 of 6 themes | A complete preset — colours, fonts, corners and motion in one click. Picking it replaces your current look, and you can adjust anything afterwards. |
| Themes | Theme: Sketch | 1 of 6 themes | A complete preset — colours, fonts, corners and motion in one click. Picking it replaces your current look, and you can adjust anything afterwards. |
| Themes | Theme: Neumorphism | 1 of 6 themes | A complete preset — colours, fonts, corners and motion in one click. Picking it replaces your current look, and you can adjust anything afterwards. |
| Themes | Theme: Corporate Trust | 1 of 6 themes | A complete preset — colours, fonts, corners and motion in one click. Picking it replaces your current look, and you can adjust anything afterwards. |
| Themes | Apply theme button | action (commit selected theme LIVE) | Commits the theme you have previewed. Nothing changes for buyers until you apply. |
| Themes | Reset theme button | action (clear creator color/font customisations) | Returns everything to the theme default, discarding your customisations. |
| Palette | Palettes browser | ~126 curated palettes (fetchAllPalettes, dynamic count) | Ready-made colour sets. Picking one rewrites your primary, accent and background together, so the store stays coherent instead of becoming three unrelated choices. |
| Palette | My Palettes group | creator's saved palettes (theme_variants, tenant-scoped) | Palettes you have saved yourself. |
| Palette | Save as custom palette button | action (create theme_variant) | Keeps the colours you've landed on as a named set, so you can return to it after experimenting. |
| Colors | Primary color well | hex color | Your main brand colour. It drives buttons, links and anything the store wants you to click — so it needs to stand out against your background, not blend into it. |
| Colors | Accent color well | hex color | A second colour for highlights and badges. Used sparingly; if it competes with the primary, nothing reads as the main action. |
| Colors | Background color well | hex color | The page behind everything. Small shifts here matter more than they look — a warm off-white and a cool grey give the same store two different characters. |
| Colors | Surface color well | hex color | Cards, panels and anything raised off the page background. A slight difference from the background is what makes a card read as a card. |
| Colors | Text color well | hex color | The colour of body copy. Contrast against the background is what makes a store readable on a phone in daylight. |
| Colors | Text Muted color well | hex color | Secondary text — captions, timestamps, helper lines. Quieter than body copy but still legible. |
| Colors | Border color well | hex color | The lines around cards, inputs and dividers. Lower contrast reads calmer; higher contrast reads more structured. |
| Colors | Section Bold color well | hex color | The background for sections you want to stand out from the rest of the page. |
| Background | Background slot 1 | slot 1/2/3 | A background layer — a colour, gradient or image. Layers stack, so a later slot sits over an earlier one. |
| Background | Background slot 2 | slot 1/2/3 | A background layer — a colour, gradient or image. Layers stack, so a later slot sits over an earlier one. |
| Background | Background slot 3 | slot 1/2/3 | A background layer — a colour, gradient or image. Layers stack, so a later slot sits over an earlier one. |
| Background | Background custom: None | 8 pattern types | A plain background — just the colour. The safest choice when your products are the visual interest. |
| Background | Background custom: Solid | 8 pattern types | A single flat colour. |
| Background | Background custom: Dot Grid | 8 pattern types | A faint grid of dots. Adds texture without competing with content. |
| Background | Background custom: Halftone | 8 pattern types | A printed-dot pattern. Distinctive, and heavy — best behind a single hero section rather than a whole page. |
| Background | Background custom: Paper Grain | 8 pattern types | A subtle paper texture — warms up an otherwise flat page. |
| Background | Background custom: Ambient Orbs | 8 pattern types | Soft coloured glows behind the content. Reads modern and can wash out text if the contrast drops. |
| Background | Background custom: Grid Paper | 8 pattern types | Faint ruled lines, like graph paper. |
| Background | Background custom: Animated | 8 pattern types | A moving background. Costs performance on older phones and pulls the eye away from your products. |
| Button | Button shape | rounded (6px) / sharp (0px) / pill (999px) | Square, rounded or pill. Pills read consumer and friendly; squares read technical. |
| Button | Hover effect | darken / lift / scale / wiggle / fill-accent | What a button or card does when the pointer is over it. On a phone nobody sees this — keep the resting state readable on its own. |
| Button | Shadow | none / soft / soft-diffused / soft-hard / hard-offset | How much a button lifts off the page. |
| Button | Text style (text-transform) | none / uppercase / capitalize | Whether text renders as typed, uppercase, or title case. |
| Card | Card style | shadow / border / flat | Whether cards have a border, a shadow, or neither. Borderless cards need a background difference to read as separate. |
| Card | Card shadow | none / soft / soft-diffused / soft-hard / hard-offset | How much cards lift off the page. |
| Card | Hover effect | none / lift / wiggle / rotate | What a button or card does when the pointer is over it. On a phone nobody sees this — keep the resting state readable on its own. |
| Card | Product image shape (store-wide) | theme / rounded / square / circle / dome | Square, portrait or landscape crops for every product image. Consistency matters more than the choice — mixed shapes make a grid look untidy. |
| Decorations Enabled (master) | Switch | One switch for all decorative flourishes. Off is a valid choice — decoration should earn its place. | |
| Harmonize neutrals from brand | Switch | Tints greys toward your brand colour so the neutrals look chosen rather than default. | |
| Paper Grain Opacity | Slider 0–1, step 0.05, default 0.20 | How strong the paper texture is. Past about a third it starts to fight your text for attention. | |
| Reset Decoration Overrides | Button (action) | Clears decoration changes without touching the rest of the theme. | |
| [removed/moved] | n/a | No longer in the editor — kept here only so an old screenshot or link still resolves. |
43 controls in this group. Generated from the live theme-control matrix.
What happens — and what doesn't
- These controls are store-wide — a color or button style applies to every page.
- Presets set a whole look at once; from there each value stays editable.
What does a theme preset change?
A preset sets a complete look — colors, surfaces, and component styling — in one pick. You can then fine-tune any individual value from the Style tab.
Do style changes affect my whole store?
Yes. Style controls are store-wide, so a color or button change ripples across every page of the storefront.