Displaying Variants as products in collection pages

Tourist
4 0 1

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

1 Like
Shopify Partner
1346 22 208

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

https://sections.design tips, tricks & Shopify sections
1 Like
Shopify Staff
Shopify Staff
335 31 77

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

May | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Shopify Partner
1838 173 601

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

I turn coffee in to code - since 1998
0 Likes
Shopify Partner
19 0 7

@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

0 Likes
Shopify Partner
1346 22 208

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.

https://sections.design tips, tricks & Shopify sections
0 Likes
New Member
1 0 0

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!

0 Likes
New Member
2 0 0

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

0 Likes
Shopify Partner
1346 22 208

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

 

https://sections.design tips, tricks & Shopify sections
0 Likes