Colors
Theme settings
You can change the Colors of elements across your store, including general colors, header colors, footer colors, and product colors.
Theme colors apply to all sections and pages by default. You can apply specific colors to most sections and blocks in the theme editor. Colors selected for sections and blocks will override theme colors.
Customize colors
In the theme editor, click the Theme settings icon, then click to open the Colors tab.
Tip We recommend using WebAIM's contrast checker when matching colors to make sure your text is clear and readable for everyone.
General
Image overlay
Header
Menu
These color settings apply when the Header section has a Desktop layout set to one of the Menu below the logo options.
Primary button
Secondary button
Floating action buttons
Forms
These colors apply to newsletter sign-ups, contact forms, and
Products
Product inventory status
Free shipping bar
Popups and drawers
Footer
Color schemes
Color schemes allow you to rapidly design sections with default and automated color sets that are consistent with your branding.
A color scheme consists of a set of colors that are applied to your sections. You can choose to use a color scheme based on your theme colors or a custom color scheme.
Alternatively, you can use custom color overrides if you do not want to use color schemes for your section.
Based on theme colors
You can choose to use your Default theme colors or one of four variant color schemes that automatically apply alternate colors based on your default theme colors.
There are four variant color schemes: Inverse, Soft, Accent, or Sale.
Custom color schemes
You can choose to use a custom color scheme. Go to your theme settings to select colors for Color scheme 1 and Color scheme 2.
In the section settings, you can select one of these color schemes to use.
Custom color overrides
In section or block settings, choose to use custom colors instead of the default or color scheme settings.
Related links
Last updated