To customize the theme colors, click on Theme settings in the Theme Editor. Then, open the Color tab from the theme settings sidebar. That setting sidebar may be located on the right side of your screen if you're using a large display.

Our themes are built for color customization to be both simple AND very flexible. You first have to create your main color palette in the theme settings, which will automatically generate color schemes that are leveraged in the sections and blocks. Everything is taken care of so your store maintains good contrast and legibility. To ensure you don’t feel limited by the color schemes, those can also be manually overridden in each section when applicable. Color schemes are explained at the bottom of this page.

Styling pro tip

Start by deciding whether you want the main background to be white (or a light color), and the main text to be dark. This is the most common design on the web. The other option is what we refer to as “dark mode” (when the main background is dark and main text is light). Based on that decision, you can already customize the 2 first color swatches that are labeled as Default colors. Obviously, you will want those two colors to have sufficient contrast for the text on your store to be legible. 

 

 

Next, all you need to do is choose 3 accent colors following the contrast guidelines. Once this is done and you customize the sections, you will often be provided with a setting to choose a color scheme that is based on those five main colors. Note that the Accent 1 color is used for the buttons by default.

 

 

*If it’s important for you to ensure your colors meet the AA WCAG standard for accessibility, the theme will provide accessible color schemes as long as the customized colors have accessible contrast according to the guidelines. Take into account a bigger contrast buffer if you set up your Soft background with a high opacity purcentage.

Gradients

At the bottom of the color settings are optional gradients you can create. Each gradient has a label that matches its solid color above. Those are the colors that will be overridden by the corresponding gradient. To avoid unwanted visual effects and color glitches, the theme determines which elements support gradients and which don’t. For instance, bigger surfaces like the background of the footer support gradients, and smaller elements like icons and buttons don’t. For legibility and a professional aesthetic, it is highly recommended that the gradients and their solid color pairing match the same tone and darkness.

For example, here’s what you do if you want your footer to be a gradient based on colors that are close to your Accent 3: Create an Accent 3 gradient, and then go in the footer section to set the color scheme to Accent 3. Note that every other section using the Accent 3 color scheme might render the gradient as well.

 

 

Other color settings

Some small elements of the themes are exceptionally  using a color that is not customizable with the main color settings. For instance, the custom product badges are customizable in the Product cards tab of the theme

Color schemes explained

Below is an example of how the main color palette translates into the various color schemes: