Colors & Color schemes

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

Color schemes

Color schemes are group elements settings and their respective colors in a visually representative way. You can assign different colors to various elements in a cohesive color scheme that can be applied across your theme where a color scheme picker is available.

A color scheme is a set of colors that 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

Apply your color scheme

After defining your color scheme in the theme settings, you can assign a color scheme using the color scheme picker in the section and block settings.

The color scheme picker is available only in certain sections, blocks, and general theme settings.

Gradients

You can set up a gradient of colors for visually interesting background options.

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 can be previewed in real-time in the theme editor.

Set up gradients

Remove a gradient

Body color scheme

Set the color scheme you want to apply for the template's body.

Count bubble

See how to set up the wishlist and compare page here: Additional pages

Notification

You can adjust the text color of the notifications based on the type: Success, Warning, and Error.

Overlay

Set a background color for the overlay. You can also adjust the opacity value by tweaking the toggle.

Last updated