Here is a live example of this implementation.
https://www.thebattlebars.com/product/large-mean-green-white-logo-flag
Nice! @Julian_Kadelski
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.
Good job. Thanks for sharing.
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.
Hey @Julian_Kadelski
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 also really like this version stacking the current size above.
I like that stacked option. Here’s an image of what I went with. I used “vw” font sizes to deal with responsiveness as the square sizes get smaller.
1 Like
Hi Julian, thank you for sharing! I would really want to take a look at the video. Do you think we can make an image gallery for each size as well?
1 Like
Hey Julian, thanks for sharing.
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?
Hey @Mark_Austin ,
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.
Let me know if this helps or if you have any additional questions.
1 Like
Thanks for the help! this worked perfectly
@Julian_Kadelski How do you go about if you have multiple t-shirts in different sizes? What would your CMS look like?
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.
thanks for the fast reply @Julian_Kadelski
Created all the multi referenced products but how do manage to show the right size buttons on each design?
This is how it looks in my cms… If i have 8 designs do i need to create 8 x this:
The size selector buttons are a collection list that references the multi-reference field.
1 Like
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! This has done the trick. Could not wait any longer for variants to arrive.
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?
Thanks!
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?
A video explaining this would be so nice, because I cannot wrap my mind about how it’d work…
This is awesome Tighe! Would you happen to have a tutorial one this ?