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:
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"
}
]