Color Swatch

Color Swatch lets shoppers choose from predefined colors. It can link to live preview text color today, and direct product-color image preview is coming soon.

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 supports Live Preview in two ways.

Link Color Swatch to text color

Use Color Swatch when customers should choose from predefined text colors, such as black, white, gold, or silver. Add a Color Swatch option, then select the Text Input or Text Area option in the editor and use Link colorSwatch in the right-side settings panel.

In this setup, the text option owns the live preview layer, and the Color Swatch provides the color value used by that text layer. Podifai does not currently provide a free-form storefront color picker where customers can choose any custom color.

Direct Color Swatch live preview

Direct Color Swatch live preview for product-color image changes is coming soon. This will let a color value, such as a hex color, update the live preview area with the corresponding product image. This is useful when each product color should show a different preview image.

Color Swatch can also be used with inventory settings when the color choice should track product or variant availability.

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.