Color Swatch

Overview

Color Swatches display options as solid color circles. Customers click a color to select it. Supports hex colors and gradients.

Live Preview

Color Swatch does not currently support Live Preview. Customers select a color from the swatches, but the product image will not update in real time based on the color selection. Live Preview support for Color Swatch may be added in a future update.

General Settings

• Label — The option group title (e.g. "Choose Color")
• Required — Whether a selection is mandatory
• Default Option — Pre-selected color when the page loads
• Help Text — Guide text for customers
• Allow Multiple — Let customers select more than one color

Option Values

Each value needs a name and a color. You can duplicate or delete values. Additional settings per value:

• Color — Hex code (e.g. #0077B6) or CSS gradient (e.g. linear-gradient(45deg, #f00, #00f))
• Price Add-on — Optional surcharge for premium colors
• Variant Linking — Link to a Shopify variant for stock tracking

Appearance

• Corner Style — Circle or rounded square
• Swatch Size — Small, medium, or large
• Border & Outline — Border style for selected and unselected states
• Label Position — Above or beside the swatches

Conditional Logic

Use Conditional Logic to show or hide this option based on another selection. For example, show different color sets based on the chosen material.