Color schemes

You can create different color schemes and apply them to different sections throughout your online store. A color scheme is a set of colors. Your theme has a set of default color schemes applied that you can change at any time in the theme editor. You can add your brand colors to enure a cohesive application of your color palette across your online store.

On this page

• Color scheme settings
• Manage your color scheme
• Gradients

Color scheme settings

You can apply different colors to various elements in a cohesive color scheme that can be applied across your theme. You can have up to 21 color schemes. You can also preview how your colors are displayed in the scheme's preview.

Typography

- Text: color is applied to the section or block text.

- Sale off price: color is applied to the product's sale price.

- Compare at price: color is applied to the product's compare at price.

Background

- Background: color is applied to the background of some sections and to the outline button background.

- Gradient background: a gradient of colors is applied to the background of some sections. Background gradients replace the background where possible.

- Input field background: color is applied to the background of input fields. It's also used to the background of select boxs, search input, mobile menu, the main section on the product page, and main blocks on customers pages.

Button

- Solid button label: color is applied to the solid button text.

- Solid button background: color is applied to the solid button background. It's also used as color of the outline button text.

Reviews

- Reviews star: color is applied to stars of the product's rating.

Free shipping bar

- Tracking bar gradient background: a gradient of colors is applied to the background of the tracking bar in the free shipping bar.

Messages

Set colors of text and background for notification in 3 states: success, warning, and error.

 

Manage your color scheme

Your store's color scheme and color options are set within your theme settings. For solid colors, use the color picker to select a new color or enter the value of the color in the text field. The color field accepts the following color names and values:

• color names such as red, black, or blue
• RGB color codes
• hexadecimal color values

Steps:

1. From your Shopify admin, go to Online Store > Themes.
2. Click Customize next to the theme that you want to customize.
3. Click the paint brush icon, and then click Colors.
4. In the Schemes section, click an existing scheme or click Add scheme to add a new color scheme.
5. Click the color swatch for the content type color that you want to change.
6. To set your color, enter a hex color code or choose the color from the color picker. To set the color to transparent, delete the hex code from the text field.
7. Click Save.

Gradients

You can set up a gradient of colors in some themes for visually interesting background options. The color_background setting is used to customize the CSS background property.

Tip

To learn more about gradients and CSS backgrounds, refer to Mozilla's linear gradient and CSS background documentation.

The gradient picker allows you to select the colors, gradient style, angle, position, and opacity of the gradient. The options selected in the gradient picker are previewed in real time in the theme editor. You can also create a gradient background using CSS code, which includes a validation checker.

Set up gradients

1. From your Shopify admin, go to Online Store > Themes.
2. Click Customize next to the theme that you want to customize.
3. Click the paint brush icon, and then click Colors.
4. In the Schemes section, click an existing scheme that you want to edit.
5. Click the gradient color swatch option, such as Background gradient.
6. If you haven't previously set up a gradient, then some preset options are displayed for you to choose from. Select any preset gradient to open the options panel.
7. Select your gradient options:

• Choose between a linear or radial gradient. Use the buttons to select your preferred gradient style.
• Set the angle of your gradient with the up and down arrows. Clicking the up or down arrow increases or decreases the angle percentage by 5.
• Use the slider to select the position of your gradient, or enter a numeric value in the field.
• Enter a specific color hex code or use the color slider to choose a hue. Recently selected colors are displayed at the bottom of the gradient options panel.
• To make your gradient opaque, use the slider on the right to select the transparency of your gradient. You can also enter a percentage in the field next to the hex color code.

1. Click Save.

Use CSS to set gradients

Most CSS background property values can be used to set a background color. You can use this field for solid colors (for example, #000000, black, rgb(0,0,0,0), rgba(0,0,0,0), hsl(0, 0%, 0%), and hsla(0, 0%, 0%, 1) all produce a solid black background), or for gradients (for example, linear-gradient(red, green), radial-gradient(red, green), or conic-gradient(red, green)). Gradients can also be repeated.

Steps:

1. From your Shopify admin, go to Online Store > Themes.
2. Click Customize next to the theme that you want to customize.
3. Click the paint brush icon, and then click Colors.
4. In the Schemes section, click an existing scheme that you want to edit.
5. Click the gradient that you want to edit.
6. Click the arrow next to Gradient, and then select CSS.
7. In the CSS code field, type or paste your gradient code. The theme editor preview displays your gradient in the appropriate location.
8. Click Save.

Remove a gradient

1. From your Shopify admin, go to Online Store > Themes.
2. Click Customize next to the theme that you want to customize.
3. Click the paint brush icon, and then click Colors.
4. In the Schemes section, click an existing scheme that you want to edit.
5. Click the gradient that you want to remove.
6. Click Remove gradient.
7. Click Save.