Colors

This guide describes the Theme editor's Theme settings > Colors menu options.

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

The previous image shows part of the Theme editor's Theme settings > Colors menu. The settings adjust the color that's applied to the Scheme 1 color scheme's text.

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

Color schemes

With Shapes, you can create different sets of colors called Color schemes. Shapes provides 6 default color schemes and supports up to 21 color schemes for your store. 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, to apply colors to blocks, sections, and page templates, simply reuse the colors from your color schemes.

The following table describes Shapes' default color schemes.

Color scheme name	Description
Scheme 1	This is your store's default color scheme.
Scheme 2 to 6	Additional default color schemes for your store.

Set up colors

To set up colors:

1. In the Theme editor, go to Theme settings > Colors.

2. Select a setting described in the following table.

Setting name	Description
Schemes > Scheme 1 > Text	To set the Scheme 1 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.
Schemes > Scheme 1 > Text contrast	To set the Scheme 1 color scheme's default color for contrasting with the scheme's text color, select Text contrast, and then use the color picker, enter a hex color value, or choose a Currently used color.
Schemes > Scheme 1 > Background	To set the Scheme 1 color scheme's background color, select Background, and then use color picker, enter a hex color value, or choose a Currently used color.
Schemes > Scheme 1 > Gradient	To set the Scheme 1 color scheme's default gradient colors, select Gradient, and then use the gradient picker options. Refer to Set up a color scheme gradient.
Schemes > Scheme 1 > Accent 1 > Accent	To set the Scheme 1 color scheme's primary 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.
Schemes > Scheme 1 > Accent 1 > Contrast	To set the Scheme 1 color scheme's color for contrasting with the scheme's primary accent color, select Contrast, and then use the color picker, enter a hex color value, or choose a Currently used color.
Schemes > Scheme 1 > Accent 2 > Accent	To set the Scheme 1 color scheme's secondary 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.
Schemes > Scheme 1 > Accent 2 > Contrast	To set the Scheme 1 color scheme's color for contrasting with the scheme's secondary accent color, select Contrast, and then use the color picker, enter a hex color value, or choose a Currently used color.
Schemes > Scheme 1 > Cards > Text	To set the Scheme 1 color scheme's color for card text, select Text, and then use the color picker, enter a hex color value, or choose a Currently used color.
Schemes > Scheme 1 > Cards > Background	To set the Scheme 1 color scheme's color for card backgrounds, select Background, and then use the color picker, enter a hex color value, or choose a Currently used color.
Schemes > Scheme 1 > Remove color scheme	To remove the color scheme, select Remove color scheme.
Scheme 2 to 6	Provides the Scheme 2 to Scheme 6 color schemes with the same color options as the Scheme 1 color scheme.
Add Scheme	To add a new color scheme select Add scheme, and then choose colors for your new color scheme. To save your changes, select Save.
Drawer > Color scheme	Use the Color scheme picker to select a color scheme for your store's drawers (modals). The scheme you select applies to your store's cart drawer, popups, and other modals.
Drawer > Color scheme > Edit scheme (link)	Follow the Edit scheme link to open the Color scheme editor for the color scheme that's applied to your store's drawers (modals). Use the menu options to set up colors for the drawers' color scheme.
Modal backdrop > Color	Use the Color options to choose the backdrop color for modals. Set the modal backdrop color to the same color as the current color scheme's Background, Text, or Accent 1 color.
Modal backdrop > Opacity	Adjust the Opacity slider between 0% and 80% to set a transparency level modals. Setting Opacity at 0% makes modals fully transparent and the background elements behind the modal visible. Setting Opacity at 80% makes modals more opaque and the background elements behind the modal less visible.
Selected text > Background color	Use the Background color options to specify a background color for areas of selected text. When a store visitor selects text on a store page, the background color you choose displays behind the selected text. Set the text background color to use the Text, Accent 1 or Accent 2 color from color scheme applied to the section that contains the selected text.

Note

To connect a metafield to a setting that supports metafields, select the Connect dynamic source icon displayed beside the setting in the Theme editor.

To learn how to connect a metafield to a supported setting, refer to Shopify help: Connecting metafields to your theme by using the Theme editor.

Set up a color scheme gradient

Shapes' color schemes can use gradients to blend two or more colors together, like red and yellow. 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.

2. Select a setting described in the following table.

Setting name	Description
Gradient/CSS	Use 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, choose a gradient, and then apply 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 style (icon)	Select the Linear style icon to set the gradient style to Linear.
Gradient > Radial style (icon)	Select the Radial style icon to set the gradient style to Radial.
Gradient > Direction (text field)	In the Direction field, 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 stop	Select the + and - icons to add or remove gradient color stops. The minimum number of color stops is 2 and the maximum is 10.
Gradient > Position (text field)	In the Position field, 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 (text field)	In the Color field, enter a hex color value to set a color for the currently selected color stop.
Gradient > Opacity	In the Opacity field, 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 gradient	Select Remove gradient to delete the gradient from the current color scheme.