# Colors

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

In the following video, the button background color is changed in Theme settings > Colors > Buttons.

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

# Grid (Border color)

To set a color for the grid border:

  1. Go to Theme settings > Colors > Grid > Border color.

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

    Grid border color picker

Refer to Configure the grid layout.

# Primary color scheme

To set a color for text elements within the Primary color scheme:

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

  2. Select one of the following text elements to colorize.

    • Text. Select a default color for text.

    • Background. Choose your store’s background color.

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

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

      Primary color scheme color settings menu
  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 Background color scheme element is selected.

    The background color element in the primary color scheme menu section

Refer to Customize color schemes.

# Secondary color scheme

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

# Tertiary color scheme

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

# Buttons

To set a color and style for buttons:

  1. Go to Theme settings > Colors > Buttons.

  2. Use the Color dropdown to set the button colors to one of the following options:

    • Text background. Set the button background color to a color scheme’s Text color.

    • Accent background. Set the button background color to a color scheme’s Accent color.

    • Accent background with text border. Set the button background color to a color scheme’s Accent color, and set the button border color to a color scheme’s Text color.

    • Transparent background with text border. Set the button background color to a color scheme’s Background color, and set the button border color a color scheme’s Text color. Dynamic checkout buttons also use the Text color for the button background color.

      The button color dropdown in Theme Settings color menu section
  3. Use the Style dropdown to set the button shape to Square, Slightly rounded or Rounded.

    The button style dropdown in Theme Settings color menu section