Colors
Under your Colors settings, you have the option to select each color for the different elements of your storefront.
Within your Shopify admin, go to Sales Channels > Online Store > Themes.
Click your theme, and select Customize.
On the left-hand menu, select Theme settings.
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.
Under General, you have the option to select colors for the overall text, links, and background.
By using the Text color selector, you can choose a color for the general text across your entire storefront.
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.
By using the Background color selector, you can choose a color for the background space across your whole theme.
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:
Use the Background color selector to choose a color for your header.
Use the Text color selector to choose a color for the text within your header.
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.
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.
Use the Background color selector to choose a color for your sticky header.
Use the Text color selector to choose a color for the text within your sticky header.
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.
Under Footer, you can choose colors for your Background and Text for your storefront's footer.
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.
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:
.gif?alt=media&token=f756ec67-1ab5-41e8-831b-500813737a00)
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
.gif?alt=media&token=af52c88e-83fe-42c7-861c-3814d533571e)
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.
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.
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.
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.
Under Image Overlay, you can choose colors for your Text, Fade, and Overlay opacity for every linked button on your storefront.
Use the Text color selector to choose a color for the text on your image overlay.
Use the Fade color selector to choose a color for the overlay.
Use the Overlay opacity slider to choose how opaque your overlay is.
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.
To enable this function, select Show sale badge.
