Resources
Use the following links to get a head start on integrating Foxy with your Webflow site.
Demo
Read-only
Cloneable Project
https://webflow.com/website/Responsive-Ecommerce-Template
Foxy Code Snippet
To display the sidecart when a customer adds a product to cart and to store customer sessions, you must first load the needed Foxy loader file into your website.
- 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
To get started, you'll create a CMS Collection to add your products to. This collection can be called whatever you'd like (ex: Products, Shop, Store, etc.)
Add fields for any data and/or media needed to build out your product pages (ex: price, image, sku). These same fields can be used to dynamically populate needed information for Foxy products. At minimum, the Foxy add to cart form needs a product name and price.
Add To Cart Form
Next, you'll use Webflow's Form Element to design your add to cart form. Add to cart forms can be placed on any page in your Webflow site. The submit button is the only required element, but feel free to add any needed form fields (ex: a number input field for Quantity). Once you have your form designed, please follow the steps below to connect the form to CMS data and Foxy:
- 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.
Inventory
Automatically update product inventory counts after each successful transaction with our Webflow CMS Inventory Integration.
Product Variants
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.