Counting unique options in Shopify /
Ever wanted to quickly display how many of an option a product contains?
Available in 4 sizes
...
Available in Red, Blue, Green
...
Available in 10 colors
Here’s an example of how to do just that (for color). Simply open your product’s loop liquid and add this block at the top:
# snippets/product_loop.liquid
{% raw %}
{% assign color_index = nil %}
{% assign color_label = 'Color' %}
{% if product.options[0] == color_label %}
{% capture color_index %}option1{% endcapture %}
{% elsif product.options[1] == color_label %}
{% capture color_index %}option2{% endcapture %}
{% elsif product.options[2] == color_label %}
{% capture color_index %}option3{% endcapture %}
{% endif %}
{% assign colors = product.variants | map: color_index | uniq %}
This product is available in {{ colors.size }} {{ colors.size | pluralize: 'color', 'colors' }}
{% endraw %}
Now you should get a result (given you have a color option for your variants), showing you how many unique colors there are for the product. Here’s what happened:
- First, we determined which index the
Coloroption was. Because Shopify only allows for three options, this makes it a quick check. - We grab the variants with
product.variantsand usemapto return the results for onlyoption1,option2, oroption3depending on thecolor_indexvalue. - We then run the results through
uniqto filter out duplicates.
You can now apply the same logic to any options you want. Change the color_label variable
to Size and you can get the same results but for sizes.
Allowing the customer to quickly scan what they’re looking for and selecting the product appropriate to their needs… this little bit of Liquid can easily help with conversion rates.