Colors
Settings to adjust the general, heading and footer colors using in the theme
Last updated
Settings to adjust the general, heading and footer colors using in the theme
Last updated
Configure your brand colors in the color settings. These color elements are used in all the general sections, header, and footer.
Tip: These are your primary brand colors used throughout the theme. Some sections or blocks have their own color settings for even greater control.
Here are some common color elements to demonstrate how the color settings work:
The light background setting is used for background accents like the coupon message in the cart drawer. It's also used in the free shipping indicator with the bright accent color setting.
The bright accent is a highlight color for elements like the free shipping progress bar shown above in red and also the cart bubble indicator in the header:
The sale color is used for the prices on product grid listings like collections:
The sale badge uses a different setting, which can be found under the Product grid settings.
The background color adjusts the text inside the cart bubble indicator:
The social, search, account, cart icons area is adjusted with this setting:
Note: When using a transparent header, these colors are used when the dropdown is activated. The transparent header has a separate setting while inactive. That setting is in the next group.
The links setting adjusts the main header navigation links:
For dropdown menus, including the MegaNav, the background color can be adjusted:
Inside the dropdowns, you can adjust the color of the links:
When using a transparent header, the main colors in the header area include the social, search, account, and cart icons. Also, main navigation links:
Adjust the main footer background color:
Border elements are used within the footer for the forms and buttons:
The grey horizontal and vertical lines are "Divider" blocks. These have their own color settings within the block.
The default text for content in the footer:
All the links, including social icons and navigation links:
Try to use colors that are high in contrast. It will make your text easier to read. Here is a great contrast checker:
Example of a good score, 21:1 - White foreground on Black background:
Poor score, 2.44:1 - Blue foreground on Black background:
