Colors

Color schemes

Establish and switch between predefined color palettes that maintain brand consistency across the entire store interface.

Header

Customize the visual appearance of the top navigation area, ensuring clear visibility, brand alignment, and user attention to key actions like the shopping cart.

Footer

Style the bottom section of the store for visual separation, readability, and a professional presentation of secondary information and links.

Additional colors

Assign specific colors to critical content elements like pricing, ratings, and overlays to guide user attention, convey meaning, and drive conversions.

Messages

Use color as a universal language for immediate user feedback, clearly communicating system status, errors, successes, and product availability.

🤔 How to establish and switch between brand-consistent color palettes?

Want to create and manage multiple color themes that keep your brand looking consistent across all store pages? Here's how:

STEP 1:
Go to Theme Settings > Colors.

STEP 2:

Configure your main color scheme:

• In the Color Schemes, locate the Main color field.
• Click on the field to open a dropdown list of available schemes (e.g., Scheme 1, Scheme 2).
• Select any scheme from this list to immediately preview it across your store.
• An “Edit” button will appear next to the selected scheme for advanced customization.

STEP 3:
Click “Save” when done.

🤔 How to customize the header for better visibility and brand alignment?

Want to make your top navigation area visually appealing while ensuring key actions like the shopping cart stand out? Here's how:

STEP 1: Go to Theme Settings > Colors > Scroll down to the Header setting group.

STEP 2:

Configure background and text color:

• Set Background color to match your brand.
• Choose Text color with high contrast against the background.
• Set Icon color to complement your text color.
• Adjust Line and border color for subtle separation.

STEP 3:

Configure highlight key shopping elements:

• Make Cart dot a contrasting accent color.
• Set Cart dot text color for maximum readability.
• Use Highlight color for any emphasis elements.

STEP 4:
Click “Save” when done.

🤔 How to style the footer for visual separation and professional presentation?

Want to create a footer that clearly separates from the main content while maintaining readability and a polished look? Here's how:

STEP 1: Go to Theme Settings > Colors > Scroll down to the Footer setting group.

STEP 2:

Set Background for visual separation:

• Click Background and set the color to create clear separation from content areas.
• For enhanced depth, click Background gradient and choose a second color for subtle gradient effect.
  

⚠️Note: If you set up both settings, only the Background gradient will be shown.

STEP 3:

Configure Text and Icon for readability:

• Set Text color for optimal contrast against Background (based on WCAG).
• Choose the Icon color to complement text while being slightly softer.
• Ensure all text remains easily readable against the footer background.

STEP 4:

Add professional Line and border and Highlight:

• Set Line and border for clean separation lines.
• Use Highlight color sparingly for important elements.

STEP 5:
Click “Save” when done.

🤔 How to assign strategic colors to key content elements?

Want to use color to guide customer attention, highlight important information, and improve conversions? Here's how:

STEP 1: Go to Theme Settings > Colors >Scroll down to the Additional colors setting group.

STEP 2:

Configure pricing colors for attention and urgency:

• Set Price for clear, readable regular pricing.
• Set Sale price to highlight discounts and promotions.

⚠️ Note: Ensure sale prices stand out immediately against regular prices.

STEP 3:

Set visual elements for trust and engagement:

• Choose Ratings color (e.g., gold, orange, brand color) to make star ratings visually appealing.
• Set Overlay background.

STEP 4:
Click “Save” when done.

🤔 How to use color for instant user feedback and status communication?

Want to create an intuitive system where customers immediately understand messages, errors, and product availability through color coding? Here's how:

STEP 1:
Go to Theme Settings > Colors > Scroll down to the Messages setting group.

STEP 2:

Configure system feedback colors:

• Set Error message to (urgency color) for immediate attention to problems.
• Set Success message to (positive green) for confirmation of completed actions.

STEP 3:

Set product availability status colors:

• Apply In stock message to indicate available products.
• Set Low stock message for urgency.
• Choose Out of stock message for unavailable items.

STEP 4:
Click “Save” when done.