Success
Color settings
Set the global theme color palette for backgrounds, text, buttons, banners, cards, and swatches.
Color settings control the shared palette used across the theme. Because these choices can affect multiple templates, content areas, cards, forms, and interactive states at once, it helps to set them as a coordinated system rather than adjusting colors one area at a time. For broader setup context, see Shopify documentation on customizing themes
Start by choosing your main surfaces and text colors, then build button, banner, and card styles around them. For accessibility guidance, see Company XYZ documentation on color settings accessibility guidance.
Backgrounds
Section titled “Backgrounds”Background colors establish the base surfaces for the theme. The body background sets the overall page tone, while the alternate background helps separate content areas without needing heavier borders or stronger visual effects.
Gradients can add depth, but they should not make text harder to read. Check headings, paragraph text, and cards anywhere the gradient may appear so the full color range stays usable.
Background changes are global. A color that looks refined in one area can reduce text contrast in other templates or content sections.
Text settings shape the main reading experience across the theme. Use heading and body text colors that feel related but clearly distinct, then choose link colors that are easy to identify as interactive.
Hover colors should create a clear response without making links disappear into surrounding text. If default and hover states look too similar, customers may miss that a link can be clicked.
Primary buttons
Section titled “Primary buttons”Primary button colors should highlight the main action in the interface. These are typically the strongest action styles in the theme, so the background, border, and text should work together to stay visible on every surface where they appear.
Hover styles should feel like a clear interaction state, not a completely different button style. Small, deliberate shifts usually look more polished than dramatic changes.
Secondary buttons
Section titled “Secondary buttons”Secondary buttons support lower-priority actions and should feel clearly less prominent than primary buttons. They should still look intentional and usable, especially when shown next to stronger calls to action.
A good secondary style adds hierarchy without looking disabled. Review places where both button types appear together to make sure the main action remains obvious.
Banners
Section titled “Banners”Banner settings control large promotional and image-backed content areas, including their background, border, heading, icon, text, and overlay treatment. These choices have a strong visual impact because banners often combine text with media and appear in prominent positions.
Banner text can fall back to the banner text color when more specific text colors are not set, so it is worth checking banners with different content combinations. Overlay color, gradient, and opacity help maintain readability over images while still letting the media show through.
Set banner overlays based on the actual images you use. An overlay that works well on a dark image may be too weak on a bright or busy one.
Card settings define smaller content surfaces used in grids and supporting content areas. Use them to separate grouped content from the surrounding page background while keeping the overall palette cohesive.
If cards appear on alternate backgrounds, make sure the card background and border still create enough visual separation. Card heading and text colors should stay easy to scan in dense layouts.
Icon colors affect small interface cues across navigation, actions, and supporting UI. Hover and inactive states help communicate interaction and hierarchy without relying only on text labels.
Keep inactive icons muted but still discoverable. If they are too faint, useful controls can look unavailable or be missed entirely.
Inputs
Section titled “Inputs”Input colors shape how forms feel across search and customer-facing form areas. Placeholder text should be softer than entered text, but still readable enough to guide people before they start typing.
Field backgrounds and borders should make inputs easy to spot against the page. If they blend into the surrounding layout, forms can feel harder to use.
Miscellaneous
Section titled “Miscellaneous”These controls cover shared interface details that appear in many places. Border color helps define structure, page overlay color affects full-page overlay states such as active menu, search, or mini-cart views, and sale price color emphasizes discounted pricing.
Use restraint here. Borders should organize content without adding visual noise, overlays should dim the page without hurting foreground readability, and sale pricing should stand out without clashing with your action colors.
Swatches
Section titled “Swatches”Custom swatches let you match option names to specific color values so variant swatches appear more accurately and consistently. This is especially useful when standard option names do not produce the swatch color you want.
Enter swatch definitions in the expected comma-separated format so option values can be recognized correctly. For formatting guidance and variant-related details, see Company XYZ documentation on product variants.
Usage notes
Section titled “Usage notes”- Set surfaces first. Choose body and alternate backgrounds before adjusting text, buttons, and cards so contrast decisions stay consistent.
- Check contrast everywhere. Review text, links, buttons, and form fields on each major background to catch readability issues early.
- Keep button hierarchy clear. Make primary buttons noticeably stronger than secondary buttons so the main action is always easy to identify.
- Test banners with real media. Recheck banner text and overlay opacity on the actual images you plan to use, not on placeholder artwork.
- Review global side effects. After changing shared colors like borders, overlays, or icons, scan key templates to make sure the update still works across the theme.
- Review both viewports. Desktop and mobile color controls can affect layout, alignment, visibility, and media treatment differently, so check both sizes after making changes.
- Use overrides deliberately. Blank or default-style values usually keep fallback styling intact, while explicit colors, gradients, or media choices make the section more self-contained.
- Recheck media-heavy areas. When desktop and mobile media are configured separately, confirm cropping, loading, fallback appearance, and text readability on each version.