Display variants on collection pages

Highlighted
New Member
2 0 5

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.

Highlighted
New Member
2 0 5

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

 

 

 

 

Highlighted
Shopify Partner
3 0 6

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.

Highlighted
Shopify Partner
12 0 1

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
Highlighted
Tourist
10 0 2

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.

Highlighted
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
Highlighted
Excursionist
15 0 12

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

Highlighted
Excursionist
21 0 3

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

Highlighted
Trailblazer
245 1 51

@Olivier7

 

Fyi, I replaced the code completely - but for the Minimal version - and it worked fine except that grid had blank spots every so often instead of products. 

0 Likes
Highlighted
Tourist
3 0 0

Hey! I also used this code and it worked great! The only thing is  when I click on the second variant image the product page opens up to the first variant every time. Anyone know if there is a way to make the product page open up to the variant image I am clicking on from the collection page?

0 Likes