Displaying Variants as products in collection pages

[Jim_Zafrani]

Hello, 

I know this has been asked before but almost all of the solutions that I've seen involve modification of the liquid files. I was wondering whether or not there are any themes that have that built-in functionality. So a theme setting would allow it to display all the variants as separate products. For example, all colors of a specific style would be displayed in the collection list as separate products with the relevant picture. When clicked, it will go to the product page with the correct color already selected. 

Thanks in advance, 

Jim

[Mircea_Piturca]

Hey Jim,

I've been writing a short tutorial on this last week.

You can have a look at: https://sections.design/blogs/shopify/different-product-images-on-collections

You will find the code there needed.

The logic is to include the code that generates the collection product image with some custom variables.

Based on those variables you loop and find the needed variant to use and display:

{%- assign featured_image = product.featured_image  -%}
{%- assign product_url = product.url -%}

{%- if custom_option_name != blank and custom_option_value != blank -%}
  {%- assign custom_option_name = custom_option_name | downcase | strip -%}
  {%- assign custom_option_value = custom_option_value | downcase | strip -%}

  {%- for product_option in product.options_with_values -%}
    {%- assign option_name = product_option.name | handle -%}
    {%- if option_name == custom_option_name -%}
      {%- assign option_values = product_option.values | join: ',' | downcase | split: ',' -%}
      {%- for option_value in option_values -%}
        {%- if option_value == custom_option_value -%}
          {%- assign custom_variant = product.variants[forloop.index0] -%}
          {%- if custom_variant.featured_image -%}
            {%- assign featured_image = custom_variant.featured_image -%}
            {%- assign product_url = custom_variant.url -%}
          {%- endif -%}
          {% break %}
        {%- endif -%}
      {%- endfor -%}
    {%- endif -%}
  {%- endfor -%}
{%- endif -%}

Here are 2 collections that have the same products but will show different images:

https://sections.design/collections/white-chairs - showing the default featured image

https://sections.design/collections/black-chairs - showing the variant option "black" image.

Have a look at the tutorial and let me know if it makes sense.

You will find the code, demos and GitHub links there.

The site is still under development, please excuse the mess.

Hope it helps

[KarlOffenberger]

 @Mircea_Piturca you are a like a wandering Shopify treasure trove. Nice one and thanks for sharing!

[bizzybdev]

Hi Mircea,

Thanks for the tutorial. I've been going crazy trying to find a way to do this, I'm not sure why it took so long for me to track down this specific help post.

I was trying to add the necessary code into my theme, however when I went to get started, I couldn't locate the places you were referencing. I'm not sure if maybe they are different because I'm using a different theme (I'm using Debut) but I'm quite stuck now. 

I believe in this theme, product-grid-item you refer to is product-card-grid, but the structure of that code is different enough from the Simple one you shared that I can't identify where to add the code. 

Have you tried this in any other themes? Can you help clarify where things would be added otherwise?

Thanks!

Alex

[Mircea_Piturca]

Hi @bizzybdev 

Themes come structured differently, product-grid-item can be named product-card-grid in other themes.

You need to identify where the actual collection product code is, understand the logic and apply it to your code.

Unfortunately there is no general method of doing this but the logic is the same.

Best of luck

[Geminithinker]

Hi guys thanks for sharing. Would this work with a filter app like Product Search & Filter?

[ClauSSilva]

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.

[Jim_Zafrani]

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

[urbanflair]

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!

[urbanflair]

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

[tristan81]

Hi can I ask where you input that code?

thanks

[tristan81]

Hi - can I ask where you added this code to?

[Greenphones]

Just curious. Did you set this up for a mobile store? Do you have a working example?

Cheers

Phil

[Dial-A-Bed]

Hi there

I'm curious as to how to create different Collections based on different variant handles. I'm not sure your previous explainer works for this case? We have beds in Mattress Only or Bed Set, defined in variants. Our mega-nav requires a split on that level too, which means for the same product, some variants go into one and the rest go into another.

Is there a simple way to accomplish this?

[Starshards]

Hey Dial-A-Bed,

1st: Collection
In the conditions section:
Select "variant's title" and "contains" [TITLE_TO_INCLUDE] e.g: variant's title contains "Bed Set" or "Mattress"

2nd: Collection
In the conditions section:
Select "variant's title" and "does not contains" [TITLE_TO_INCLUDE]

[Nancy_Drake]

Hello @Dial-A-Bed 

You can use Collections/ Merchandising tool in Ultimate Filter & Search to exclude irrelevant product option from the collections to have the variant collection. Demo store: https://usf-vertical.myshopify.com/collections/red-shirts  and  https://usf-vertical.myshopify.com/collections/blue-shirts These collections can show matching variant images.

In fact Shopify will include the whole product to the automated collections. For example, your products have 2 options "Mattress Only" and "Bed Set". If you add a condition "variant title" contains or does not contain [product option - Mattress Only], Shopify will add the whole products with 2 options "Mattress Only" and "Bed Set" to that collection. It will show the main product image rather than the variant image.

I hope it can meet your needs.

[May]

Hi, Jim!

This is May from Shopify.

That is a good question. I have done a little bit of digging on my end, and I found that in order to display variants as individual products, you do need to edit your theme code and modify your liquid files, since there isn’t a theme that has this feature built in. If you don’t mind me asking, why do you want to individually display your variants? If you want to make your variants visible on the collections page, perhaps you can take a look into using an app like Products List Variants Viewer. If you choose to download an app, usually there will be an additional subscription cost since you’ll be using their service.

