Colors
Theme settings: Colors.
Colors
At a glance
Define color schemes (background, text, buttons, borders, badges) applied across sections.
Where to find it
- Theme editor path: Online Store → Customize → Theme settings → Colors
Screenshot needed
Colors in the theme editor
Screenshot of Theme settings → Colors. Show the settings panel and the live preview so merchants can match labels to what they see.
Settings
Color schemes can be applied to sections throughout your online store.
Color schemes
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Background | Color for background in this scheme. | #FFFFFF | Always |
| Text | Color for text in this scheme. | #2D4427 | Always |
| Primary text | Color for primary text in this scheme. | #000000 | Always |
| Secondary text | Color for secondary text in this scheme. | #666666 | Always |
| Accent | Color for accent in this scheme. | #000F9F | Always |
| Borders | Color for borders in this scheme. | #E6E6E6 | Always |
| Shadow | Color for shadow in this scheme. | #000000 | Always |
| Separator color | Color for separator color in this scheme. | #c1c0c0 | Always |
| Swipe to explore hint text | Color for swipe to explore hint text in this scheme. | #666666 | Always |
| Default button | |||
| Background | Color for background in this scheme. | #000000 | Always |
| Text | Color for text in this scheme. | #FFFFFF | Always |
| Border | Color for border in this scheme. | #000000 | Always |
| Default button - Hover state | |||
| Background (hover) | Color for background (hover) in this scheme. | #1a1a1a | Always |
| Text (hover) | Color for text (hover) in this scheme. | #FFFFFF | Always |
| Border (hover) | Color for border (hover) in this scheme. | #1a1a1a | Always |
| Primary button | |||
| Background | Color for background in this scheme. | #1A1A1A | Always |
| Text | Color for text in this scheme. | #FFFFFF | Always |
| Border | Color for border in this scheme. | #1A1A1A | Always |
| Primary button - Hover state | |||
| Background (hover) | Color for background (hover) in this scheme. | #1a1a1a | Always |
| Text (hover) | Color for text (hover) in this scheme. | #FFFFFF | Always |
| Border (hover) | Color for border (hover) in this scheme. | #1a1a1a | Always |
| Secondary button | |||
| Background | Color for background in this scheme. | #FFFFFF | Always |
| Text | Color for text in this scheme. | #1A1A1A | Always |
| Border | Color for border in this scheme. | #1A1A1A | Always |
| Secondary button - Hover state | |||
| Background (hover) | Color for background (hover) in this scheme. | #f5f5f5 | Always |
| Text (hover) | Color for text (hover) in this scheme. | #1A1A1A | Always |
| Border (hover) | Color for border (hover) in this scheme. | #1A1A1A | Always |
| Outline style | |||
| Border | Color for border in this scheme. | #000000 | Always |
| Text | Color for text in this scheme. | #000000 | Always |
| Outline style - Hover state | |||
| Background (hover) | Color for background (hover) in this scheme. | #000000 | Always |
| Text (hover) | Color for text (hover) in this scheme. | #FFFFFF | Always |
| Border (hover) | Color for border (hover) in this scheme. | #000000 | Always |
| Ghost button | |||
| Text | Color for text in this scheme. | #000000 | Always |
| Ghost button - Hover state | |||
| Background (hover) | Color for background (hover) in this scheme. | rgba(0, 0, 0, 0.05) | Always |
| Text (hover) | Color for text (hover) in this scheme. | #000000 | Always |
| Badges | |||
| Sale Background | Color for sale background in this scheme. | #000000 | Always |
| Sale Text | Color for sale text in this scheme. | #FFFFFF | Always |
| Accordion | |||
| Accordion background | Color for accordion background in this scheme. | #FFFFFF | Always |
| Trigger text | Color for trigger text in this scheme. | #2D4427 | Always |
| Content text | Color for content text in this scheme. | #666666 | Always |
| Accordion border | Color for accordion border in this scheme. | #c1c0c0 | Always |
Setting details
Each control from the tables above, explained simply:
Background
Color for background in this scheme. Default: #FFFFFF.
Text
Color for text in this scheme. Default: #2D4427.
Primary text
Color for primary text in this scheme. Default: #000000.
Secondary text
Color for secondary text in this scheme. Default: #666666.
Accent
Color for accent in this scheme. Default: #000F9F.
Borders
Color for borders in this scheme. Default: #E6E6E6.
Shadow
Color for shadow in this scheme. Default: #000000.
Separator color
Color for separator color in this scheme. Default: #c1c0c0.
Swipe to explore hint text
Color for swipe to explore hint text in this scheme. Default: #666666.
Background
Color for background in this scheme. Default: #000000.
Text
Color for text in this scheme. Default: #FFFFFF.
Border
Color for border in this scheme. Default: #000000.
Background (hover)
Color for background (hover) in this scheme. Default: #1a1a1a.
Text (hover)
Color for text (hover) in this scheme. Default: #FFFFFF.
Border (hover)
Color for border (hover) in this scheme. Default: #1a1a1a.
Background
Color for background in this scheme. Default: #1A1A1A.
Text
Color for text in this scheme. Default: #FFFFFF.
Border
Color for border in this scheme. Default: #1A1A1A.
Background (hover)
Color for background (hover) in this scheme. Default: #1a1a1a.
Text (hover)
Color for text (hover) in this scheme. Default: #FFFFFF.
Border (hover)
Color for border (hover) in this scheme. Default: #1a1a1a.
Background
Color for background in this scheme. Default: #FFFFFF.
Text
Color for text in this scheme. Default: #1A1A1A.
Border
Color for border in this scheme. Default: #1A1A1A.
Background (hover)
Color for background (hover) in this scheme. Default: #f5f5f5.
Text (hover)
Color for text (hover) in this scheme. Default: #1A1A1A.
Border (hover)
Color for border (hover) in this scheme. Default: #1A1A1A.
Border
Color for border in this scheme. Default: #000000.
Text
Color for text in this scheme. Default: #000000.
Background (hover)
Color for background (hover) in this scheme. Default: #000000.
Text (hover)
Color for text (hover) in this scheme. Default: #FFFFFF.
Border (hover)
Color for border (hover) in this scheme. Default: #000000.
Text
Color for text in this scheme. Default: #000000.
Background (hover)
Color for background (hover) in this scheme. Default: rgba(0, 0, 0, 0.05).
Text (hover)
Color for text (hover) in this scheme. Default: #000000.
Sale Background
Color for sale background in this scheme. Default: #000000.
Sale Text
Color for sale text in this scheme. Default: #FFFFFF.
Accordion background
Color for accordion background in this scheme. Default: #FFFFFF.
Trigger text
Color for trigger text in this scheme. Default: #2D4427.
Content text
Color for content text in this scheme. Default: #666666.
Accordion border
Color for accordion border in this scheme. Default: #c1c0c0.
Tips
- Changes apply store-wide — check home, product, and collection pages after saving.
- Pair with section-level color schemes for page-specific overrides.
- Read How theme settings work for how globals connect to sections.