How to create collections of variants (or something similar)?

[elemensisdecor]

Hello everyone. I've been selling rugs online and I haven't found a solution to what seems to me a basically simple thing that most rug sellers have on their website.

Each rug design has many variants (colors, sizes, shapes etc).

I want to be able to create collections/filters of product variants.

For instance, I want to add a page in my menu bar that shows only blue rugs. However, since 'color' is a variant, I cannot create a collection for it (only whole products can be added to a collection).

When I use tags, the product thumbnails are not necessarily showing the blue variant of the product so it makes no sense (the user will expect to see blue products in the thumbnail). The same applies to variations like 'round', 'runners', 'doormats': if I use a tag for doormats, the user will see a big rug in the thumbnail and think theres something wrong with the website. Besides, since all my models have the same size and color variations, each product would have all the tags and therefore lose the purpose of tagging.

Websites like Rugsusa and Ruggable   do this very well, they have a way of treating variants as stand alone products for showcasing and filtering. See below.

I've been searching for an app that does this and have not been able to find, and still all major rug retailers have this, please help.

[made4Uo]

Hi @elemensisdecor,

This requires code customization. I am able to achieve this though. You can check the video for more info. 

[elemensisdecor]

Thanks @made4Uo 

I just bought your code but it only solves half of the issue. With the code I can show variants on the collections page but I cant create a collection that targets a specific variant type across multiple products.

For instance, if I have product A, B and C and each has 3 colors: red, blue and yellow, I want to create a collection called BLUE, which shows only the blue variant of A, B and C. The easy way to think about this would be if I was able to add a tag to a collection. Could you help me with that?

[Amiran88]

Did you find a solution for that? that is exactly the issue I have and I would love to hear if you managed to find a solution.

[Emm_]

This is exactly what I'm trying to achieve too, I would love for Shopify to address this in future releases.

[chefJuanPi]

Hi, Exist multiple ways to do this, my favorite is a mix using collection, collection metafields and custom code.

Example Blue Rugs:

create an automated collection. for this example, I use 2 parameters:

variant's title contains "blue"

Product type is equal to "rug"

you can use other parameters depending your needs.

after that create  a collection's metafield that will help you to find the right variant.

In this example, I choose a variant title. so I will write the same text "blue" as I write on the automated definition.

This way you can create other variations easily like a collection of "Red carpets" or "small mugs" or anything you need. 

Next step you should validate the collection to be sure your definition give you the right products.

there we arrive at the Best part CUSTOM CODE:

Depending on the complexity of your theme you can edit the default code (collection template, section, and snippets) or you can create new files.

I prefer to create new files with that I'm 100% sure my changes will not affect other collections on the site.

I recommend you create a new template based on your default collection template. you can name it collection.byVariants.json

Come back to the collection and select the template.

I can't give you an exact code because will depend a lot on your theme but the base principles to apply will be the same with any theme.

  BASE PRINCIPLES:

- you should iterate on each variant of each product on the collection and use the collection's metafield to find the right variant.

- use the variant components to:

   show the product images

   include the variant Id on the product page link to go directly to the right variant like this:

   THE_PRODUCT-URL?variant=VARIANT_ID

  you can create a button buy now directly on the collection page using the variant id to cut steps for the customers.

[cocopops]

@chefJuanPi   Is this something you could help us out with as a solution? Essentially, we want to be able to create Collections based off of color variants across multiple Products without the Shopify constraint of including all color variants. I think what you outline above might be the solution we need. 

If you are open to work, let me know and I can outline our needs in more detail! 

[Hey_Jak]

How To Create Collections Of Variants in Shopify by Heyjak. Here is a free solution:

[sbaldwin]

Hi - Thanks for the solution - I have implemented most of the steps and it works to a point but if you take a look at the category I have created - I only get the sunglasses with clear frames and green lenses but not the sunglasses with black frames and green lenses - the password is create

https://kukuna.co.uk/collections/green

[sbaldwin]

Also, I have just tried to create a blue category but it hasnt picked up the blue lenses?

[tansezer]

You can also do it with 3. party apps. I'm the owner of this app Stamp - Variants on collection  which helps merchants to separate variants on the collection page. You can also customize settings per collection to show specific variants by filter or manually. I share the information if anyone is looking for a solution to show variants separately on the collection page.