# Customize your Design

Your store's colors and typography are controlled globally: change them here and they'll update everywhere, across all pages at once.

## Opening global design settings

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.

## Colors

iframe
### Option A: Pick colors manually

Each color variable has a swatch. To change one:

1. Click the swatch.
2. Use the color picker, or type in a hex code or RGB value directly.
3. The preview updates immediately across all sections.


Colors are grouped by area of the store:

#### **Theme**

| Variable | Used For |
|  --- | --- |
| Theme Page Background | The base background color of all pages |
| Theme Accent | Accent highlights used across the theme |


#### **Text**

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


### Option B: Generate a full palette with AI

If you want a cohesive palette without picking each color individually:

1. In the Colors section configuration, click **Generate with AI** button.
2. Describe the look you want. For example,
  1. *"Warm and earthy: terracotta, cream, and olive"*
  2. *"Bold and modern: deep navy with gold highlights"*
  3. *"Clean and minimal, light gray with a teal accent"*
  4. *"Festive and celebratory: rich reds and deep greens"*
3. The AI generates several palette options. Each shows swatches mapped to your palette roles.
4. 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

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.

## Other Theme Settings

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.

## Related

* [Write Your Content:](/commerce/docs/manage-website/appearance/theme-editor/write-your-content) edit the copy inside your sections.
* [Get Help from AI:](/commerce/docs/manage-website/appearance/theme-editor/get-help-from-ai) ask AI for color or font recommendations.