Streaming live at 10am (PST)

[Solution] Work around for Webflow Ecommerce product variants


#1

Hey Webflowers!

Sorry, don’t know if that’s a thing…

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””

CLICK HERE FOR UPDATED VERSION:

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!


Ecommerce workaround for Size and Add-Ons
Product variation
How is this Webflow store able to add sizes?
Size selector at the Product Page
#2

Thanks for the help, I could show pictures of how to do it or video thanks !!


#3

Here is a live example of this implementation.

https://www.thebattlebars.com/product/large-mean-green-white-logo-flag


#4

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.


#5

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.


#6

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.


How to make this ecomm page design?
#7

@matthewpmunger

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.


#8

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?


#9

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?


#10

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.


#11

Thanks for the help! this worked perfectly


#12

@Julian_Kadelski How do you go about if you have multiple t-shirts in different sizes? What would your CMS look like?


#13

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.


#14

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:


#15

The size selector buttons are a collection list that references the multi-reference field.


#16

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?


#17

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.


#18

Thanks! This has done the trick. Could not wait any longer for variants to arrive.