How to add custom color swatches

Color Swatches Configuration #

Configure custom color swatches for product variants to display visually accurate color representations when standard color names aren’t recognized by the browser.

---

Why Configure Color Swatches? #

If you add an unknown or custom color variant name (e.g., “Chocolate”, “Burgundy”), it may not display correctly because browsers only recognize standard color names. Custom color swatches ensure your unique color variants display perfectly with accurate visual representations.

---

Access Color Swatches #

1. Go to Theme Customizer
2. Navigate to the Color swatches section in the sidebar
3. This is where you’ll configure all custom color variants

---

Add Color Item Block #

Create color definitions for each custom variant:

1. Click Add section or Color item block
2. Multiple color item blocks can be added for multiple color variants
3. Each block represents one color variant

---

Configure Color Item Settings #

For each color variant, configure the following:

Color Name: #

• Color name – Enter the exact color name used in your product variant (e.g., “Chocolate”)
• Must match the variant name exactly for proper display

Visual Representation Options: #

Choose one of three display methods:

Option 1: Background Color

• Background color – Add solid color code (e.g., #EDEE53)
• Best for standard solid colors

Option 2: Background Gradient

• Background gradient – Select “Linear gradient” option
• Creates multi-color gradient effect
• Perfect for colors with variations

Option 3: Background Image

• Background image – Upload image representing the color/pattern
• Click Select or Explore free images
• Ideal for textures, patterns, or complex color combinations

---

Example Configuration #

Color Variant: Chocolate

• Color name: Chocolate
• Background color: #EDEE53
• Result: Product page displays accurate chocolate color swatch

Color Variant: Burgundy

• Color name: Burgundy
• Background gradient: Linear gradient
• Result: Rich gradient burgundy swatch

---

Your color swatches are now configured to display accurate visual representations for all custom color variants across product pages.