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

Community resources Webflow Tips
21

Hi again @n3tworth.
Mind linking to a published page of one of the products?

Thanks,
Josh

22

No probs! @foxy

https://www.n3tworth.com/products/logo-design

23

Hi @n3tworth.
Thank you for confirming. Looks like the issue is that in your loader.js snippet (in your Custom Code section in Webflow) youā€™re using our demo store subdomain ā€œfoxy-storeā€. That should be your store subdomain ā€œn3tworthā€. Letā€™s see if changes that fixes things.

Thanks,
Josh

1 Like
24

Woowwww! How did I miss that :expressionless:

Thanks so much! It works now. Iā€™ll email you when I stumble againā€¦itā€™s coming I can feel it lol but your help is much appreciated!

25

@n3tworth
No worries at all. Weā€™re here if you need anything else.

Thanks,
Josh

26

Iā€™ve followed this tutorial, and Iā€™m not sure why itā€™s not working. Itā€™s showing the field for quantity, and that works fine, puts it in the cart, etc. But itā€™s not showing the fields for my variations. I only have the variations set up for now on the half zip hooded shirt for now, but the Label is Size, and the CODE is Small, Med, Large ect. But isnā€™t showing either the word ā€œSizeā€ or the dropdown list to pick the size.

https://preview.webflow.com/preview/wonrategear?utm_medium=preview_link&utm_source=designer&utm_content=wonrategear&preview=66f84b83bc93091285c248650092f196&pageId=5d491e4b3cf49e8479ecc610&itemId=5d49e6ce4c6366664c89e776&mode=preview

27

Well I figured it out. The script was nested inside the same container as the built-in Add To Cart button, and for some reason that was messing it up. I donā€™t know.

However, I just thought of a new question that really has me stumped. Leā€™t say Iā€™m out of stock on certain sizes. Is there any we with this setup to show that and prevent a customer from purchasing it?

28

Hi @magicpuncher.
Sorry for the late reply. Glad you got the issue resolved. I wanted to clarify that this setup is one of many ways to integrate Foxy and handle variants. In fact, we have an even simpler way we can walk you through.

To manage inventory for variants, there are a couple of approaches. Both of which will require a parent collection and child (variant collection).

Weā€™re happy to walk you through things. Feel free to message or send an email to hello@foxy.io.

Thanks,
Josh

29

Thanks for this great tutorial! Everything is working perfectly. Do you have any tips on how to go about styling the elements of the embed? Or are we restricted to Webflowā€™s default styles on this solution? Iā€™d like to have all of the individual field styled to my clientā€™s branding, and havenā€™t figured out how to do it yet. Any insight you can offer would be really helpful.

30

Hi @MKDWebSolutions.
Josh from Foxy here. Send us a quick email with details on what youā€™re after and weā€™ll get you pointed in the right direction: hello@foxycart.com

Thanks,
Josh

31

Hi @matthewpmunger this is BRILLIANT, thank you! Do you know how I can display a Product description and product code in the script somehow too please? I have descriptions and product codes in my CMS collection for every product but unsure how to make them appear on the page via the code.

Any help is much appreciated!

32

Hi @ConnectCreativeDes.
Any data can be passed to Foxy or to your product page. Mind sending a quick email to hello@foxycart.com with your Webflow Read-only link and more details on what youā€™re after? Weā€™ll get you taken care of.

Thanks,
Josh

1 Like
33

Many thanks Josh, appreciated. Iā€™ve managed to solve the above and its working great now. I just have one question regarding product code generation, which Iā€™ll email you directly about. Many thanks.

34

Hi @ConnectCreativeDes.
Awesome! Weā€™ll watch for your email.

Thanks,
Josh

35

Hello @matthewpmunger , very very nice!

Just a question, is it possible to do checkboxes with product variant in webflow without using foxy? I will be using Foxy later probably but I want to test the website first, and I would love to choose product variant with checkbox as you did.

thank you.

36

Hi @ollo.
Conditional checkbox options are possible with Foxy + Webflow. Really any type of options and add-ons are, all controlled with Webflow CMS. Also, to confirm, Foxy offers an unlimited free trial so you can build and test things without any risk. Feel free to send us a quick email if we can help with anything: hello@foxycart.com

Thanks,
Josh

37

Hi @matthewpmunger ,

I am using your tutorial to add custom order options for my companies site I nearly have it completely implemented, but now when I publish the page I get ā€œ$NaNā€ instead of the price for the item.

I also am unable to get the drop down options to appear. Any chance you can help?

My share link: https://preview.webflow.com/preview/kb-farms?utm_medium=preview_link&utm_source=designer&utm_content=kb-farms&preview=b78e8ebbfd12fbdd7fa38ad79679aa62&pageId=5ea74e350f3db091393b2a8b&mode=preview

Thanks!

38

Hi @Jasen_Henderson.
Josh from Foxy here. Mind sending us a quick email (hello@foxy.io)? While Mattā€™s tutorial works great, it adds some extra un-needed steps for most use cases. So we can help you streamline the setup and management side of things as well as resolve any issues youā€™re running into.

Thanks,
Josh

39

@matthewpmunger

Please give me the clone-able link of this project

40

Hi @Datta.
Josh from Foxy here. Feel free to email us info on your specific needs as well as your Webflow Read-only Link and weā€™ll get you updated instructions: hello@foxy.io

Thanks so much!

Josh