Anyways, I want to share a way to get around product variants until it’s released. If you have multiple product variants such as a sweatshirt with multiple sizes, you can create a cms collection for “sizes” that has a reference to the products collection. It is not ideal, and it loads a new page… but at least its something.
As an example, here is a link to an example I’m working on.
““Old Link Removed””
The size buttons are a collection list that links the product that is “referenced” from within the “size” cms collection. I know it’s not ideal, but was a big revelation for me to get started on some sites.
If you would like a more detailed post/video about how to accomplish this effect, just comment and let me know!
I’d suggest leaving the “current” product in the link list and reverse the color, i.e. black bkgd, white text. That will give the customer confidence that they’re adding the correct size.
I appreciate that this method doesn’t require custom code and is a feasible solution at the moment as long as the catalog isn’t too large.
Hey @matthewpmunger I’m unable to currently as it was done last minute and it is a multi-reference collection list that will not allow you to select the current product.
But I will definitely mess around with that when I have more time, great idea, thank you.
Here’s what I was thinking. It makes the current project first in the list, but I think that is okay for now. Just add a button inline and connect it to the current product.
I’ve gotten everything to display correctly, but I’m not sure how to make the CMS list link to the corresponding product page in that specific size. Are those set manually for every product or is it being pulled in dynamically?
The sizes are its own multi-reference collection list on the product page.
So…
You have to make a “multi-reference” field within the “Products” Collection that actually references the “Products” collection itself. See in the image below.
Then… after you create all the variants as individual products. You have to go into every “variant” and select all of the other sizes or whatever options. See in the image below.
Hey @Mark_Berman, you just repeat the process for every t-shirt design. This is not the most elegant solution, but it works. You end up having tons and tons of products as every style and size is its own individual product. I would recommend waiting until Webflow releases the variants feature, but this method works if you really really want to use Webflow E-commerce like I did.
Sorry for my ignorance. Have managed to get 1 design working. Only the buttons from 1 design are now transposed to all designs. Do i need to create 8 different collection lists or should it work with one set like shown in the picture?
No, so its just one collection list to reference the other products. I also have a “size abbreviation” text field on the products, so that is the text that displays. See image below.
The big black button is not in the collection list. The big black button is just drawing from the current product. Then, below it is the collection list of the multi-reference field for sizes in my case. Then the links are just the link to the “current product” that the abbreviation is pulling from.
If you send me a share link to your project, I can dig in and get a better idea of where you are in the process. Here is how to send a share link if you haven’t done it before.
Thanks for sharing this process. I know variants have been released now, but you lose a lot of control by using a variant vs a product. I like the idea of using other cms elements to link everything together.
In my case I have maps that come in different colors. I originally set up my store to have color variants for each map. A lot of important information gets lost or cannot be changed for the variants. For example, when I use a product on Instagram, all my variants have the same name (with different images). It would be nice to have the color name in the product name, especially since deep linking isn’t a thing yet. I’m also not a huge fan of the dropdown limitations for selecting the variant, and would rather have something visual (especially since we’re talking colors).
My current workaround is having a cms collection for “Colors” and a cms collection for “Source maps”. A bulk of the product information lives in those two collections, and is reused in the individual product, eg “Map X (red)”. This would get the source map information from “Map X” and the color information from “red” in the color collection. I can then display a list collection on the product page that matches the current source map and display the color variants that way (either as swatches or thumbnail images, etc), that link to the product, eg “Map X (blue)”.
This also allows me to display all my variants in a shopping grid. Right now you can only display a product and you can’t surface variants. So if you have 4 products with 12 variants, you could have a product grid of 48 items instead of just 4. Think of a Bonobos shopping page where you see a grid of shirts, but they’re all just the same parent shirt product with different colors/styles.
Are there benefits to product variants that I’m missing out on? I’m wondering before I commit to the workaround method and create 48 products in this way. I honestly don’t think it saves time either way, since you have to populate different info on the variant section (thumbnails, dimensions). Thoughts?
I know this is an old topic, but I’m in the same boat as some of you. I want the user to be able to show different product variants (in this case different t-shirt sizes) as buttons rather than in a dropdown menu.
@tighef Your explanation makes sense—thanks! My question is, once the design is set up, how do you get the cart to update when the user selects which product they want?
