Collection Filter Variant Swatches (2024) - Free Tutorial

In this customization, we're going to add variant swatches to the collection filters. We will maintain the checkbox functionality of our filters, but we're gonna add a little swatch beside it.

Compatible Themes: This code should work on all free Shopify themes (Dawn, Refresh, Craft, Studio, Publisher, Crave, Origin, Taste, Colorblock, Sense, Ride, Spotlight).

Links:

• Adding Collection Filters
• Collection Page Variant Swatches
• Product Page Variant Swatches

 

 

1. Add code in the theme code editor

Edit facets.liquid

Add this code near top of file:

{% assign entry_title = "variant-swatch-mapping" %} {% comment %}Setting: Name of Metaobject entry{% endcomment %}
{% assign filter_param_names = "filter.v.option.color,filter.v.option.material" | split: "," %} {% comment %}Setting: Name of Filter Type{% endcomment %}

Paste inside {% case filter.type %} {% when 'boolean', 'list' %} just before the <li class="list-menu__item facets__item … > definition

{% for variant_option_name in filter_param_names %}
    {% if filter.param_name == variant_option_name %}
      {% assign target_entry = nil %}
      {% for entry in shop.metaobjects.variant_swatch_map.values %}
        {% if entry.title == entry_title %}
          {% assign target_entry = entry %}
          {% break %}
        {% endif %}
      {% endfor %}
  
      {% if target_entry %}
        {% assign variant_images_data = target_entry.variant_images_json %}
        {% assign variant_images = variant_images_data.value %}
      {% else %}
        {% assign variant_images_data = nil %}
      {% endif %}         
    {% endif %}
{% endfor %}

Paste in all three spots where the checkbox input elements are defined.

{% for variant_option_name in filter_param_names %}                  
    {% if filter.param_name == variant_option_name %}                         
        {% assign current_variant = nil %}
        {% for variant in variant_images %}
           {% if variant.variant_value == value.label %}
              {% assign current_variant = variant %}
              {% break %}
           {% endif %}
        {% endfor %}   
        <div class="variant-filter-swatch" 
             style="
               {% if current_variant.color_swatch != blank %}background-color: {{ current_variant.color_swatch }};{% endif %}
               {% if current_variant.variant_swatch != blank %}background-image: url('{{ current_variant.variant_swatch | file_url }}');{% endif %}
             "
        >
        </div>
    {% endif %}
{% endfor %}

Paste styles at the bottom

<style>
  .variant-filter-swatch {
      display: inline-block !important;
      min-width: 16px;
      min-height: 16px;
      width: 16px;
      height: 16px;
      background-size: cover;
      border: 1px solid black;
      display: inline-block;
      margin-right: 8px;
      border-radius: 50%;
  }
</style>

2. Update the Swatch Metafields

Update the “Variant Images JSON” definition

{
  "$id": "variants_images.schema.json",
  "$schema": "<http://json-schema.org/draft-07/schema#>",
  "title": "Variants List",
  "description": "A list of variant swatches",
  "type": "array",
  "items": {
    "type": "object",
    "properties": {
      "variant_name": {
        "type": "string",
        "description": "The variant option name."
      },
      "variant_value": {
        "type": "string",
        "description": "The variant option value."
      },
      "variant_swatch": {
        "type": "string",
        "description": "The filename or URL of the image representing the color."
      },
      "color_swatch": {
        "type": "string",
        "description": "The HEX value or description of the color."
      }
    },
    "required": [
      "variant_name",
      "variant_value",
      "variant_swatch"
    ]
  }
}

Update the “variant-swatch-mapping” metaobject entry with your color swatches. For example:

[
  {
    "variant_name": "Material",
    "variant_value": "Cotton",
    "variant_swatch": "cotton.jpg"
  },
  {
    "variant_name": "Material",
    "variant_value": "Polyester",
    "variant_swatch": "polyester.jpg"
  },
  {
    "variant_name": "Color",
    "variant_value": "Blue",
    "variant_swatch": "bluerose.jpg"
  },
  {
    "variant_name": "Color",
    "variant_value": "Green",
    "variant_swatch": "greenimage.jpg"
  },
  {
    "variant_name": "Color",
    "variant_value": "Black",
    "variant_swatch": "",
    "color_swatch": "#000000"
  },
  {
    "variant_name": "Color",
    "variant_value": "Red",
    "variant_swatch": "",
    "color_swatch": "#FF0000"
  },
  {
    "variant_name": "Color",
    "variant_value": "White",
    "variant_swatch": "",
    "color_swatch": "#FFFFFF"
  }
]