Colors

Learn how to change the color scheme to match the website's look and feel.

One of the most important components of designing a visually appealing, functional, and accessible theme is color.

Not only does a well-designed color system reinforce a merchant’s branding, but it also has the power to enhance and improve user experiences.

How to access Colors settings

circle-check

Color schemes

What is a color scheme?

A color scheme is a set of coordinated colors used across different elements of your store.

In the Pebble theme, a color scheme can control:

  • Background

  • Background secondary

  • Text

  • Subtext

  • Border

  • Sale price

  • Primary button

  • Secondary button

  • Inputs (form fields)

  • Swatches (color swatch borders)

  • Notifications (Success, Error, Warning, Info, Out of Stock)

  • Progress bar

You can define different color schemes in your theme settings and apply the color schemes to different sections throughout your online store, using a color scheme picker.

Apply your color scheme

After defining your schemes, you can assign them using the Color scheme picker inside section/block settings.

circle-exclamation

Other element colors

Badges

The Pebble theme allows you to fully customize the appearance of product badges.

Available badges:

  • New badge

  • Hot badge

  • Popular badge

  • Sale badge

  • Sold out badge

For each badge type, you can set:

  • Background color

  • Text color

circle-info

To add custom badges to your store, go to Theme settings > Product badges.

Other colors

The Pebble theme also includes additional standalone color controls, such as:

  • Cart bubble background

Last updated