Skip to main content
Facet colors your store with color schemes. A color scheme is a named set of colors for backgrounds, text, buttons, borders and surfaces. You define schemes once in Theme settings, then pick a scheme on each section, and on many blocks, so a change to one scheme updates every place that uses it.

​
What these settings control

  • The page background and text color of every section.
  • The colors of primary and secondary buttons, including their hover state.
  • Borders and dividers, such as input outlines and lines between rows.
  • Surfaces: the tinted backgrounds of form fields, tables and card frames.
  • The accent color for keyboard focus outlines and small highlights.

​
How to access

1

Open the Theme Customizer

In your Shopify admin, open Online Store, then Themes, and click Customize next to Facet.
2

Open Theme settings

Click the Theme settings icon in the left sidebar.
3

Open Colors

Expand Colors. Click a scheme to edit it, or click Add scheme to create a new one.
The theme editor with Theme settings open and the Colors group expanded in the sidebar.
Theme editor sidebar showing the Colors theme settings: Colors, Schemes.

​
Scheme settings

Each color scheme has the same set of colors.
The theme editor with the color scheme editor open for Scheme 1, listing its color roles.
Theme editor sidebar showing the Color scheme (Scheme 1) settings: Background, Text, Button background, Button label, Button hover background, Button hover label, and more.
Theme editor sidebar showing the Color scheme (Scheme 1) settings (part 2, scrolled): Button background, Button label, Button hover background, Button hover label, Secondary button label, Border, and more.
The background color of any section or block that uses this scheme. Default: #F8F6F2.
Body text, headings and icons. Default: #1A1A1A.
The fill of primary buttons, such as Add to cart. Also used for the outline of primary buttons. Default: #1A1A1A.
The text on primary buttons. Default: #FFFFFF.
The fill of a primary button while the pointer is over it. If you leave it empty, Facet uses the Accent color. Default: #656B54.
The text on a primary button while the pointer is over it. If you leave it empty, Facet uses the Button label color. Default: #FFFFFF.
The text and outline of secondary (outlined) buttons. Also used for links. Default: #1A1A1A.
Dividers, input outlines and the borders around cards and panels. Default: #808080.
The outline that shows around buttons and links when a shopper moves through the page with the keyboard, the background of tertiary buttons, and the active dot on sliders. Default: #656B54.
Tinted areas inside a section: form fields and dropdowns, table headers, and the frames behind product and article pictures. Default: #EAE4D8.
Text shown on a surface, such as the text a shopper types into a form field. Default: #1A1A1A.

​
Apply a scheme

Most sections have a Color scheme setting under Common settings, and many blocks, such as slides and product cards, have their own. Pick the scheme you want for that section or block. The first scheme in the list is the store default: it colors the page itself and anything that has no scheme of its own.
Some settings use a scheme for one part only. For example, the hero banner’s Dots color scheme colors only the slider dots, and the band behind them keeps the section’s scheme. The setting’s help text in the Theme Customizer says which part it colors.

​
Best practices

  • Check contrast. Make sure Text reads clearly on Background, and Button label on Button background. Low contrast makes the store harder to use and to read on phones outdoors.
  • Keep surfaces close to the background. A surface a few shades darker or lighter than the background frames content without competing with it.
  • Edit, don’t duplicate. To change the look of every section that shares a scheme, edit that scheme instead of creating a new one.
  • Give each scheme one role. A short list of schemes, such as one light, one tinted and one dark, is easier to keep consistent than one scheme per section.

Header

Pick the header, search drawer and mega menu card schemes.

Hero banner

Give each slide, the dots and the arrows their own scheme.