Streaming live at 10am (PST)

Webflow E-Commerce - Adding Customization Options to product?

How do you go about customizing add-ons in web flow e-commerce?

For example, say I have a subscription product called Weekly Meal Plan.
Weekly Meal Plan has Ingredients

  1. Choose Your Base (rice, quinoa)
  2. Choose Your Protein (beef, chicken, fish, pork)
  3. Choose Your Veggies (up to 3)
  4. Choose Your Beverage (Soda, Tea, Beer, Juice, Milk, etc)
  5. Choose Your Days (up to 6) (Monday,…Sunday)
  6. Choose Your Delivery Time (2-7pm $0.00, 9-11am $5.00)

etc…

Basically, some of these options have added cost ($1.25 or +$2.50 Advocado Quarter or Half).

Does webflow support this?

Hey man, hope this isn’t too late! I think I’ve figured it out. I was trying to create a product that had a fixed price and a product that let people add on options that increased the final price. Here’s what I did:

  1. In the products page I created a products grid with all of my basic options (name, add to cart ect).

  2. I then nested a second cms collection, within that product grid, that was to pull its data from the products database, however I made sure that it only pulled in products that had a switch, called “add ons”, turned on. This is an example of using the conditional display settings (found on the right hand side in the settings tab). This let me display products that had “add on” switch = true. This lets customers add additional items to cart, however it doesn’t all go through in one order (only downside).

  3. I then selected the entire product grid and duplicated it. On the second grid I deleted the nested collection list and set the whole grid to only display on the fixed box items.

  4. I finally selected the original product grid, with the nested collection list, and set it to display only on products that were to have add ons.

Using conditional filtering, you can theoretically create several different product pages that have specific display settings. I couldn’t find any native feature that support this, but this really helped me out a lot!

1 Like

Hey @sanindo would it be possible to view a read only version of this page?
I’m trying to get something like this to work because I sell expensive products and customers demand options!
Thank you for your original explanation!

Hey man! This project didn’t need this feature anymore so I don’t have it handy. One thing to note about this workaround is it puts each option as an individual item in the basket - if this is ok with you then I’ll recreate it today?

Hey Steven,

Thank you for your help! It would be useful to see how you create this but take your time. I don’t need it right away.

The reason I have been asking is because it would allow my company to sell products which require a LOT of options online. I simply am the one responsible for marketing and pricing in the online e commerce sector, and I’ve been only doing webflow for about a month so I’m really behind.

Thank you for getting back to me so quick!

Jeremy Spula
Project Manager
FORHOMES LTD.
991 Matheson Blvd East unit #6
Mississauga ON L4W 2V3

office 905 212 9499
cell 416 970 2618
fax 905 212 9491
www.forhomes.ca
jeremy@forhomes.ca

-Do it right the first time-

Custom Door Fabrication.
Authorized Dealer of REHAU and Laflamme Windows and Doors Systems.
We specialize in Professional Sales and Installations.

Help the environment - don’t print
what you don’t need.
This email and any files transmitted with it are confidential and intended solely for the use of the individual or entity to whom they are addressed. If you have received this email in error please notify the sender. Please note that any views or opinions presented in this email are solely those of the author and do not necessarily represent those of the company. Finally, the recipient should check this email and any attachments for the presence of viruses. The company accepts no liability for any damage caused by any virus transmitted by this email.

Hi all.
Josh from Foxy here. With our seamless Webflow integration, you can provide an unlimited number of variant groups and options in your add to cart form. In addition, this supports the ability to modify the product price, sku, weight, and category, based on chosen options.

We can even show you how to manage the variant options (and modifiers) with Webflow CMS. More info about our Webflow integration can be found here: https://foxy.io/webflow

We offer an unlimited free trial and free one-on-one onboarding. Please don’t hesitate to reach out if you have any questions or need help getting started: hello@foxy.io

Thanks,
Josh

Hi Jeremy. Here’s the read only link. You’re going to want to go to “Products Templates” CMS page. Ive basically added a switch, with conditional filter = has add on, that wraps the “Please choose your add ons” section. I’ve then added a CMS to the drop down menu that has another switch with conditional filter to only show products that have switch “add on” enabled.

Let me know how you get on with that. Alternatively you could use Foxy, they have a lot of great Webflow Plugins, but this is a workaround that uses native features.

Options Project

Forgot to say, only optimised for desktop - might look terrible on everything else :sweat_smile:

Thank you for your help Stephen!

1 Like