Colors

Ask AI

Open in ChatGPT

Ask ChatGPT about this page

Open in Claude

Ask Claude about this page

Color schemes

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

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?

✨ As of version 1.9.0, header colors are no longer configured here. Go to the Header section's own settings instead - see the Header guide for how to change its color scheme.

🤔 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.
• Set Out of stock - continue selling message for out-of-stock products with "Continue selling when out of stock" enabled. Default: matches your preset's In stock color.
• Set Pre-order message for products that qualify for pre-order. Default: matches your preset's In stock color.

STEP 4:
Click “Save” when done.