Color Swatch

Color Swatch lets shoppers choose from predefined colors. It can control linked text and effect colors, or directly update a Live Preview image layer using the Preview Image assigned to each color value.

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

Turn on Live Preview for the Color Swatch, then edit each color value and assign its Preview Image. When a shopper selects that color, Podifai displays the corresponding image in the configured preview layer. Use transparent PNG or WebP assets with consistent dimensions and alignment when the color image should overlay a shared product background.

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))
• Preview Image — Image displayed in Live Preview when this color is selected
• 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.