What are color schemes?

Color schemes allow you to create a preset choice of colors that you can apply throughout your site. This is convenient because you define them in one location and then if you ever want to change a color, you can change it in that one place and it will update across every section and element you've applied it to.

Go to Theme settings > Colors to config it

In each section/block setting, you have the option to choose 'color scheme'. For example in 'Slideshow' section below:

You can choose a different color scheme for each section

1. How to edit a Color scheme?

By default, there are 14 color schemes in the theme. You can click on each color scheme to edit your own colors.

1.1. Typography

• Text: the heading text of section
• Secondary text: the subheading text of section

1.2. Background

Use for sections that have a background. Not for sections with background images: slideshow, video, etc...

• Primary background: Select the main background color for the section, ensuring it complements the logo and other elements. This color establishes the user's first visual impression.

• Background and gradients: the main background of section.

• Secondary background: some sections have a second background for the child element. Example: Order note, Shipping blocks in Cart Drawer, Testimonials

1.3. Buttons

• Solid button background: Select the background color for solid-style buttons. This color is crucial for making buttons stand out, attracting user attention, and highlighting key calls to action (CTAs).
• Solid button label: Choose the text color for solid-style buttons. The text color should have a high contrast with the background color to ensure excellent readability, even for users with low vision.
• Outline button: Select the color for the border and text of outline-style buttons. This color helps the buttons stand out without being overly distracting, contributing to a more balanced and refined design (applied when you choose Button style as outline)

1.4. Additional

• Lines and borders: applied on some sections which have lines and borders. Example:

• Overlay: works when you open a drawer, pop up, mobile menu

1.5. Product

Text, Price, Sale price are used in Product Grid layout

2. Other color options

2.1. Default color scheme

• Default color scheme: Select the primary color palette for the entire, including basic elements like links, text, and icons. This scheme sets the overall tone and ensures consistency with your brand's style.
• Modal/drawer/popover color scheme: Choose a separate color scheme for interactive components such as pop-up menus, slide-out navigation drawers, or modal windows.

2.2. Product badges

You set up the background for product badges.

To configure the custom badge such as 'Best Seller', please follow this guide

2.3. Notices

Config colors for success, warning, and error messages in the theme.

2.5. Extras

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. The color of this bar provides visual feedback to users, making the loading process feel more engaging and less like a waiting game..
• Keyboard focus: Select the color for the border or highlight effect that appears when users navigate with a keyboard. This color ensures your website is accessible, making it easy for users to identify which element is currently selected.
• Drag cursor background: Select the background color for the drag cursor that appears when users interact with draggable elements. This background color improves visibility and enhances the visual feedback during drag-and-drop actions.
• Drag cursor color: Choose the color for the icon or main elements of the drag cursor. This color should have high contrast with the background color to ensure the cursor remains clearly visible, regardless of the underlying content.

Updated on: 15/08/2025