Colors

Colors sets the color schemes for the storefront. Each scheme sets the background, text, heading, border, and button colors. Sections pick a scheme with their own Color scheme setting.

How to find it

In the Theme Editor, open Theme settings, then select Colors.

Settings

View the settings guide .

Setting	Options	Description
Background		Main background color of the scheme.
Background 2		Secondary background color, used for panels and boxes.
Secondary text color		Secondary text color of the scheme.
Background gradient		Gradient that replaces the background color where the theme supports it.
Text		Body text color.
Heading		Heading text color.
Border		Border and line color.
Fill button background		Background color of solid buttons.
Fill button text		Text color of solid buttons.
Fill button background hover		Background color of solid buttons on hover.
Fill button text hover		Text color of solid buttons on hover.
Outline button text		Text color of outline buttons.
Outline button border		Border color of outline buttons.

Background and Background 2 set the two background colors. Background gradient replaces the background color where the theme supports it.

Secondary text color, Text, Heading, and Border set the text and line colors. Fill button sets the colors of solid buttons, including their hover state. Outline button sets the text and border colors of outlined buttons.

Notes

Use clear contrast between text and background.

Background 2 fills secondary panels, such as the cart's gift wrap and discount boxes, the FAQ form panel, the newsletter and discount popups, and the localization picker.