Success
Color settings
Set custom text, heading, border, and icon colors for a specific theme area.
Use these settings to give a specific theme area its own foreground color treatment in the Shopify documentation on theme editor. They override broader theme colors, which is useful when a featured, promotional, or content-heavy area needs better contrast or a more tailored look.
For a general reference on how these overrides work, see Color settings reference.
Color overrides
Section titled “Color overrides”This group controls the colors used for borders, icons, headings, subheadings, and body text. Instead of changing the store-wide palette, you can fine-tune how content is presented in one area so it feels clearer, more balanced, or more distinct.
Use overrides when the surrounding background changes, when a campaign needs a branded accent, or when default colors are not giving you enough separation between content levels. If an area already reads well with your main palette, it is usually better to leave these settings alone.
These settings override broader theme color choices for the area where they are applied. Use them intentionally so custom areas feel deliberate rather than visually disconnected.
Building a clear text hierarchy
Section titled “Building a clear text hierarchy”Heading, subheading, and text colors should work together to guide the eye. Keep the strongest contrast for the most important text, use a dependable color for body copy, and choose a softer supporting tone for subheadings only if it stays easy to read.
If all text colors are too similar, the content can feel flat. If they are too different, the design can feel scattered. Aim for a simple hierarchy that stays consistent across similar content areas.
Using borders and icons well
Section titled “Using borders and icons well”Borders and icons usually work best as supporting elements. Borders can separate content, frame cards, or add structure, while icon colors help reinforce small cues without competing with the main message.
If icons appear inside outlined shapes, make sure the icon color and icon border color still feel coordinated. A subtle border can look polished, but if it is too faint it may disappear against the background.
Choosing readable combinations
Section titled “Choosing readable combinations”Check your color choices together, not one setting at a time. A heading color that looks strong on its own may not pair well with softer subheading text or light border lines once the full area is assembled.
Pay special attention to contrast on smaller text, decorative icons, and thin borders. These elements are often the first to become hard to see when colors are too light or too low-contrast.
Usage notes
Section titled “Usage notes”- Override with purpose. Use custom colors when an area truly needs a different foreground treatment, not just extra variation.
- Protect readability. Check headings, subheadings, text, icons, and borders against the actual background used in that area.
- Review both viewports. Desktop and mobile controls can behave differently, so confirm layout, alignment, visibility, and media behavior on both screen sizes.
- Keep fallback styling in mind. Blank, transparent, or default-style values usually preserve the broader look, while explicit colors, gradients, or media overrides make the local area more independent.
- Treat accents as secondary. Use border and icon colors to support structure and emphasis without drawing attention away from the content.
- Check media choices carefully. When desktop and mobile media are configured separately, review cropping, loading, fallback, and readability in both versions.