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.
http://bag-clone.webflow.io/product/small-hoodie-copy

CLICK HERE FOR UPDATED VERSION:
https://www.thebattlebars.com/product/large-mean-green-white-logo-flag

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
#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.


#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?