3 Ways to Add Custom Color and Image Swatches to Shopify

I've implemented Shopify swatches in different ways before, but I noticed that some clients weren't familiar with color swatches or how to set them up properly. So, in this article, I'll explain 3 different ways to implement custom color and image swatches in Shopify stores.

What Are Shopify Color Swatches?

Color swatches are a visual way to display product options, such as colors, patterns, materials, or finishes.

Instead of showing product options as a traditional dropdown or text list:

A store can display visual options:

Depending on the implementation, a swatch can be a simple CSS color, a custom image, or a product image.

Swatches can be useful on:

• Product pages
• Collection pages
• Search results
• Quick-view components

They allow customers to understand product variants more quickly and can make the shopping experience much more visual. There are several ways to implement this on Shopify. The right approach depends on the theme, the store's requirements, and how much customization is needed.

In this article, I'll cover 3 common approaches:

1. Shopify Native Color Swatches - Using Category Metafields
2. Filename-Based Swatches - Using Shopify Files in Older Themes
3. Third-Party Shopify Apps

Each approach has its own advantages and limitations, so the right choice depends on the store's existing setup and requirements.

---

Approach 1: Shopify Native Color Swatches - Using Category Metafields

For modern Shopify stores, the native swatch functionality should generally be the first approach to consider.

Shopify's Standard Product Taxonomy provides category metafields for product attributes such as color. These category metafields can be connected to product variant options, allowing compatible themes to use the associated color or image information to display swatches.
When a product is assigned to a category that supports a color category metafield, you can add or customize color entries and connect that category metafield to the product's Color variant option.
Shopify-compatible themes can then use those values to display color swatches.

How it works

First, assign an appropriate product category to the product. This can unlock a Color category metafield.

You can then add or edit the color entries that you want to use.

For example:

Color
├── Black 
├── Navy 
├── Forest Green 
└── White

Each color entry can contain the information Shopify needs to represent the swatch, including a color value or an image.

Next, connect the Color category metafield to the product's Color variant option.

For example:

Color variant option 
├── Black 
├── Navy 
├── Forest Green 
└── White

The option values are now associated with the corresponding color entries.

If the theme supports Shopify's native swatches, the theme can render these values automatically as swatches. In themes such as Dawn, the variant picker can use the swatch information supplied by Shopify.

Theme customization

One of the biggest advantages of the native approach is that the swatch data is already exposed to the theme through Liquid.

Shopify provides a swatch object with properties such as:

{{ value.swatch.color }}
{{ value.swatch.image }}

A simplified example could look like:

{% for value in product_option.values %}
  {% if value.swatch %}
    {% if value.swatch.image %}
      <img src="{{ value.swatch.image | image_url: width: 48 }}" alt="{{ value }}">
    {% elsif value.swatch.color %}
      <span style="background-color: {{ value.swatch.color }}"></span>
    {% endif %}
  {% endif %}
{% endfor %}

This is a simplified example. A production variant picker also needs to handle accessibility, selected states, unavailable variants, variant URLs, and JavaScript interactions.

The exact implementation depends on the theme, but the important point is that Shopify provides the swatch data directly, so you don't need to build your own filename-matching system.

Shopify's official swatch implementation also allows themes to control how swatches look and behave, including their shape, styling, and variant-selection behavior.

Advantages

• Native Shopify functionality
• No third-party app required
• Structured and reusable color data
• Supports both color and image swatches
• Color entries can be reused across products
• Works well with modern Shopify themes
• Less custom swatch-mapping code compared with older approaches

Considerations

Your theme needs to support Shopify's native swatches. Shopify notes that compatible themes can display the swatches automatically, while older or unsupported themes may require theme code customization.

For a new Shopify store, this is usually the approach I'd check first.

---

Approach 2: Filename-Based Swatches - Using Shopify Files in Older Themes

Before Shopify's native swatch functionality became available, a common approach was to upload swatch images to Shopify Admin → Content → Files and use the product option value to determine which image should be displayed.

For example, you could upload:

black.png
white.png
navy.png
forest-green.png

Custom theme code can convert the option value into a filename and use that filename to locate the corresponding swatch image.

For example:

Black → black.png 
Navy → navy.png 
Forest Green → forest-green.png 
White → white.png

A simplified example of the kind of Liquid logic used in older themes might look like this:

{% for value in product_option.values %} 
  <span
    class="swatch"
    style=" background-image: url( {{ value | handle | append: '.png' | file_img_url: '48x48' }} ); " 
  ></span> 
{% endfor %}

The theme's Liquid/JavaScript logic can map the product option value to the corresponding file.

forest-green

and the theme looks for:

forest-green.png

Why this approach was popular

It was relatively simple and didn't require an app or additional structured data.

It also gave merchants the ability to use custom images for colors, patterns, materials, or finishes.

However, it relies heavily on a specific naming convention.

If the product option is:

Forest Green

but the uploaded file is:

forest-green-swatch.png

the theme code needs to account for that difference.

This approach can therefore become difficult to maintain as the number of products and colors grows.

When does this approach still make sense?

I'd mainly consider this approach when working with an older Shopify theme or an existing store that already uses filename-based swatches.

If you're building a new implementation today, I'd first check whether Shopify's native swatch functionality can meet the requirements.

---

Approach 3: Third-Party Shopify Apps

The third option is to use a Shopify app that provides color and image swatch functionality.

This can be useful when the merchant needs features beyond what the theme's native swatch implementation provides, or when they don't want to make theme-level changes.

Depending on the app, features can include:

• Color swatches
• Image swatches
• Pattern swatches
• Swatches on product detail pages
• Swatches on collection pages
• Hover effects
• Variant selection
• Custom swatch layouts
• Advanced swatch management

The main advantage is convenience. Instead of building and maintaining the functionality yourself, the app provides the functionality and configuration interface.

The trade-offs are that apps can introduce additional costs, dependencies, and potentially extra frontend code.

I'd consider an app when the requirements are relatively advanced or when the merchant wants a solution that can be configured without custom theme development.

---

Conclusion

For a new Shopify implementation, I'd start with Shopify's native color swatches.

They provide a structured way to associate color data with variant options, and compatible themes can consume the swatch information directly.

If you're working on an older theme that already uses filename-based swatches, there's usually no reason to rebuild everything immediately. The existing implementation may continue to work perfectly well.

Finally, if the merchant needs functionality that isn't conveniently supported by the native theme implementation, a third-party app may be the better choice.

The important thing is to understand the store's existing setup before choosing an implementation. Sometimes the best Shopify development work isn't writing more code - it's choosing the simplest solution that already fits the requirements

References

https://gokickflip.com/blog/shopify-color-swatches
https://www.shopify.com/ca/partners/blog/swatches
https://help.switchthemes.co/baseline/guides/color-swatches.html
https://shopify.dev/docs/api/liquid/objects/swatch