Swatches

Swatches Settings

Select how product swatches are displayed on your storefront.

Available options:

None – Disables swatches for product variants.

Native swatches – Displays color swatches using Shopify’s built-in functionality.

Color – Shows swatches using the color code or name defined in the Color swatch values field.

Image – Displays swatches using custom image files based on the color name.

Define custom color swatches using color names and values.

Format: {ColorName,#HexCode} or {ColorName,ColorValue}

Separate multiple entries using ||.

Examples:

{Dark gray,#A9A9A9}

{Hot Pink,hot-pink.png} (for image-based swatches)

When using image swatches, upload a PNG file named to match the color name (spaces replaced by hyphens).

Example: Hot Pink → hot-pink.png