How to show shopify product variants as a product or related products on the products details page ?

Some of us might have come across a requirement where we need to show the variants of a product like colors, size, etc. in terms of products or related products with carousel kind of effect and so.

Recently, I got into similar kind of situation where a product was having variants like colors: red, green, brown, etc. and size: 10, 20, 30, 40, 50, etc. Now, the requirement was to display a related products section showing the shopify product images in box layouts with unique variants clicking on which should take the user to that variant specific page. For example:

1. BOX-1 RED

I want through the shopify docs and apis to gather information on this and believe me it took hours to get to this solution after searching over internet for close solutions and after merging helpful tips from the Shopify Guru’s here I am with the solution.


{% for option in product.options %}
	{% if option == 'Color' %}
		{% assign index = forloop.index0 %}
		{% assign colorlist = '' %}
		{% assign color = '' %}
		{% for variant in product.variants %}
			{% capture color %}
			{{ variant.options[index] }}
			{% endcapture %}
			{% unless colorlist contains color %}
				{{ color }}
				{{ }}
				{{ variant.url }}
				{{ color }}
			{% capture tempList %}
			{{colorlist | append: color | append: ' '}}
			{% endcapture %}
			{% assign colorlist = tempList %}
			{% endunless %}
		{% endfor %}
	{% endif %}
{% endfor %}

Example-2: In the below example, you have to take care of the css if you want to display the related products in carousel and with some other effects. This example is for providing some idea on how to overcome the issue of displaying unique variants out of 100’s of combinations.

I hope this example of Shopify – Display of variants as related products will be useful for you. Please share your valuable suggestions. Thanks!

Related Post