# Colors

This guide describes the Theme settings > Colors menu options to set how colors are displayed throughout your store. Refer to Shopify help: Colors (opens new window).

In the following video, in Theme settings > Colors > Primary buttons, the checkbox option Background color is changed from Text to Accent. This change sets the button background color to use the color scheme’s accent color. In the video, the accent color is applied to the Subscribe button’s background.

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

# Color schemes

With Shapes, you can create 4 different sets of colors called color schemes. Refer to Shopify help: Color schemes (opens new window).

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 Shapes’ color schemes.

Color scheme name Description
Primary This is your store’s default color scheme.
Secondary A second color scheme option for your store.
Tertiary An optional third color scheme for your store.
Quaternary A fourth 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.

    Element name Description
    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.
    Card Choose a color for cards. Refer to Cards.
    Gradient Configure a gradient for the color scheme. Refer to Set up a color scheme gradient.
    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 in the color picker.

    The background color options for the Primary color scheme in Theme settings.

    Note

    To adjust a gradient, Shapes’ Theme settings provides additional settings. Refer to Set up a color scheme gradient.

# Set up a color scheme gradient

Shapes’ color schemes can use gradients to blend two or more colors together, like red and yellow. In Shapes, color stops set the amount of each color for the gradient to blend; like 20% red and 80% yellow. Refer to Shopify help: Gradients (opens new window).

To set up a color scheme gradient:

  1. In Theme settings > Colors, locate the color scheme you want to colorize, and then select Gradient.

    For example, in the following image, Gradient is selected for the Primary color scheme.

    The gradient color options for the Primary color scheme in Theme settings.
  2. Select a gradient color setting described in the following table.

Gradient color setting name Description
Direction (wheel) Rotate the gradient Direction wheel to adjust the angle of the gradient between 0 and 360 degrees. This setting applies only to linear style gradients.
Linear style Select the Linear style checkbox to set the gradient style to Linear.
Radial style Select the Radial style checkbox to set the gradient style to Radial.
Direction (textbox) In the Direction textbox, enter a value or use the Up/ Down arrows to adjust the angle of the gradient between 0 and 360 degrees.
Position (slider) Adjust the Position slider to specify how much of the currently selected color stop is used by the gradient.
Color stop Select the +/ - icons to add/ remove gradient color stops. The minimum number of color stops is 2 and the maximum is 4.
Position (textbox) In the Position textbox, enter a value between 0 and 100 percent to specify how much of the currently selected color stop is used by the gradient.
Color (textbox) In the Color textbox, enter a hex color value to set a color for the currently selected color stop.
Opacity In the Opacity textbox, enter a value between 0 (transparent) and 100 percent to adjust the visibility of the currently selected color stop.
Color (picker) Use the Color picker to set a color for the currently selected color stop or choose a Currently used color.

# Secondary color scheme

Provides the Secondary color scheme with the same color options as the Primary color scheme.

# Tertiary color scheme

Provides the Tertiary color scheme with the same color options as the Primary color scheme.

# Quaternary color scheme

Provides the Quaternary color scheme with the same color options as the Primary color scheme.

# Primary buttons

Primary buttons are for the main actions that visitors perform on your store, like Submit, Apply, or Pay. Refer to Shopify dev: Button > Best practices (opens new window).

To set a background color for primary buttons:

  1. Go to Theme settings > Colors > Primary buttons.

  2. Select from the following Background color checkbox options:

    • Text. Sets the button background color to the color scheme’s Text color.

    • Accent. Sets the button background color to the color scheme’s Accent color.

    The Primary buttons color options in Theme settings.

# Form inputs and secondary buttons

Secondary buttons are for actions that are not primary, like Review your order. Refer to Shopify dev: Button > Best practices (opens new window). Visitors use forms to input data sent to your store, like Customer contact details.

To set a background color for form inputs and secondary buttons:

  1. Go to Theme settings > Colors > Form inputs and secondary buttons.

  2. Select from the following Background color checkbox options:

    • Match background. Sets the form or button background color to match the page’s background color.

    • Card. Sets the form or button background color to match the card’s color.

    The Secondary buttons color options in Theme settings.

# Layout

In Theme settings > Colors > Layout, set a color for borders and choose a color scheme for drawers.

  • To set a color for borders, select Border color, and then use the color picker, enter a hex color value or choose a Currently used color.

  • To set a color scheme for drawers, select the Drawer color scheme dropdown, and then choose from the following dropdown options:

    • Primary. Sets the drawer color scheme to use the primary color scheme.

    • Secondary. Sets the drawer color scheme to use the secondary color scheme.

    • Tertiary. Sets the drawer color scheme to use the tertiary color scheme.

    • Quaternary. Sets the drawer color scheme to use the quaternary color scheme.

      The Layout color options in Theme settings.