Display variants on collection pages

New Member
2 0 3

Hello,

We have 5 styles of products with 4 colour options within each style. In the future we will have more options, including other colours and multiple sizes within colours.

From a stock perspective, we would like this to run from native Shopify functionality, so we can manage at SKU level.

We are using Advanced product options in addition, to give us file upload ability amongst other things. 

What we are trying to work out is how we can show all colour variants on a collection page. We can only seem to do this if we treat each sku as a simple product. This however removes a users ability to select alternative colours once they are on a product page.

We would appreciate advice on how best to handle this.

2 Likes
New Member
2 0 3

We have found these two threads but are using the Narrative theme so are unsure if they will work for us.

This one to show variants on collection pages:

https://ecommerce.shopify.com/c/ecommerce-design/t/show-variants-as-separate-products-on-collection-...

And this one to show multiple product images per variant:

https://ecommerce.shopify.com/c/ecommerce-design/t/multiple-images-per-variant-484683

 

 

 

 

1 Like
Shopify Partner
3 0 4

Did you ever figure out how to make this work??? I am trying to do something similar. Not sure why this isn't a more frequent question.

3 Likes
New Member
7 0 0

Hello,
you can use this app to show your products variants in your collections. In app configuration, you can also set “add to cart” button to show for each product in collections.

0 Likes
Tourist
10 0 1

Hi,
 
It's an old thread but probably many merchants are still asking the same question about listing product variants on collection pages. We have recently developed an app which allows to list variants as separate products on collection pages. Here is a link: https://apps.shopify.com/show-variants-on-collection-page . With the app you can automatically show all available variants or select variants to be displayed per collection.
 
Here is a link to our demo store if you would like to see the app in action.

1 Like
New Member
2 0 0

Hey I tried your app, although it is the app that we require for our use case however it wasnt working correctly. the swatches were not correctly linking to each variant product in collection pages. If I change the colour on product it would change the selection on adifferent product


@gravitysoftware wrote:

Hi,
 
It's an old thread but probably many merchants are still asking the same question about listing product variants on collection pages. We have recently developed an app which allows to list variants as separate products on collection pages. Here is a link: https://apps.shopify.com/show-variants-on-collection-page . With the app you can automatically show all available variants or select variants to be displayed per collection.
 
Here is a link to our demo store if you would like to see the app in action.


 

0 Likes
Excursionist
11 0 5

no need to waste $30/m on @gravitysoftware  rent-seeking software, just use this code: https://dylanjh.com/blogs/19-show-all-products-as-separate-variants-on-the-collection-page-of-the-de... I personally just added the code to the end of my product-card-grid.liquid file without any other steps and it worked fine. Depending on the theme version ymmv

2 Likes
Tourist
8 0 1

Hi E-V-O,

So you just added Dylan's Code to the end of the product-card-grid.liquid? Without Replacing the whole Code?

Because that is what I did and some things don't work correctly

1 Like