Recently I found a need to explore and push the limits of what I knew could be done by combining @foxy (formerly FoxyCart) with Webflow Collections. After completing my test, it seemed like a nice idea to polish it up, add some step-by-step instructions, and share it with all of you.
Note that this is not a full ecommerce solution build as I didn’t take time to do things like product categories, featured products, descriptions, photo galleries, or product pages. Read below to see what all I did cover in this project.
If you do check out the project, I hope that you learn something (just as I did) or that it helps you with future client projects. Happy designing!
Project Details
The goal of this project was to test the flexibility that Foxy provides when implemented using the Webflow CMS. Specifically how is it possible to mix’n’match a combination of variants and add-ons to a store of different types of products. Some of these big box ecommerce solutions either can’t handle this challenge or charge higher plan pricing to do so.
Project Features
Products powered by Foxy and Webflow CMS
CMS custom fields for product images and categories
Checkout and payments powered by Foxy
CMS plain text fields power the Foxy pricing, cart, and product info
Unused CMS fields are automatically hidden on the published site
Dynamic product price based on variant and add-ons selected
Great work @matthewpmunger. Really well explained. Have you tried using Plasso with Webflow before? Heard it’s another good option that’s supposed to be a bit easier to set up.
Hey @dkc good question and thank you for the compliment.
I have not done a project with Plasso, but I have played around with it some. On the surface I know that Plasso doesn’t seem to handle “add-ons”, only variants, which was a main reason for this Foxy project from my end. I needed products that combined different amounts of variants and add-ons.
This solution with Foxy was the only way I’ve found that works without the need for a development team. It’s kind of an edge case use, but I have a client with retail and wholesale products that vary greatly in scope. For me as a designer (who can manipulate JS but not write it from scratch) it took some digging around and help from Foxy (very helpful support staff btw) to get this solution functional. That is why I felt a need to share it to give other designers a jumpstart.
Both platforms will have their merits based on the needs of the client. Personally I love exploring apps and saas to find out the benefits of one or the other in certain situations. Hopefully this project sheds light on one of those situations and a solution.
HI, nice work thanks, I copied the codes of the embed code for the products, and imported the same exact cms fields, but when i publish the website i can’t choose between options in all menus, also when I pasted the Foxy code to my footer website after changing the name of my existing foxy shop the codes appear on the bottom of my website pages. So it didn’t work for me:( what the reason could be?)
Hi @Faisal_Ram.
Thank you for the read-only link. Can you link to a published/public product page where you’re experiencing the issue? You’ve got lots of pages there, and I want to make sure I’m looking at the right one.
No nothing private i copied that example of the shop, and tried to modify it to my foxt account, but when I preview of launch it i can control or open the dropdown lists of options like colors and so on. Have you found the hidden selection? I hided it because the page got so crowded:) sorry I don’t have a computer access now… i remeber the selection was called product tests or something:)
Hi @Faisal_Ram.
Thank you for sending more information. Probably makes sense to hop on a quick call. Please DM your availability this week (I’m in Central time).
Hi @Faisal_Ram.
Thank you for confirming. Please DM at your convenience. A quick phone/Skype call will go a long way and help us solve this for your quicker.
I want to say thanks for the great tutorial and help!
I followed the instructions on implementing variants/add ons and added the code to footer…however the dynamic changing of the price when you choose a different option, isn’t quite working. I’m still in testing/trial mode of the foxy plataform so I understand some things aren’t going to push through to full purchases but I think this bit of is supposed to work, no?
