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

elemensisdecor
Tourist
9 0 8

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.

 

1.png

2.png

3.png

 

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.

Replies 7 (7)

made4Uo
Shopify Partner
3821 716 1153

Hi @elemensisdecor,

 

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

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
elemensisdecor
Tourist
9 0 8

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
Tourist
9 0 7

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_
Shopify Partner
5 0 5

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

chefJuanPi
Shopify Partner
22 1 9

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"

chefJuanPi_0-1681577464224.png

you can use other parameters depending your needs.

 

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

chefJuanPi_1-1681577997667.png

 

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
Visitor
1 0 0

@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
Shopify Partner
96 6 14

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


Jak | Top Rated Shopify Dev @ Upwork
- Shopify Blog
- Check my youtube: Hey Jak
Was your question answered? Mark it as an Accepted Solution.