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.
Steps:
In the theme editor (Customize), click Theme settings.
Locate Colors.
Manage your Schemes and other element colors.
Click Save.
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.
After defining your schemes, you can assign them using the Color scheme picker inside section/block settings.
The color scheme picker is only available in sections/blocks that support custom color schemes.
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
To add custom badges to your store, go to Theme settings > Product badges.
The Pebble theme also includes additional standalone color controls, such as:
Cart bubble background
Last updated
