Shopify themes, liquid, logos, and UX
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.
Hi @elemensisdecor,
This requires code customization. I am able to achieve this though. You can check the video for more info.
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?
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.
This is exactly what I'm trying to achieve too, I would love for Shopify to address this in future releases.
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.
@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!
How To Create Collections Of Variants in Shopify by Heyjak. Here is a free solution:
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024