Ctrlk
Contact support
For the complete documentation index, see llms.txt. This page is also available as Markdown.

Variant images vs Color Swatches

Compare Avante's two color display methods — variant images (thumbnails) vs color swatches (circles) — with setup steps and troubleshooting tips.

In Avante, color variants can be shown in two ways: Variant images or Color swatches. Choose the option that fits how you want customers to shop.

Variant images
Color swatches

Shows

Small product thumbnail per color

Small color circle per color

Best for

Products with distinct photos per color

Cleaner, simpler selector

Example

If each color is a separate product, see Linked Products instead — the settings on this page apply to native Shopify variants only.

Variant label must match your product option name exactly — including capitalization. If your option is named Colour or Color, the Variant label field must match it character for character. color ≠ Color ≠ Colour.

Set up variant images

Variant images show a small thumbnail of the actual product photo for each color option.

1

Go to Theme Editor → Theme settings → Variant selector

2

Scroll to Variant image

3

Enter your option name in Variant label (e.g. Color)

4

Optionally adjust shadow, image ratio, focal point, corner radius

Set up color swatches

Color swatches show a small color circle instead of a product photo.

1

Go to Theme Editor → Theme settings → Variant selector

2

Scroll to Color pills. Enter your option name in Variant label (e.g. Color)

Enable swatches on collection cards

By default, swatches appear on the product page only. To show them on product cards in collections:

Go to Theme Editor → [your collection section] → section settings and enable Enable color pills.

This setting is available in Featured collection, Collection page, and similar sections individually.

Set up custom color swatches

Avante uses standard HTML color names by default. If a color name doesn't match, or the displayed shade looks wrong, you can customize it in two ways:

Option A — Upload PNG files

1

Set Style to Image in Theme settings

  1. Go to Theme Editor → Theme settings → Variant selector → Color pills

  2. In the Variant label field enter your option name (e.g. Color)

  3. Set Style to Image

2

Prepare the image files

Create PNG files for your color values. Name each file to match the variant value. Use lowercase letters and underscores for spaces.

  • Red → red.png

  • Ocean blue → ocean_blue.png

Recommended: 60×60px, under 20KB

3

Upload the files in Shopify

In Shopify admin, go to Content → Files. Upload the prepared images.

4

Let Avante match the files automatically

After upload, Avante automatically links the images to matching color variants across your store.

Custom swatches only work when the file name matches the variant value format.

Option B — Define hex colors in Theme Editor

Faster when you only need solid colors.

1

Go to Theme Editor → Theme settings → Variant selector

2

Scroll to Custom colors for pills → Configuration

3

Add one rule per line:

Example:

Use PNG files when you need textures, patterns, or photographic swatches. For solid colors, the Configuration field is quicker.

Common issues

Swatches are not showing at all

Check that the value in Variant label matches your product option name exactly, including capitalization. Color ≠ color ≠ Colour.

Swatches show on the product page but not in collections

Enable Enable color pills inside the settings of each collection section (Featured collection, Collection page, etc.).

A color swatch is dimmed / faded

The variant is sold out. Avante shows sold-out variants with reduced opacity so customers can still see the option exists.

A color swatch is missing entirely

The variant combination hasn't been created in Shopify Admin. Avante hides variants that don't exist as valid combinations — not sold-out ones. Go to Shopify Admin → Products → [product] → Variants and make sure all color/size combinations are created.

Related

Last updated

Was this helpful?