Show colour swatches in filter as image and not text

Store Design
, , ,
1

Hi we have colour swatches showing on the product description when you drill down but they are not showing as swatched in the filter to the left as an image but showing as a text - i wonder if anyone can offer any advice please on how i can get it to show - this is the page https://kitout-fitness.co.uk/collections/kitout-custom-kits and image below

thankyou

Screenshot 2025-04-30 071742.jpg
Screenshot 2025-04-30 071742.jpg1532×930 131 KB

2

Hi Shane,

Thanks for pointing this out and sharing the link.

I’ve checked the issue, and it looks like a fairly simple fix. To proceed, I’ll need access to your theme code so I can review how the filter is currently implemented and guide you on exactly what needs to be changed to display the swatches as images instead of plain text.

Please grant me collaborator access or let me know the best way to access the code.

Looking forward to resolving this quickly!

3

Hey @Shane_h ,

Option 1: Theme Settings (if supported)

Some Shopify themes (like Prestige, Focal, Impulse, etc.) allow you to toggle filter swatches in the Theme Editor:

  1. Go to Online Store > Themes > Customize.

  2. Navigate to a collection page.

  3. In the left sidebar, click on the Collection Filters section.

  4. Look for an option like “Enable color swatches” or “Show color filter as swatch” and enable it.

If your theme supports it, this is the easiest fix.

Option 2: Manual Liquid Customization (if theme doesn’t support it)

  • You can modify the filter rendering logic in your theme’s code:

  1. Go to Online Store > Themes > Edit Code.

  2. Look for a file like facets.liquid, filter-sidebar.liquid, or under snippets something similar.

  3. Locate the section where color filter options are rendered.

  4. Replace the text rendering with swatch images. Example:

{% if filter.label == 'Color' %}
  {% for value in filter.values %}
    
  {% endfor %}
{% else %}
  {# default rendering for other filters #}
{% endif %}

This assumes you’re using plain color names like “Red”, “Black”, “White”. For more complex mappings (like Light Grey = #d3d3d3), you’ll want to use metafields or a custom swatch map.

If you’d like me to help implement this, feel free to reach out to me anytime—I’d be happy to assist!

Best Regards,

Rajat

Shopify Expert

https://rajatweb.dev/

4

https://themes-support.swissuplabs.com/hc/en-us/articles/9748628282013-1-Add-a-filter-to-collection-page:

Settings:

5

HI Tim its already set on that we tried already thanks

6

Well, it does work on the demo store…

Not sure how swatches are implemented.

Worth noting that for free themes, you need to create your color product option from the category metafield for the swatches to work. May worth checking.

Also, may worth contacting the theme dev support as well.