Colors

Colors controls your store’s visual palette — backgrounds, text, buttons, banners, cards, icons, inputs, and swatches. Changes here apply globally (unless a section overrides them), keeping your brand consistent and recognizable across the site.

⚠️ Important: Choose colors for clarity and accessibility. Good contrast and a focused palette improve readability, reinforce your brand, and boost engagement.

Color schemes

A color scheme is a curated set of color values that you can apply across sections of your store to maintain visual harmony. Think of it as a palette template you reuse instead of picking colors manually every time.

Edit or add schemes

1. In your Theme settings, click an existing scheme to modify its colors.

2. Click Add scheme (+) to create a new custom palette.

3. Once created, you can assign a color scheme to a section via that section’s settings.

Scheme color options

Each color scheme includes these categories:

Background colors

Background colors set the visual foundation of your storefront. Use them to create contrast, separate content areas, and reinforce brand identity.

1. Body background

   1. Sets the main page background color across the entire storefront.

2. Body background gradient

   1. Applies a gradient to the body background for added depth and visual interest.

3. Alternate background

   1. Defines a secondary background color for sections that need contrast from the main body.

4. Alternate background gradient

   1. Adds a gradient to the alternate background to create richer layering.

💡 Tip: Ensure sufficient contrast between backgrounds and text for accessibility. Use gradients sparingly to enhance depth without distracting from content.

Text colors

Text colors ensure consistent readability and clear hierarchy across your storefront.

1. Heading text

   1. Sets the color for all primary headings (H1–H3) to reinforce structure and emphasis.

2. Subheading text

   1. Colors secondary headings (H4–H6) and section subtitles for a clear visual hierarchy.

3. Body text

   1. Defines the default color for paragraphs, descriptions, and general copy.

4. Body links

   1. Sets the color of inline links for clear navigation cues within text.

5. Body link hover

   1. Adjusts link color on hover to provide interactive feedback and improve usability.

💡 Tip: Aim for a minimum contrast ratio of 4.5:1 for body text to maintain accessibility and legibility on all devices.

Navigation colors

Navigation color settings ensure your header and menu elements remain clear, legible, and aligned with your store’s overall aesthetic. These options help maintain visibility across different backgrounds and improve user experience throughout the browsing journey.

1. Navigation background

   1. Defines the background color behind your store’s header and navigation bar. Choose a shade that provides sufficient contrast for links and icons.

2. Navigation links

   1. Sets the default color for all navigation links, including top-level menu items and dropdown entries, ensuring clear readability.

3. Navigation links hover

   1. Adjusts link color when hovered to indicate interaction and provide visual feedback to the user.

💡 Tip: Ensure your navigation background and link colors maintain sufficient contrast for accessibility and consistent visibility across both light and dark color schemes.

Primary button colors

Primary buttons drive your most important actions. Set clear default and hover styles so they stand out and feel interactive.

1. Button background

   1. Sets the fill color for primary CTAs.

2. Button border

   1. Adds or colors the border to increase emphasis or contrast.

3. Button text color

   1. Defines the label color for legibility.

4. Hover states

   1. Background (hover): Changes fill on hover for instant feedback.

   2. Border (hover): Adjusts border color to reinforce interactivity.

   3. Text (hover): Updates label color for clarity on hover.

💡 Tip: Use strong contrast between background and text for accessibility and quick recognition. Keep primary buttons consistent across the site.

Secondary button colors

Secondary buttons represent lower-priority actions. Style them to be noticeable without competing with primary CTAs.

1. Secondary button background

   1. Sets the fill color for secondary actions.

2. Secondary button border

   1. Defines the border to create separation from the background.

3. Secondary button text color

   1. Controls label color so it’s readable yet less prominent than primary.

4. Hover states

   1. Background (hover): Subtle fill change on hover.

   2. Border (hover): Border color shift for feedback.

   3. Text (hover): Label color change to confirm interactivity.

📝 Note: Keep secondary styles visually lighter than primary (e.g., outline or muted fills). This preserves a clear action hierarchy while maintaining consistency with your brand palette.

Plain button colors

Plain button color settings define the appearance of minimal or text-only buttons used throughout your store. These controls ensure consistent visibility, proper emphasis, and smooth interaction feedback without relying on solid backgrounds.

1. Color

   1. Sets the default text color for plain buttons, ensuring they remain noticeable while blending seamlessly with your layout.

2. On hover

   1. Defines the text color when the button is hovered, providing clear interactive feedback for users.

💡 Tip: Use subtle hover color changes to maintain a refined look while signaling interactivity — ideal for secondary or low-emphasis actions.

Banner colors

