Color & Color schemes

Change the color scheme to match the website's look and feel

Steps

In the theme editor (Customize), click Theme settings
Locate Colors
Make necessary changes
Save

Color schemes

Color schemes organize element settings and their corresponding colors in a visually cohesive manner. You can allocate different colors to various elements within a unified color scheme, which can then be implemented across your theme wherever a color scheme picker is accessible.

A color scheme typically applies to the following elements:

Background
Text
Solid button background
Sold button label
Outline button
Button hover
Product price
Form field
Tooltip
Border

You can have up to 21 color schemes.

Manage your color scheme

Steps:

From your Shopify admin, go to Online Store > Themes.
Click Customize next to the theme that you want to customize.
Select Theme settings > Colors.
In the Schemes section, click an existing scheme or click Add scheme to add a new color scheme.
Click the color swatch for the content type color that you want to change.
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.
Click Save.

Apply your color scheme

Once you've established your color scheme within the theme settings, you can apply it using the color scheme picker found in the section and block settings.

Please note that the color scheme picker is accessible only in specific sections, blocks, and general theme settings.

Gradients

You have the option to create visually appealing background options by setting up color gradients.

The gradient picker enables you to choose colors, gradient style, angle, position, and opacity for your gradient.

Changes made in the gradient picker are immediately reflected in real-time within the theme editor, allowing you to preview your selections instantly.

Set up gradients

From your Shopify admin, navigate to Online Store > Themes.
Click Customize next to the theme you wish to modify.
Select Theme settings () > Colors.
In the Schemes section, choose the existing scheme you wish to edit.
Click on the gradient color swatch option labeled Background gradient.
If you haven't previously set up a gradient, preset options will be displayed for you to choose from. Select any preset gradient to open the options panel.
Customize your gradient options:
- Choose between a linear or radial gradient using the provided buttons.
- Adjust the angle of your gradient using the up and down arrows. Each click adjusts the angle percentage by 5.
- Utilize the slider to set the position of your gradient, or input a numeric value in the corresponding field.
- Specify a color using its hex code or utilize the color slider to choose a hue. Recently selected colors are shown at the bottom of the gradient options panel.
- Adjust the opacity of your gradient by using the slider on the right. You can also input a percentage in the field next to the hex color code to adjust transparency.
Click Save.