Key takeaways
- Brand colors live in the Theme Editor under Theme settings → Colors. Changes here apply globally across your store.
- Modern Shopify themes (Dawn, Horizon) use color schemes - named palettes you assign per section for more flexibility.
- For colors your theme doesn’t expose in settings, CSS custom properties or a direct code override is needed.
- Fudge can apply a custom color palette across your entire theme without you writing CSS.
Whether you’re refreshing your brand or going live for the first time, updating colors in Shopify is mostly a no-code task. Here’s where to find the controls and how to get the most out of them.
Why you can trust us
Jacques has 15+ years of Shopify development experience. We built Fudge — an AI storefront editor used by hundreds of Shopify stores, with a 5.0 rating on the Shopify App Store.
Where to update brand colors in Shopify
Step 1. Go to Online Store → Themes → Customize.
Step 2. In the left sidebar, scroll to the bottom and click Theme settings.
Step 3. Click Colors (some themes label this section “Color schemes” or “Palette”).
Step 4. You’ll see color pickers for elements like:
- Background color
- Text color
- Button color and button text color
- Border color
- Link color
- Sale badge color
Step 5. Click any color swatch to open the color picker. Enter a hex code directly (e.g., #E63946) or use the picker to select a color visually.
Step 6. Save when done. Changes apply immediately across all pages.
How do I change brand colors on Shopify?
Enter your exact brand hex codes in the color picker fields. Shopify’s color picker accepts:
- Hex codes -
#FF5733 - RGB values -
rgb(255, 87, 51) - HSL values - via the visual slider
Use hex codes for accuracy. Your brand guidelines should specify the exact hex values for primary, secondary, and accent colors.
How color schemes work in modern Shopify themes
Themes like Dawn and Horizon use a color scheme system rather than single global color values.
A color scheme is a named set of background, text, and button colors - for example: “Scheme 1 = white background with dark text”, “Scheme 2 = dark background with light text”.
Each section can be assigned a different color scheme. This lets you alternate visual weight down the page without setting colors individually.
To edit a color scheme: Theme settings → Color schemes → click the scheme you want to edit → update the color values.
To assign a scheme to a section: click the section in the Theme Editor → look for a Color scheme dropdown in its settings.
Where do you navigate in Shopify to update brand colours?
The full path: Online Store → Themes → Customize → Theme settings → Colors.
Some themes also expose color settings at the section level. Click any section → look for a “Color scheme” or “Background color” option in the section settings panel. Section-level colors override the global defaults for that section only.
How to override colors with CSS
If a color is not exposed in Theme settings - such as a specific icon color, hover state, or third-party app element - you can override it with custom CSS.
Go to Theme settings → scroll to Custom CSS → add your override:
.your-element-class {
color: #E63946;
background-color: #FFFFFF;
}To find the correct CSS class: right-click the element on your live store → Inspect → check the element’s class attributes.
How to apply a full brand color palette with Fudge
If you’re rebranding and want to apply a new color palette consistently across buttons, headings, banners, badges, and hover states - not just the colors your theme exposes in settings - describe it to Fudge:
“Update the store to use our brand colors: primary #1A1A2E, accent #E63946, background #FAFAFA, and button text white. Apply consistently to buttons, links, and section backgrounds.”
Fudge generates the changes as a draft. You review before anything goes live.
Tips for picking Shopify brand colors
- Keep it simple. Two to three core brand colors is enough. A primary color for CTAs and headings, a secondary for accents, and a neutral for backgrounds.
- Check contrast. Text needs sufficient contrast against its background for readability and accessibility. Use a tool like WebAIM Contrast Checker to verify.
- Test in mobile preview. Color decisions that look balanced on a wide desktop layout can feel heavy on a small mobile screen. Always check both.
