Colors

Overview

Under your Colors settings, you have the option to select each color for the different elements of your storefront.

Steps

  1. Within your Shopify admin, go to Sales Channels > Online Store > Themes.

  2. Click your theme, and select Customize.

  3. On the left-hand menu, select Theme settings.

  4. Scroll down to select Colors.

Note: You can select a transparent background and transparent text by clicking the box in the bottom left of any color pallet window.

Selecting a transparent background.

General

Under General, you have the option to select colors for the overall text, links, and background.

Text

By using the Text color selector, you can choose a color for the general text across your entire storefront.

Changing the general text color.

Link & Active Link

By using the Link color selector, you can choose a color for every link across your entire storefront.

To choose a different color for when your customers hover their cursor over your links, use the Active link color selector.

Choosing colors for your links and active links.

Background

By using the Background color selector, you can choose a color for the background space across your whole theme.

Changing the background color across your whole theme.

Header

Under Header, you can choose colors for your background, text, and overlay text.

To learn how to edit other aspects of your header, please read our guide below:

Background

Use the Background color selector to choose a color for your header.

Changing your header background color.

Text

Use the Text color selector to choose a color for the text within your header.

Changing your header text color.

Overlay Text

Use the Overlay text color selector to choose a color for the text when the Overlay header on homepage option has been enabled within your Header section.

Changing your text color for when the header overlay has been enabled.

Sticky Header

Under Sticky header, you can choose colors for your background and text for when the Enable 'sticky' header option has been enabled within your Header section.

Background

Use the Background color selector to choose a color for your sticky header.

Choosing a background color for when the sticky header has been enabled.

Text

Use the Text color selector to choose a color for the text within your sticky header.

Choosing a text color for when the sticky header has been enabled.

Mobile Navigation

Under Mobile navigation, you can choose colors for your Background and Text for the navigation menu that appears on mobile devices by using the color selectors.

Selecting both the background and text colors for the navigation menu on mobile view.

Footer

Under Footer, you can choose colors for your Background and Text for your storefront's footer.

Selecting colors for the background and text of the footer.

Buttons

Under Buttons, you can choose colors for your Background and Text for every linked button on your storefront.

By using the Background hover color selector, you can choose a color to signify that the customer's cursor is hovering over the button.

Selecting the colors for the background, background hover, and text on the buttons.

Popup

Under Popup, you can use the selectors to choose colors for your Background and Text for your storefront's popup boxes.

To learn to edit other aspects of your storefront's popups, read our guide below:

Changing the background and text colors for your storefront's popups.

Color Scheme

The majority of your theme's sections have a Color scheme drop-down menu - this allows you to apply the following options to your entire section:

  • White

  • Light

  • Feature

  • Dark

Changing the color scheme on the section.

While White is your theme's default, you have the option to configure the other color scheme options to suit your store's needs - this includes both text and background.

Light

By using the color selectors for Light background and Light text, you have the option to choose the color scheme for when you select Light from the section's Color scheme.

Configuing the light color scheme.

Feature

By using the color selectors for Feature background and Feature text, you have the option to choose the color scheme for when you select Feature from the section's Color scheme.

Configuring the feature color scheme.

Dark

By using the color selectors for Dark background and Dark text, you have the option to choose the color scheme for when you select Dark from the section's Color scheme.

Configuing the dark color scheme.

Image Overlay

Under Image Overlay, you can choose colors for your Text, Fade, and Overlay opacity for every linked button on your storefront.

Text

Use the Text color selector to choose a color for the text on your image overlay.

Choose the color of the text in image overlay.

Fade & Overlay Opacity

Use the Fade color selector to choose a color for the overlay.

Choosing a your overlay fade color, and how opaque it.

Use the Overlay opacity slider to choose how opaque your overlay is.

Choosing how opaque your image overlay is.

Sale Badge

When your item is on sale, you can signify this with a sale badge displaying on your product.

Use the Background and Text color selectors to choose colors for this badge.

Choosing colors of your products' sale badge.

To enable this function, select Show sale badge.

Show sale badge checkbox.