Streaming live at 10am (PST)

Ecommerce Tutorial - Foxy.io & Webflow CMS [CLONABLE]


#1

Hey fellow Webflowers!

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

#2

Great job @matthewpmunger! It’s always exciting to see what Webflow users do with Foxy. The possibilities are endless!


#3

Thank you for sharing this.


#4

My pleasure! Always enjoy sharing knowledge, especially with this great community we have here.


#5

This is great - thanks for sharing


#6

Glad you find it useful!


#7

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.


#8

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.