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.
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 colors
Setting | Description |
---|---|
Background | The background on all pages including the home page. Appears in sections that have no background color set. |
Links | All links added to rich text blocks. |
Text | All headings, subheadings, and body text. The Header and Logo text are set separately. |
Lines and borders | All lines and borders that appear between or within sections. |
Header colors
Setting | Description |
---|---|
Text | The color of all menu links, icons, borders, and additional text in the Header. |
Background | The background of the Header bar. |
Footer colors
Setting | Description |
---|---|
Text | All menu links and text in the Footer. |
Background | The background of the Footer. |
Button colors
Setting | Description |
---|---|
Buttons | All button backgrounds for Solid button styles. Button style options are included in button block settings per section. |
Button text | All button text for Solid button styles. Button style options are included in button block settings per section. |
Product colors
Sale price | Sale prices listed beneath products with "compare at price." |
Rating star | Rating stars in the Product reviews app block. |
In stock | The "In stock" label for the Stock level indicator. |
Low in stock | The "Low stock" label for the Stock level indicator. |
Out of stock | The "Out of stock" label for the Stock level indicator. |
Related links
Last updated