How to Update Colors and Fonts in Shopify (2026)

Key takeaways

• Both colors and fonts are controlled in the Theme Editor under Theme settings - no code required for standard changes.
• Colors live under Theme settings → Colors. Fonts live under Theme settings → Typography.
• Modern themes use color schemes you can assign per section, giving you more control over visual rhythm.
• For colors and fonts not exposed in theme settings, custom CSS or Fudge handles the override.

Updating brand colors and fonts is one of the first things most merchants do when setting up or refreshing a Shopify store. Both live in the same place - the Theme Editor’s Theme settings panel.

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 find color and font settings 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. You’ll see settings grouped by category. Look for:

• Colors (or “Color schemes”) - for brand palette settings
• Typography (or “Fonts”) - for font family and size settings

These two sections control the global appearance of your entire storefront.

How to change colors in Shopify

Click Colors in Theme settings. You’ll find color pickers for:

• Background colors - page and section backgrounds
• Text colors - headings and body copy
• Button colors - primary and secondary button fills and text
• Border and accent colors - dividers, input outlines, badges

Click any color swatch and enter your hex code (e.g., #1A1A2E). Changes apply globally across your store.

Color schemes (modern themes). Themes like Dawn and Horizon use named color schemes rather than single global colors. Each scheme is a coordinated set of background, text, and button colors. You define the schemes in Theme settings, then assign them to individual sections. This lets you alternate light and dark sections without setting colors element by element.

How to change fonts in Shopify

Click Typography in Theme settings. You’ll see font pickers for:

• Headings - H1 through H3 across your store
• Body text - paragraphs, labels, product descriptions

Click Change next to either font role. Shopify’s font library opens, showing Google Fonts, system fonts, and Shopify’s curated picks.

Browse or search by name, click to preview, then click Select. Save when done.

How to change font colors in Shopify

Font colors are part of the Colors settings, not Typography.

In Theme settings → Colors, look for the Text color field. This controls body text color globally. Heading text color may be a separate field - look for “Heading color” or “Heading text” in the same panel.

For individual section overrides, click the section in the Theme Editor → look for a Color scheme selector in the section settings. Switching the section to a different color scheme changes both its background and text colors together.

How to override specific colors and fonts with CSS

If a color or font isn’t exposed in Theme settings, use custom CSS.

Go to Theme settings → scroll to Custom CSS. Add your overrides:

/* Custom heading font color */
h1, h2, h3 {
  color: #1A1A2E;
}

/* Custom link color */
a {
  color: #E63946;
}

/* Custom button background */
.btn-primary, .button--primary {
  background-color: #E63946;
  color: #FFFFFF;
}

Find the correct CSS class by right-clicking an element on your live store → Inspect.

How to apply custom fonts not in Shopify’s library

For purchased or proprietary brand fonts, the process involves uploading font files to your theme assets:

1. Upload .woff2 and .woff files via Online Store → Themes → Actions → Edit code → Assets folder
2. Add a @font-face rule in your CSS
3. Apply the font to heading and body elements

This requires CSS knowledge. The alternative is describing it to Fudge: “Implement our brand font [font name] for headings and [font name] for body text. The files are uploaded to the assets folder.” Fudge writes the declarations and applies them as a draft.

Making brand changes consistently

When updating colors and fonts, check these locations to make sure changes are consistent:

• Email notifications - Shopify Admin → Settings → Notifications uses separate branding settings from your theme
• Checkout - Shopify Admin → Settings → Checkout → Customise checkout has its own branding panel
• Online Store → Preferences - controls metadata; not styling, but worth reviewing

The Theme Editor controls your storefront only. Checkout and email branding are configured separately.

Using Fudge for a full brand refresh

If you want to apply a new color palette and typography system across your entire theme - including elements the Theme Editor doesn’t expose - describe the full change to Fudge:

“Apply our new brand: primary color #1A1A2E, accent #E63946, background #FAFAFA. Headings in Canela Display, body in Inter. Apply consistently to buttons, hover states, section backgrounds, and badges.”

Fudge generates the complete CSS updates as a draft. You review everything before anything goes live.