Banner color settings control the appearance of promotional or announcement areas across your store. They help you create visually engaging, high-contrast banners that draw attention while remaining easy to read.

1. Banner background

   1. Sets the main background color of banners.

2. Banner background gradient

   1. Applies a gradient overlay for added depth and emphasis.

3. Banner border

   1. Defines a border color to frame and highlight the banner.

4. Banner heading

   1. Sets the color for main banner titles to ensure clear hierarchy.

5. Banner icon

   1. Specifies the icon color used within the banner.

6. Banner subheading

   1. Colors supporting text beneath the main banner heading.

7. Banner text

   1. Defines the main body text color within the banner.
      Used when no other text color is set.

8. Banner overlay

   1. Adds a color tint overlay for better contrast with text or images.

9. Banner overlay gradient

   1. Applies a gradient to the overlay for more dynamic visual depth.

💡 Tip: Use high-contrast combinations between background, text, and overlays to ensure all banner content remains readable on every device.

Card colors

Card color settings control the look of boxed content such as product, collection, and feature cards. Use them to keep layouts organized, scannable, and consistent.

1. Card background

   1. Sets the default surface color of cards.

2. Card background gradient

   1. Adds a gradient overlay for depth and visual interest.

3. Card border

   1. Colors the border to define edges or separate cards from the page.

4. Card heading

   1. Sets the color of titles and headings inside cards.

5. Card text

   1. Defines the main body text color used within card content.

💡 Tip: Maintain strong contrast between the background and text for readability, and use borders sparingly—subtle dividers often look more refined.Icon colors

Icon colors allow for consistent branding and clear visual signals for interaction or state changes, such as hover or inactive icons.

1. Icon color

   1. Sets the primary icon color throughout the site.

2. Icon hover color

   1. Alters icon color for active, interactive feedback.

3. Inactive icon color

   1. Defines a muted or deactivated shade for less prominent icons.

Icon colors

Icon color settings ensure consistent branding and provide clear visual feedback for interaction and state changes such as hover or inactive states.

1. Icon color

   1. Defines the primary color for icons used across your storefront.

2. Icon hover color

   1. Adjusts icon color on hover to signal interactivity.

3. Inactive icon color

   1. Sets a subdued color for inactive or disabled icons, maintaining a clear visual hierarchy.

💡 Tip: Use a consistent color system to differentiate active, hover, and inactive states — it enhances usability and keeps the interface intuitive.

Input field colors

Input field colors style all form elements, including search bars, contact forms, and newsletter fields. These settings help align functional components with your brand’s overall look and feel.

1. Input placeholder text

   1. Defines the color of placeholder hints shown in empty input fields.

2. Input text

   1. Sets the color of user-entered text for clear readability.

3. Input background

   1. Controls the fill color behind input text, ensuring good contrast.

4. Input border

   1. Determines border color for all input fields, improving visibility and focus.

📝 Note: Keep contrast between input text and background high for accessibility, and avoid overly faint placeholder colors.

Miscellaneous colors

Miscellaneous colors cover various global design details that complete your storefront’s visual identity — including borders, overlays, and sale highlights. Additional settings may be introduced in future updates.

1. Borders

   1. Defines the standard color for borders and separators across all sections.

2. Page overlay color

   1. Sets the overlay tint used when modals, menus, or drawers are active.
      Helps users maintain focus while still perceiving background context.

3. Sale price

   1. Assigns a distinctive highlight color to sale prices to draw attention to discounted products.

💡 Tip: Subtle use of overlays and consistent sale highlights make your store feel polished and guide user attention naturally.

Swatch customization

Swatch customization lets you map custom product variant swatches to your branding for higher accuracy and visual trust.

1. Input swatch color mappings as

   1. Color name: #HEXCODE (enter one per line, such as: Sunset Orange: #FF8800)

   2. Use precise swatch colors for each product to reduce customer confusion and visually align with inventory.

Usage notes

1. Always maintain strong contrast between backgrounds and text or icons for optimal accessibility.

   1. Preview changes to ensure color combinations remain legible and stylish across devices.

2. Use gradients and overlays to highlight content, but avoid over-complication that can slow page performance.

3. Test overlay opacities and ensure banners or modals keep important content readable.

4. Leverage swatch customization to show your product colors accurately, inspiring greater confidence.

5. Pair clear CTA buttons and informational banners for maximum engagement and streamlined experiences.

⚠️ Important: Consistent and accessible Colors help every visitor enjoy your shop. Proper color use reinforces branding, supports navigation, and builds customer trust.

Resources

1. https://help.shopify.com/en/manual/online-store/themes/customizing-themes/theme-editor/theme-settings#colors