The colors of elements in the theme are controlled by Color Schemes. Color Schemes allow you to create predefined color sets that can be applied consistently across your entire website.
Each section includes a Color Scheme option in its settings. You can apply the same Color Scheme to multiple sections if you want their colors to remain consistent. When multiple sections use the same Color Scheme, any change made to that scheme will automatically update the colors for all sections using it.
If you want to change the colors of one section without affecting others, simply select a different color scheme for that section.
Below are some examples to help you better understand how to change colors using Color Schemes.
In this example, we will use the Featured Product section to demonstrate how color customization works. Other sections can be customized in the same way.
Within the Color Scheme, you can customize colors for elements such as Text, Buttons, Background, Overlay, and more.
For sections that use a product card layout, such as the Collection page, Featured Collection, and similar sections, you can follow the video below to learn how to change the colors for the price, title, and buttons.
Go to Theme Settings > Color
You will scroll down, find Product badges part. Here you can customize badge colors such as sale badges, new badges, custom labels,...
Config colors for success, warning, and error messages in the theme.
Config colors for Loading bar, Keyboard focus, Drag cursor background, Drag cursor color in the theme.
Loading bar: Customize the color of the page loading progress bar.
Keyboard focus: Select the color for the border or highlight effect that appears when users navigate with a keyboard.
Drag cursor background: Select the background color for the drag cursor that appears when users interact with draggable elements.
Drag cursor color: Choose the color for the icon or main elements of the drag cursor.
