Just about every color in your theme is customizable. Paste your color hex codes to the provided fields or click on a swatch to edit the colors.
Use the theme editor to change colors and adjust overlays for modal windows.
Access the Colors settings
- In the theme editor (Customize), click Theme settings
- Open Colors
Change colors
Select the rounded-rectangle swatch beside each label to change the selected color. You can also set a specific color by adding a hex code to the provided field. This is handy for matching colors across your store. For example, if you want to match your footer background to your buttons, you could copy the hex code from one over to the other.
To optimize for accessibility, test out color combinations for text and background with the Contrast Checker
Adjust overlays for modal windows
At the end of the Colors, adjust the color and Opacity for the Overlay. This overlay is visible when using modal windows, such as the Quick shop.