Colors
Shopify now uses color schemes instead of single global colors.
A color scheme lets you define a complete visual preset (backgrounds, text, buttons, overlays, etc.) and reuse it across sections — giving your store a consistent, professional look.
You can create multiple schemes, but each scheme contains the same set of settings.
🎨 Background colors
Background options are grouped into three layers:
| Setting | What it controls |
|---|---|
| Background | Main background color (solid) — usually white, light, or dark. |
| Accent background | Used for subtle areas such as placeholders or highlighted sections. |
| Background gradient | Optional gradient that overrides the normal background when enabled. |
💡 Tip
Gradients work best on hero sections and promotional areas — avoid overusing them.
✍️ Typography colors
Control the text and heading colors across your theme.
| Setting | What it controls |
|---|---|
| Headings | Color for titles, section headers, and large headings. |
| Text | Main body text color for paragraphs and descriptions. |
Choose colors with good contrast to improve readability and accessibility.
🔘 Buttons
Buttons are split into Primary, Secondary, and Outline styles.
Primary button
| Setting | Description |
|---|---|
| Background | Main button color. |
| Text color | Text color inside the button. |
| Background (hover) | Background color used when hovering. |
| Text (hover) | Text color used when hovering. |
| Gradient | Optional gradient background. |
| Gradient (hover) | Gradient applied on hover. |
Secondary button
Similar to primary, but usually softer or inverted.
| Setting | Description |
|---|---|
| Background | Secondary button background. |
| Text color | Text color inside the button. |
| Background (hover) | Background on hover state. |
| Text (hover) | Text color on over state. |
Outline button
Focused on borders instead of fills.
| Setting | Description |
|---|---|
| Text & border | Color for both text and border. |
| Background (hover) | Optional filled background on hover. |
| Text & border (hover) | Different color when hovering. |
👍 Best practice
Use primary for actions, secondary for alternatives, and outline for subtle actions.
🏷️ Product colors
These help differentiate pricing states and trust UI elements.
| Setting | Description |
|---|---|
| Current price | Color of the active product price. |
| Compare-at price | Color for the old price (sale/discount). |
| Rating color | Star ratings and review highlights. |
⚠️ Alerts & status colors
Used across forms, carts, and notifications.
| Setting | Description |
|---|---|
| Error | Errors or failed actions. |
| Success | Confirmations and completed actions. |
| Warning | Alerts and notices. |
| Info | Informational messages and tips. |
🔗 Others
| Setting | Description |
|---|---|
| Links | Color used for clickable links. |
| Dividers / borders | Line separators and UI borders. |
| Shadow color | Card and element shadows. |
Global color scheme settings
Outside individual schemes, there are two global options.
Default color scheme
Controls the main body color scheme for most pages.
Drawers color scheme
Applies to:
- cart drawer
- menu drawer
- side panels
Choose a scheme that contrasts well with page content.
Best practices (UX)
- Keep consistent colors across sections
- Maintain strong contrast for accessibility (WCAG compliant)
- Use gradients sparingly
- Avoid using too many accent colors
- Always preview on mobile
🚀 Result
A visually consistent, high-converting Shopify store that feels professional and easy to read.