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.
To update brand colors in Shopify, go to Online Store → Themes → Customize → Theme settings → Colors and enter your hex codes. In Dawn, Horizon and other modern themes you edit color schemes there and assign one to each section.
Why you can trust us
Jacques has 15+ years of Shopify development experience. We build Fudge, the AI operator for Shopify stores, with a 4.9 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.
For fonts as well as colors, see How to Update Colors and Fonts in Shopify.
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.
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.
For link colors specifically, see How to Change Link Color in Shopify.
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, the AI operator for Shopify stores:
“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’s store editor generates the changes as a draft, so you can check the new palette on real pages before anything goes live. The colors live in your theme’s own CSS, so they stay if you ever uninstall Fudge.
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.
FAQ
Should I use the same brand colors across all sections of my Shopify store?
The primary palette (1–3 core colors) should be consistent. Use color schemes (in modern themes) to vary section backgrounds and text contrast — alternating light/dark sections creates visual rhythm without violating brand consistency. The CTA color should always be the same shade for predictability.
Will updating brand colors hurt conversion?
Short-term, possibly — returning customers may feel the visual change is jarring. Long-term, a coherent brand-aligned palette improves trust and conversion. If you're refreshing colors significantly, brief existing customers via email so the change feels intentional rather than abrupt.
How do I match my Shopify colors to my brand book?
Use exact hex codes from your brand guidelines in Theme settings → Colors. Don't approximate or eyeball — your brand's #E63946 should appear on screen as #E63946. For Pantone, CMYK, or RGB-only brand specs, convert to hex first. For a coordinated repaint across colors the Theme Editor doesn't expose (icons, hover states, badges), describe the palette to Fudge and it applies the hex codes consistently across the storefront.
Can I have different brand colors per Shopify market?
Not on one store: every market shares the published theme. A region-specific look needs a separate expansion store, which is rarely worth it.
Should I update brand colors in the Shopify checkout too?
Yes. Settings → Checkout → Customize controls checkout branding (logo, accent colors, button styles) separately from the storefront theme. Match these to your storefront for a coherent purchase experience. Mismatched colors between storefront and checkout undermine trust at the highest-stakes moment.
