Skip to content

Colors

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

In the previous video, in Theme settings > Colors > Primary buttons, the Background color radio button option is changed from Text to Accent 1. This change sets the button background color to use the color scheme's Accent 1 color. In the video, the Accent 1 color is applied to the Subscribe button's background. You can choose to apply a color scheme's Accent 1 or Accent 2 color option to elements throughout your store.

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

Color schemes

With Shapes, you can create 4 different 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 color schemes.

The following table describes Shapes' 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.
QuaternaryA fourth color scheme for your store.

Configure colors

To set how colors are displayed on your store's pages:

  1. Go to Theme settings > Colors.

    Theme setting's Colors menu.

  2. Select a setting described in the following table.

Setting nameDescription
Primary color scheme > TextTo set the Primary color scheme's default color for text, select Text, and then use the color picker, enter a hex color value, or choose a Currently used color.
Primary color scheme > Text > Connect dynamic sourceTo display a color from a dynamic source, select the Connect dynamic source icon, beside the Text color selector, and then choose a dynamic source to add. You must define sources of dynamic content. Refer to Shopify help: Metafields
Primary color scheme > BackgroundTo set the Primary color scheme's background color, select Background, and then use color picker, enter a hex color value, or choose a Currently used color.
Primary color scheme > Background > Connect dynamic sourceTo display a color from a dynamic source, select the Connect dynamic source icon, beside the Background color selector, and then choose a dynamic source to add. Refer to Shopify help: Metafields
Primary color scheme > Accent 1To set the Primary color scheme's first color option for accented elements, like hover over text and hyperlinks, select Accent 1, and then use the color picker, enter a hex color value, or choose a Currently used color.
Primary color scheme > Accent 1 > Connect dynamic sourceTo display a color from a dynamic source, select the Connect dynamic source icon, beside the Accent 1 color selector, and then choose a dynamic source to add. Refer to Shopify help: Metafields
Primary color scheme > Accent 2To set the Primary color scheme's second color option for accented elements, like hover over text and hyperlinks, select Accent 2, and then use the color picker, enter a hex color value, or choose a Currently used color.
Primary color scheme > Accent 2 > Connect dynamic sourceTo display a color from a dynamic source, select the Connect dynamic source icon, beside the Accent 2 color selector, and then choose a dynamic source to add. Refer to Shopify help: Metafields
Primary color scheme > CardTo set the Primary color scheme's color for cards, select Card, and then use the color picker, enter a hex color value, or choose a Currently used color. Refer to Cards.
Primary color scheme > Card > Connect dynamic sourceTo display a color from a dynamic source, select the Connect dynamic source icon, beside the Card color selector, and then choose a dynamic source to add. Refer to Shopify help: Metafields
Primary color scheme > GradientSelect Gradient to configure a gradient for the Primary color scheme. Refer to Set up a color scheme gradient.
Secondary color schemeProvides the Secondary color scheme with the same color options as the Primary color scheme.
Tertiary color schemeProvides the Tertiary color scheme with the same color options as the Primary color scheme.
Quaternary color schemeProvides the Quaternary color scheme with the same color options as the Primary color scheme.
Primary buttons > Background colorSelect the Background color radio buttons to set the button background color to the color scheme's Text, Accent 1 or Accent 2 color.
Primary buttons > Text colorUse the Text color dropdown to set a color for (primary) button (label) text to one of the following options:
  • Automatic. Sets the button label text color to match the button's Background color, automatically.
  • Background. Sets the button label text color to the color scheme's (button) Background color.
  • Text. Sets the button label text color to the color scheme's Text color.
  • Accent 1. Sets the button label text color to the color scheme's Accent 1 color.
  • Accent 2. Sets the button label text color to the color scheme's Accent 2 color.
  • Card. Sets the button label text color to match the card's color.
Form inputs and secondary buttons > Background colorSelect the Background color radio buttons to set a background color for form inputs and (secondary) buttons. The Match background option sets the form and (secondary) button background color to match the page's background color. Card sets the form and (secondary) button background color to match the card's color.
Layout > Border colorTo 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.
Layout > Border color > Connect dynamic sourceTo display a color from a dynamic source, select the Connect dynamic source icon, beside the Border color color selector, and then choose a dynamic source to add. You must define sources of dynamic content. Refer to Shopify help: Metafields
Layout > Drawer color schemeUse the dropdown Drawer color scheme to apply the Primary, Secondary, Tertiary or Quaternary color scheme to drawers.
Layout > Disable color contrast validationSelect the checkbox Disable color contrast validation to turn on/off automatic validation for contrasting color combinations used by your store's color schemes. Set this option to on to check contrasting color combinations for accessibility purposes. Refer to Shopify help: Accessibility for themes

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

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 setting described in the following table.

Setting nameDescription
Gradient/CSSUse Gradient/CSS dropdown to select the type of gradient to configure. To use CSS code to specify a gradient, choose CSS, and then add CSS code into the CSS code box. To use the gradient selector options, select Gradient, and then choose a setting described in this table.
Gradient > 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.
Gradient > Linear styleSelect the Linear style icon to set the gradient style to Linear.
Gradient > Radial styleSelect the Radial style icon to set the gradient style to Radial.
Gradient > 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.
Gradient > Position (slider)Adjust the Position slider to specify how much of the currently selected color stop is used by the gradient.
Gradient > Color stopSelect the +/ - icons to add/ remove gradient color stops. The minimum number of color stops is 2 and the maximum is 10.
Gradient > 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.
Gradient > Color (textbox)In the Color textbox, enter a hex color value to set a color for the currently selected color stop.
Gradient > OpacityIn the Opacity textbox, enter a value between 0 (transparent) and 100 percent to adjust the visibility of the currently selected color stop.
Gradient > Color (picker)Use the Color picker to set a color for the currently selected color stop. Alternatively, if available, select a Recently selected color or a Currently used color.
Remove gradientSelect Remove gradient to delete the gradient from the current color scheme.