Appearance

Return to top
On this page

Colors

This guide describes the Theme settings > Colors menu options to set how colors are displayed throughout your store.

In the following video, to set buttons to use the color scheme's accent color, the settings in Theme settings > Colors > Buttons are changed from Text to Accent. In the video, the accent color is applied to solid buttons and outline buttons. Solid buttons have a solid color background, outline buttons have a solid color outline with a transparent background.

For general guidance with adjusting a theme setting, refer to Settings.

Color schemes

With Label, you can create 3 different sets of colors called 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 color schemes.

The following table describes Label's 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.

Primary color scheme

To set up colors to use with the Primary color scheme:

  1. Go to Theme settings > Colors > Primary color scheme.

  2. Select one of the following elements to colorize.

    • Text. Set the default color for text.

    • Background. Choose a background color.

    • Accent. Set a color for accented elements, like hover over text and hyperlinks.

    • Secondary. Specify a color for secondary elements, like social media share links.

    • Border. Choose a color for borders.

      The primary color scheme menu in Theme settings.

  3. Select a color using the color picker, enter a hex color value or choose a Currently used color.

    For example, in the following image, the primary color scheme's Background element is selected.

    The primary background color scheme element in tin Theme settings.

Secondary color scheme

Provides the Secondary color scheme with the same color options as the Primary color scheme for Text, Background, Accent, Secondary, and Border.

Tertiary color scheme

Provides the Tertiary color scheme with the same color options as the Primary color scheme for Text, Background, Accent, Secondary, and Border.

Buttons

Theme settings provides two styling options for buttons:

  • Solid. Solid style buttons have a color background and color outline (border).

  • Outline. Outline style button have a transparent background and color outline.

The following image shows examples of Solid (left) and Outline (right) style buttons.

An example of a solid style button and an outline style button.

Set a color for buttons

To set a color for buttons:

  1. Go to Theme settings > Colors > Buttons.

  2. Use the Solid button color dropdown to set the color for solid style buttons to Text or Accent.

    • Text. Sets the solid button color to the color scheme's Text color.

    • Accent. Sets the solid button color to the color scheme's Accent color.

      The solid button color dropdown in Theme settings.

  3. Use the Outline button color dropdown to set the color for outline style buttons to Text or Accent.

    • Text. Sets the outline button color to the color scheme's Text color.

    • Accent. Sets the outline button color to the color scheme's Accent color.

      The outline button color dropdown in Theme settings.