Streaming live at 10am (PST)

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

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
8 Likes

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

Thank you for sharing this.

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

This is great - thanks for sharing

Glad you find it useful!

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.
Feel free to post or DM your Webflow Read-only link and public link. We can then do some troubleshooting for you. :slight_smile:

Thanks,
Josh

thanks Josh, here is a readonly link https://preview.webflow.com/preview/byggengros?utm_source=byggengros&preview=336be5c3ce901bc84809871afe6ba372

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.

Thanks,
Josh

It’s the page named Test, the selection is hided i think:) can you find it or shall we wait until tomorrow?)

Hi @Faisal_Ram.
Thank you for that info. I checked the hidden “testing” page and am only seeing things connected to Webflow’s Ecommerce.

Please send more on how I can duplicate the issue. Feel free to DM the info if you want to keep it private.

Thanks,
Josh

No nothing private :slight_smile: 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).

Thanks,
Josh

Hi i displayed again the section that needs fixing in the page Testing

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.

Thanks,
Josh

@foxy @matthewpmunger

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?

Read only link: https://preview.webflow.com/preview/n3tworth?utm_source=n3tworth&preview=9da57560440c1ff741d3cdaebeea3365

The pages are located in Market>Home>(you can pick any product, there’s only a few)

Thanks for your help!

1 Like

Hi @n3tworth.
I just replied to your email. I’ll take a look real quick and see what’s up. :slight_smile:

Thanks,
Josh