Tips for customizing your theme colors

The theme is built for for color customization to be simple and to providing great control and flexibility. 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 stores maintains good contrast and legibility. To ensure you don’t feel limited by the color schemes, they can also be manually overridden in each section when applicable.

To customize your theme colors, we recommend two approaches. You can find a color palette that you like and try to replicate the result using the settings, or browse our color palette inspiration page and copy the color codes to your own settings. If you create your own palette, here’s an easy way to get this done:

1. 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 suffucuent contrast for the text on your store to be legible.
   
2. asdomadsomasdoadms

Understanding the 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 overriden by the corresponding gradient. To avoid unwanted visual effets 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 profesional aesthetic, it is highly recommended that the gradients and their solid color pairing match the same tone and darkness.