Your store's colors and typography are controlled globally: change them here and they'll update everywhere, across all pages at once.
In the design panel, click the settings icon to open global configuration in the configuration panel. Global configuration shows the Colors, Typography, and any other design settings supported by the active theme.
Click any setting to open it.
Each color variable has a swatch. To change one:
- Click the swatch.
- Use the color picker, or type in a hex code or RGB value directly.
- The preview updates immediately across all sections.
Colors are grouped by area of the store:
| Variable | Used For |
|---|---|
| Theme Page Background | The base background color of all pages |
| Theme Accent | Accent highlights used across the theme |
| Variable | Used For |
|---|---|
| Text Heading | All heading text |
| Text Body | Body copy and paragraphs |
| Text Label | Form labels and small UI text |
| Text Secondary | Muted or supporting text |
Button
| Variable | Used For |
|---|---|
| Button Primary | Primary call-to-action buttons |
| Button Secondary | Secondary or outline buttons |
| Button Link | Text-style link buttons |
Discount
| Variable | Used For |
|---|---|
| Discount Badge Background | Background of sale/discount badges |
| Discount Badge Text | Text color inside discount badges |
| Discount Text | Discounted price text |
| Discount Timer | Countdown timer color |
Header
| Variable | Used For |
|---|---|
| Header Background | Background of the header bar |
| Header Navigation Text | Navigation link text color |
| Header Icons | Icon color in the header |
Footer
| Variable | Used For |
|---|---|
| Footer Background | Main footer background |
| Footer Bottom Bar Background | Background of the bottom strip of the footer |
| Footer Heading Text | Section heading text in the footer |
| Footer Body Text | Body text in the footer |
| Footer Icons | Icon color in the footer |
If you want a cohesive palette without picking each color individually:
- In the Colors section configuration, click Generate with AI button.
- Describe the look you want. For example,
- "Warm and earthy: terracotta, cream, and olive"
- "Bold and modern: deep navy with gold highlights"
- "Clean and minimal, light gray with a teal accent"
- "Festive and celebratory: rich reds and deep greens"
- The AI generates several palette options. Each shows swatches mapped to your palette roles.
- Click Apply on the one you like.
Not happy with the options? Adjust your description and generate again: only Apply makes a change.
Tips
- Run a contrast check between your Text and Background colors to ensure readability. Aim for a 4.5:1 ratio for body text (WCAG AA standard).
- Keep Accent subtle; it's most effective when used sparingly to highlight key elements.
Note: AI-generated palettes and the theme's default colors are already designed to meet the WCAG AA contrast standard and keep accent usage balanced.
Typography settings control the fonts across the entire store. Three font roles are available:
- Global Font — the default typeface used across the store.
- Title Font — the typeface used for headings and titles. Overrides the Global Font for titles.
- Body Font — the typeface used for body copy and paragraphs. Overrides the Global Font for body text.
Select a font from the dropdown for each role — the list includes all available Google Fonts. Changes apply store-wide immediately.
The Settings tab in the design panel contains additional design controls. These settings are provided by the active theme and will vary depending on which theme is installed.
- Write Your Content: edit the copy inside your sections.
- Get Help from AI: ask AI for color or font recommendations.