Key takeaways
- Global text color is set in Theme Editor > Theme settings > Colors.
- Most themes have a “Text” color swatch that controls the base font color site-wide.
- Per-section color overrides are available in some themes via section settings.
- Custom colors for specific elements require CSS in your theme’s assets folder.
- Fudge can apply targeted color changes from a plain English description.
Changing font color in Shopify is mostly done through the Theme Editor’s color settings. For anything beyond the global palette, you’ll need CSS. Here’s how to do both.
Why you can trust us
We’ve built and customised hundreds of Shopify storefronts. We also built Fudge - an AI storefront editor with a 5.0 rating on the Shopify App Store.
Method 1 - Change global text color in the Theme Editor
This changes the base text color across your entire store.
Step 1. Go to Online Store > Themes > Customize.
Step 2. In the left sidebar, scroll to the bottom and click Theme settings.
Step 3. Open the Colors section.
Step 4. Find the Text color swatch (sometimes labeled “Body text” or “Foreground”). Click it to open the color picker.
Step 5. Enter a hex code, use the color picker, or adjust the sliders to set your desired color.
Step 6. Click Save.
This updates the default text color everywhere your theme uses the --color-foreground or similar CSS variable.
Method 2 - Change section-specific text color
Many modern Shopify themes let you set a color scheme per section - light background with dark text, dark background with light text, and so on.
Step 1. Open the Theme Editor and navigate to the section you want to adjust.
Step 2. Click the section in the left sidebar to open its settings.
Step 3. Look for a Color scheme dropdown. Select a scheme with the text color contrast you need.
Step 4. Save.
Not all themes have per-section color schemes. If you don’t see this option, your theme applies one global text color.
Method 3 - Change font color with CSS
For precise control - a specific heading color, a colored call-out block, text color on a single element - you need CSS.
Step 1. Duplicate your theme first. Go to Online Store > Themes > Actions > Duplicate.
Step 2. On your active theme, go to Actions > Edit code.
Step 3. Open Assets > base.css (or your theme’s main stylesheet).
Step 4. Add a CSS rule at the bottom of the file. For example:
/* Change all paragraph text to a dark grey */
p { color: #333333; }
/* Change H2 headings to a brand color */
h2 { color: #1a4b8c; }
/* Change text inside a specific section */
.section-announcement-bar { color: #ffffff; }Step 5. Click Save.
How to find the right CSS selector
Right-click the element in your browser, choose Inspect, and look at the element’s class names in the HTML panel. Use those classes as your CSS selectors.
Changing font color in the Shopify Pages editor
If you’re editing a standalone page (Online Store > Pages), the rich text editor includes a text color tool in the toolbar. Select the text you want to color, click the color icon, and choose your color.
This applies inline styling to that specific text. It won’t affect any other text on your site.
Using Fudge for font color changes
If the Theme Editor’s color settings don’t go far enough, Fudge can make targeted color changes without you writing CSS. Describe what you want:
“Change the heading color on the product pages to our brand blue, #1a4b8c.”
“Make the announcement bar text white.”
Fudge writes the CSS, applies it to your theme as a draft, and you review before publishing.
Quick reference
| Goal | Method |
|---|---|
| Change all body text color | Theme settings > Colors > Text |
| Change color per section | Section settings > Color scheme |
| Change a specific element’s color | CSS in assets/base.css |
| Color specific text in a page | Pages editor > text color tool |
How do I change the font (typeface) in Shopify?
Changing the font family — the typeface itself, not its color — is done in Theme settings → Typography, not Colors. You’ll find separate pickers for heading font and body font. For a full walkthrough, see how to update fonts in Shopify.
How do I add a new color to my Shopify theme?
Go to Theme settings → Colors (or Color schemes in modern themes like Dawn). Click any color swatch to open the picker and enter your hex code. For colors that aren’t exposed in the Theme Editor — such as icon colors or hover states — you’ll need to add them via CSS. See our guide on updating brand colors in Shopify for the full process.
