Use the following links to get a head start on integrating Foxy with your Webflow site.
Foxy Code Snippet
- In the Foxy admin, click on the Sample Code link under the Store column in the navigation at top.
- Copy the code snippet from Step 1.
- In Webflow, go to your Site Settings and click on the Custom Code link at top.
- Paste the copied code snippet into the Footer Code section and save changes.
CMS Collection Setup
Add To Cart Form
- In Webflow's Designer, select your add to cart form and go to the Form Settings panel.
- In your Form Settings, set the Action as https://CHANGE.foxycart.com/cart (replace CHANGE with your Foxy subdomain, found here )
- Set the Method as POST.
- If you have a Quantity field, set the Name of the field as "quantity" (lowercase q), the Text Type as "Number", and make it required.
- Anywhere inside of the Form, add an HTML Embed element.
- Copy/paste the snippet from here: https://pastebin.com/raw/7Q2bXTCH into the HTML Embed element.
- Replace each ALL CAPS value with the corresponding CMS Field,.
- In your Products Template Settings, copy/paste the snippet from here: https://pastebin.com/raw/K23wZHvW into the "Before </body> tag" section.
- Publish and test.
Extending Your Add To Cart Form
Your add to cart form can be as simple or as complex as needed, depending on your use case. The following information covers different ways to extend your add to cart form.
Automatically update product inventory counts after each successful transaction with our Webflow CMS Inventory Integration.
Product variants (ex: Size and Color) can be handled a few different ways with Foxy + Webflow CMS. For most use cases, this article should get you pointed in the right direction.