Displaying Variants as products in collection pages

Store Design

Topic summary

Core Issue:
Users want to display product variants (e.g., different colors) as separate items on collection pages, with each showing its specific image and linking to the correct variant when clicked.

Solutions Discussed:

  • Custom Code Implementation: Multiple users share Liquid code snippets that loop through variants and conditionally display them based on collection handles or option values. The logic involves assigning custom variables to match variant images and URLs to specific collections.

  • Paid App Solution: The “Show Variants on Collection Page” app ($29.95/month) is recommended as a no-code alternative with automatic configuration and strong support.

  • Theme Limitations: No built-in theme natively supports this feature. Implementation requires editing Liquid files, with code placement varying significantly between themes (Dawn, Turbo, Debut, District, etc.).

  • Technical Challenges: Users struggle with:

    • Locating correct files (product-grid-item vs. product-card-grid)
    • Handling products with multiple options (e.g., Device + Case Finish)
    • Making code work across different theme structures

Additional Tools Mentioned:

  • Ultimate Filter & Search app for variant-based collections
  • Boost Filter app
  • YouTube tutorials with step-by-step implementations

Status: Discussion remains active with ongoing requests for theme-specific guidance. Most solutions require either custom development skills or paid apps.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
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
2

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

4 Likes
3

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

4

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

5

@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

6

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.

7

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!

8

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

9

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

1 Like
10

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

11

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.

12

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=contextual&utm_medium=shopify&utm_source=admin

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

13

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!

14

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

15

Hi can I ask where you input that code?

thanks

16

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

17

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?

18

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!!

19

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!

1 Like
20

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.

1 Like