If your text colors shifted after you updated Shopify Horizon to version 4, the update replaced color schemes with a color palette. Section backgrounds carry over. Text that used a scheme's own color does not: Horizon 4 recalculates it, and it often lands on pure white or pure black instead of your brand color.
We saw this on our own store when we updated a Horizon 3.4.0 theme to 4.2.0. A dark section kept its background, and its cream text turned white. The repair is to set a Text color on the affected text blocks, and to set it for every text block that sits on an image or video.
Before, on Horizon 3.4.0: the section's color scheme sets a dark background and cream text.
After, on Horizon 4.2.0: the background carried over, and the text is now white.
What the update carried over
Horizon 3.x stored colors as schemes. Each scheme bundled a background, text, heading, link, border, and button colors, and every section and block had a Color scheme picker. Horizon 4.0.0 removed the picker and the schemes. In its place there is one color palette under Theme settings > Colors, a Background color field on sections, and a Text color field on many blocks.
In our 3.4.0 to 4.2.0 update, Shopify's updater converted the old settings this way:
| Old setting | Result in 4.2.0 |
|---|---|
| Section color scheme with a dark background | Kept. The section's Background color was filled in and linked to a palette color with the same value. |
| Colors used by the old schemes | Kept. The new palette contained nine colors, including the backgrounds and accents from our schemes. |
| Button colors | Kept. The colors under Theme settings > Buttons matched the old scheme's buttons. |
| The scheme's text color | Changed. The Text color field on each text block was left at Default, and cream text became pure white. |
After the update, the section's Background color points to a palette color, and the palette holds the colors from the old schemes.
The text block's Text color was left at Default, so the theme chooses the color.
Shopify's color settings documentation confirms that color palettes are available on Horizon 4.0.0 and newer. It does not describe how scheme assignments are converted, so treat the table above as what we observed in one update.
Why the text color changed
Horizon 4 has one global text color, under Theme settings > Typography > Text. A section with a custom background color uses it only when the two have enough contrast. The 4.2.0 source sets that threshold at a contrast ratio of 4.5.
When the global text color fails that check, the section switches to the lightest or the darkest color in your palette, whichever suits the background. The theme picks those two colors by brightness alone.
That explains our result. Our global text color is dark, so it failed against the dark section. The theme then chose the lightest color in the palette. The palette included pure white, and white is brighter than our cream. In 3.4.0 the scheme named the text color directly, so the same section showed cream.
The same rule runs in reverse on light sections. If your global text color is light, a light section falls back to the darkest palette color, which is black whenever black is in the palette.
Text over images needs a manual color
The automatic choice depends on a background color value, and a photo has none. In the 4.2.0 source, the contrast check is skipped in two cases:
- A Section whose Background media is set to an image or video.
- The Hero section, in every configuration.
In both, text uses the global text color unless the block sets its own. A dark global text color over a dark photo is hard to read. We confirmed this in the theme code and did not have a text-over-image section in our own update, so check yours directly. Merchants have described this symptom in the Shopify Community after updating.
Restore your text colors in the updated draft
Shopify adds the updated theme as a draft, so your live theme keeps its colors while you work. Open the old theme in a second tab as the reference.
- Compare key pages side by side. Look for text that changed between an off-white and pure white, or between a soft dark and pure black. The difference is easy to miss on a quick look.
- Review the palette. In the draft, open Theme settings > Colors. Confirm your brand text colors are in the palette, and add any that are missing.
- Check the global text color. Under Theme settings > Typography, confirm Text is the color most of your pages use.
- Set text color where it changed. Select each affected text block and set its Text color to the palette color the old scheme used. An explicit text color overrides the automatic choice.
- Set text color over media. For the Hero section and any section with a background image or video, set the Text color on each text block. If the photo varies in brightness, turn on the section's overlay as well.
- Review store-wide controls. Check the Buttons, Input fields, Badges, Drawers, Popovers and modals, Product cards, and Variant pickers groups in Theme settings.
When a color field offers your palette colors, choose one of them instead of typing a new hex value. A field linked to a palette color updates when you change the palette later. A typed value stays fixed and has to be found and edited again.
What settings cannot restore
Two behaviors from color schemes have no direct replacement in Horizon 4.2.0.
- Different button colors per section. Button colors are store-wide. A dark section and a light section share the same primary button style, so choose a button color that works on both, or plan a small code change for the exception.
- One-click restyling of a section. No preset sets background, text, and controls together. Each section has its background, and each text block that needs a specific color has its own setting.
Custom CSS can also stop working. Horizon 3.5.1 added a class such as color-scheme-1 to sections and blocks. Horizon 4.2.0 does not output those classes, so custom CSS that targets them no longer matches. Search your custom CSS and custom Liquid for color-scheme before you publish. Our guide to finding and restoring customizations lost in a theme update covers where that code usually lives.
Check these pages before you publish
These changes are visual, so a code review will not find them. Preview the draft on desktop and mobile and look at:
- The homepage hero and every slideshow or banner with text over a photo.
- Sections that used a dark or tinted scheme, including the footer and announcement bar.
- A product page: title, price, variant buttons, and the add to cart button.
- The cart drawer, search popover, and mobile menu.
- Forms: newsletter signup, contact form, and their focus and error states.
- Sale and sold-out badges on collection pages.
Publish after these pages match the old theme or look the way you intend. Keep the previous theme unpublished in your theme library until the new one has been live for a few days. If your theme also has code customizations, our Horizon update workflow shows how we carry those forward.
Should you stay on Horizon 3.x?
Staying on 3.x keeps your color schemes, and your storefront will keep working. It also means you stop receiving Horizon's fixes and new features, and the color work is still waiting whenever you do update. Shopify's developer changelog for color palettes says themes built on color schemes continue to work, and that its future development is focused on palettes.
For most stores, the better time to update is a quiet week with a reviewed draft, before a larger gap between versions makes the comparison harder. To estimate the work, count the sections whose scheme used a text color other than your main one, plus every section with text over media. Each of those needs a look.