Skip to content

Colors

This guide describes the Theme settings > Colors menu options.

Use the settings to set how colors are displayed throughout your store. Refer to Shopify help: Colors.

An example store's homepage with the Theme settings's Colors menu open in Theme editor.

In the previous image, the Theme setting controls to adjust your color scheme's background color are displayed in Theme editor.

For general guidance with adjusting a theme setting, refer to Settings overview and Shopify help: Theme settings.

Color schemes

With Label, you can create sets of colors called Color schemes. Refer to Shopify help: Color schemes.

Color schemes provide a quick and easy way to use colors consistently across your store. Instead of colorizing store elements individually, whenever you apply colors to blocks, sections and page templates, simply reuse the colors from your store's color schemes.

The following table describes Label's default color schemes.

Color scheme nameDescription
PrimaryThis is your store's default color scheme.
SecondaryA second color scheme option for your store.
TertiaryAn optional third color scheme for your store.

Configure colors

To configure your store's colors:

  1. Go to Theme settings > Colors.

    The Theme setting's Colors menu.

  2. Select a setting described in the following table.

Setting nameDescription
Primary color scheme > TextTo set up the color scheme's color for text, select Text, and then use the color picker, enter a hex color value, or choose a Currently used color. The color applies to text inside the relevant sections, blocks and buttons.
Primary color scheme > BackgroundTo set up the color scheme's color for backgrounds, select Background, and then use the color picker, enter a hex color value, or choose a Currently used color. The background color applies to relevant sections, blocks and buttons.
Primary color scheme > AccentTo set up the color scheme's color for accented elements, like hover over text and hyperlinks, select Accent, and then use the color picker, enter a hex color value, or choose a Currently used color.
Primary color scheme > SecondaryTo set up the color scheme's color for secondary elements, like social media share links, select Secondary, and then use the color picker, enter a hex color value, or choose a Currently used color.
Primary color scheme > BorderTo set up the color scheme's color for borders, select Border, and then use the color picker, enter a hex color value, or choose a Currently used color. The color applies to the borders of elements inside the relevant sections, blocks and buttons.
Secondary color scheme optionsProvides the Secondary color scheme with the same color options as the Primary color scheme for Text, Background, Accent, Secondary, and Border.
Tertiary color scheme optionsProvides the Tertiary color scheme with the same color options as the Primary color scheme for Text, Background, Accent, Secondary, and Border.
Buttons > Solid button colorUse the Solid button color options to set the solid button color to use the color scheme's Text or Accent color. Solid buttons have a color background and color outline (border).
Buttons > Outline button colorUse the Outline button color options to set the outline button color to use the color scheme's Text or Accent color. Outline style button have a transparent background and color outline.

Note

All the previous color scheme colors can be set to display a color from a dynamic source.

To display a color from a dynamic source, select the Connect dynamic source icon beside the appropriate color selector, and then choose a dynamic source to add. You must define sources of dynamic content. Refer to Shopify help: Metafields.