Displaying Variants as products in collection pages

Highlighted
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.

0 Likes
Highlighted
Tourist
5 0 1

Hi, 

 

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. 

 

Jim

0 Likes
Highlighted

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!

0 Likes
Highlighted

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 -%}
0 Likes