If you still like the idea of displaying the variants as individual products, I recommend giving Mircea’s tutorial above a shot! Before you edit your theme code, I strongly recommend making a duplicate of your theme, to ensure that your customers aren’t affected by any unintended results. If you’re not comfortable with making the changes on your own, you can reach out to our Shopify Experts.

If you have any other questions about your theme that I can help with, feel free to reply back to this thread, and I’ll be more than happy to take a look.

Kind Regards,

May

Shopify Support

[Bekir]

Hi May,

I've tried to implement this code into my theme (Turbo Portland) and I'm not having any luck. Could you point me in the right direction of finding someone who can help me with this or code it for me? 

[Starshards]

@Jim_Zafrani Sadly there isn't a way to do that without editing the code but it's very simple to build as per @Mircea_Piturca. That's a very simple solution. All you have to do is create a new collection and attribute it the new collection template you've created with @Mircea_Piturca's code and you're done.

Have fun

[Mircea_Piturca]

Thanks @KarlOffenberger, appreciate it!

The solution is simple, you look for a variant and use that image and URL.

The URL part is important as you want the user to land on that specific variant product page.

The trick part for a someone without a lot of Shopify experience is to locate where the product markup is created and conditionally pass variables to that snippet. This unfortunately differs from store to store.

As @May mentioned ALWAYS work on a theme copy or development store.

[loram]

I have been reading through several threads but the core purpose varies slightly from our needs and I am hoping you wise sages can guide me and my team in the right direction.

We are looking to create a Collection that only displays the Caselot and Bulk Format variants of our products for our VIP/Wholesale Members. 

I am currently looking to test BOLD MEMBERSHIPS for the paywall/gatekeeping and I found PV VARIANT App that is supposed to assign specific variants to our desired Collection, which would only be visible to our VIPs by way of the Bold Memberships App. Bold appears to work fine but SV Variant is not connecting the dots at the moment ( I have reached out to their support and am waiting for a response ).

Should this solution bomb, I would like to gather your feedback on whether a coded solution would be more reliable. 

• We do not want to duplicate the site into a separate store
• TradeGecko is our ERP to manage our product manufacture and inventory (hence why we only want the one store as a sales channel)
• I do not want to create new Product codes so that I can avoid having to constantly transfer inventory for just the Wholesale Customers.
• We want our VIP/Wholesalers to access only the Caselots and bulk formats of certain products, and they should only see the wholesale pricing.

I have seen some very creative solutions throughout various threads here but I feel our needs are simpler than some other users requests. 

Very receptive to thoughts, advice and feedback!

Many thanks in advance to the Shopify hive!

[Bekir]

Hi Mircea,

Are you able to help me code or implement this fix into my theme? It's the Turbo Portland theme and your code is great, but I don't seem to have much luck with it on my end! 

Thank you!!

[Mircea_Piturca]

Hi @Bekir ,

Different themes have different collection configuration but the logic of implementing this is the same.

Unfortunately I am unable to personally help you with this implementation.

Please post a request on the forum job board. It should be an easy project for a Shopify developer and I am sure you will find help in there.

Best of luck!

[Nancy_Drake]

Hello @Bekir ,

Ultimate Filter & Search app can display variants as separate products on Collection, Search results page and Instant Search suggestion based on certain product options. https://usf-horizontal.myshopify.com/collections/shirts

You can also set the matching variant image on specific collections, for example, White shirt collection will only show white variant image. https://usf-horizontal.myshopify.com/collections/exclusive-shirts

It has supported all Shopify themes, so no coding skill required.

[Bekir]

Hi @Nancy_Drake -- thanks for the suggestion here.

This app looks great, I'm just hoping there's a similar one where the product variants are displayed in full size, instead of below the product (in smaller icons). 

[Dee25]

@Bekir Im having the same issue. Were you ever able to get it to work?

[Bekir]

Hey, we did not find a solution for this yet. I'm assuming it'd be a custom
developer job.

[Greenphones]

Try getting in contact with ZubrCommerce zubrcommerce@gmail.com
They have an unlisted app and it works great.

[made4Uo]

Hi, 

Check this code that works without using an APP. It works with Dawn 2.5 and newer, also to other Shopify 2.0 Themes.  I added an option to add a second variant image, using variant metafield, so the second image show when you hover. 

[Bekir]

This wouldn't be the same thing I'm looking for. I'm looking to add a variant color option on existing product pages that show the other available colors of that product, without the customer having to go 'back' and click on a different product titled with a different color name. Below is an example of what I mean visually. 

[made4Uo]

Oh, you have to change the url of the collection <a> to the variant

[MRamzan]

{% for product in collection.products %}
{% 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 %}
        <-- INSERT PRODUCT LOOP -->
        {% capture tempList %}
      {{colorlist | append: color | append: " " }}
      {% endcapture %}
      {% assign colorlist = tempList %}
      {% endunless %}
      {% endfor %}
    {% endif %}
  {% endfor %}
{% endfor %}

You'll need to update your product loop to change the information to update to the right variant URL's and such, but that part above is the most complex. Here is this guy who created a playlist for this where you can just copy the complete code and paste in your theme with few simple steps. 

See him here: https://youtube.com/playlist?list=PLB3Vs7gvGQUd81oa8gQvbfOc0nt1sgN62 

[Greenphones]

Thank you for the suggestion. We resolved it using a feature within the Boost Filter app.

[Jahid-KlinKode]

Hey @Jim_Zafrani, looking to show variant details on your Shopify store's collection pages? Follow the steps in this YouTube tutorial:

[MRamzan]

Here is the latest code to display variants as products on collection pages: