Display all product variants as single products in collections

Retired Boards Appdev Customers Discounts And Orders
1

Dear All,

I have a product with 2 colors (pink and blue) and use the color swatches and variants in one master product.

This works well and look nice but my problem is that I would like to display the product in the collection 2 times, 1 time with the blue, the other with the pink color. It should still have the same master product and stock but only display both variants.

Is there an “easy” way to display the product twice?

Thank you in advance.

Kindest regards,

Karsten.

2

You could simply have 2 different products.

Otherwise, you’d need some templating that makes a fake collection page out of said product variants.

Both are doable!

3

Yes ;), but I do not want to create a 2nd product as I get problems with the inventory at least when I keep the two color swatches, which I normally would like to do (using the nice functionality from shopify 2.0).

How does this fake collection page work?

Thank you in advance.

Kind regards,

Karsten.

1 Like
4

a typical template for viewing a collection renders all products within a collection.

we can fake a collection by:

1)create a collection page of one product.

  1. embed the product into the collection template.

  2. change the collection template to loop through the variants in the product ( not the products in the collection) and render each of its’ variants (as a fake product).

  3. for linking to the product form/buy page – you can simply link to the normal product template with the variant id in the link ?variant=123456789

  4. remove any option field selectors for said variant in the product-form page (it would be redundant to keep them)

1 Like
5

Hey, @Manali1 .

Thank you for reaching out! Thank you, @rustcity , for the help.

I suggest creating a second product if you would like to have both shown on the product or collection page. Due to the color being a variant, it won’t show twice. You could hire a Shopify Expert to complete this customization. Experts are trusted third-party developers who can help with complicated tasks on your website. I will provide this feedback to our team as I think it would be a great feature to have so that your customers can view your variants all on the collection pages.

Please let me know if you have any further questions!

4 Likes
6

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.

7

I will recommend a video to follow where you can just copy and paste the code according to the theme which you are using. Same thing I had needed in my store. There was a paid App and that was charging 30 USD each month so I was frustrated also.

Here is the playlist of videos with different themes: https://youtube.com/playlist?list=PLB3Vs7gvGQUd81oa8gQvbfOc0nt1sgN62

1 Like
8

Hi,

Will this work with the Focal theme? I’m having so much trouble trying to have my variants displayed on my collections page.

9

For Focal theme you can follow below video:

10

What if the variants aren’t colours but flavours?

11

We can separate the product with any type of variants like size, color, flavours etc.

12

Have you got the code available for the Turbo 7.0 theme?

13

I can create it for you. Add me as a staff.

1 Like
14

Hi! Thank you so much for providing the above blog post! It was extremely helpful! :blush: I am now wondering how to change the number of products displayed on each page of the website. Before I added the above code to display all of the variant colors as separate products there were consistently 16 products on every page. But now that I am showing every variant color some pages have 30 items, some have 25, and it is no longer consistent because each product has a different number of variant colors. Is there a way to fix this so all of the variant colors are still shown as separate products but each page has a uniform number of products displayed? Hopefully my question makes sense. Thank you so much for your help.

15

Hi! Do you have instructions for the CRAFT theme? :slightly_smiling_face:

16

Hello,

I am trying to list my variants as different products on collection page in Venue Theme.

Please guide me to do the same.

17

I will have to check your code. If possible then please add me as staff.

18

Good afternoon,

Do you know to get this to work with the Prestige theme?

Thanks,

Sam

19

Yes I can do it for you.

20

Here is the solution without App:

You can find this feature for any theme:

https://www.youtube.com/playlist?list=PLB3Vs7gvGQUd81oa8gQvbfOc0nt1sgN62

Here is an example: