Displaying Variants as products in collection pages

New Member
1 0 0

Hello Mircea,

I know this is an old thread but im finding myself in quite a pickle here. First of all, would it work on the District theme? Also, I don't really understand what I would have to do, should I just copy and paste in sections/collection-template.liquid? A little guidance would be very much appreciated.

5 0 1



Since I posted this, I discovered the following app which works really well: https://apps.shopify.com/show-variants-on-collection-page?utm_campaign=installed&utm_content=context... 


It is $29.95/month but worth every cent since it is highly configurable even allowing specific colors in specific collections. Using this app, we were able to create a V-Day collection that only included our V-day colors of products that have many more colors. It also allows you to just turn on collections and then those collections automatically show variants as individual products. Installation was a breeze and instantaneous. Support is also great. 


I hope this helps. 




Hi @Mircea_Piturca 

Thank you for this! I've been able to implement it when a product has only 1 option but am having an issue when a product has 2 options. Is there a tweak to make this work? Thanks in advance!


This is the code I've gotten to work that displays my iPhone 11 variant photo for my "iPhone 11" collection based off of the collection handle (iPhone-11), even when there are 2 options. Such as "Device" (Option 1) and Case Finish (Option 2), for example.


I sincerely hope this helps someone as it has taken me MONTHS to tweak to work exactly as I need it to!


{%- if collection.handle == 'iphone-11'-%}
{% assign collection_handle = collection.handle | replace: '-', ' '  %}
{% for variant in product.variants %}
{% assign delimiter = ' / ' %}
{%- assign title = variant.title | split: ' / ' | first | downcase -%}
{%- if title == collection_handle -%}
{%- assign vt = title -%}
{%- assign img_url = variant.image.src | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- endif -%}
{% endfor %}
{%- endif -%}