How can I combine (formerly FoxyCart) with Webflow Collections to test the flexibility and implementation of different types of products, variants, and add-ons in a store, while utilizing CMS custom fields for images, categories, pricing, cart, and product info?
TL;DR
- Create a Webflow CMS “Products” Collection with fields like name, price, images, variants, and a Foxy embed code.
- Use CMS bindings inside HTML Embed elements to generate dynamic Foxy “Add to Cart” links with product data.
- Design variants and add-ons using dropdowns or embeds formatted with Foxy’s custom option syntax.
- Embed Foxy’s cart snippet in a Webflow page and link products to a secure Foxy-hosted checkout.
- Filter product displays using CMS category references and bind product info and images dynamically from the CMS.
To integrate Foxy (formerly FoxyCart) with Webflow CMS Collections, you’ll dynamically power your store layout with CMS data while using Foxy for cart and checkout functionality. This setup allows for flexible product types, variants, and add-ons.
1. Set Up Your Webflow CMS Collections
- Create a “Products” Collection that includes fields like:
- Product Name (plain text)
- Price (number)
- Images (image or multi-image field)
- Category (option or a reference to a Categories collection)
- Variants (plain text or option fields if simple choices; or use a multi-reference to a Variants collection)
- Add-ons (can also be a multi-reference or plain text depending on complexity)
- Foxy Add-to-Cart Code (plain text or rich text to embed Foxy’s JSON/cart code snippets dynamically)
2. Prepare Foxy Product Embed Code
- Foxy uses custom code embedded in buttons or links to define product details (e.g., name, price, code, options).
- Each Add to Cart element must output a link with a structured query string like:
https://yourstore.foxycart.com/cart?name=[Product Name]&price=[Price]&code=[SKU]&category=[Category]&[Custom Options]
- Use Webflow CMS Bindings dynamically in embed or link elements to output values into the Foxy embed format.
3. Use Webflow Embed Elements for Add to Cart
- Drag an Embed component into your Product Template page (or Collection List). Build your Foxy cart link like:
<a href="https://yourstore.foxycart.com/cart?name={{Product Name}}&price={{Price}}&code={{SKU}}&[variant/custom fields]">Add to Cart</a>- Pull variables dynamically by inserting Webflow CMS fields inside
{{ }}or using native Webflow embed bindings.
4. Handling Variants and Add-Ons
- Foxy allows complex product configurations using Custom Options. Examples:
&size=Small|Large&color=Red|Blue|Green- Add-ons can be optional fields passed like:
&giftwrap=Yes|No
- In Webflow, create option dropdowns or radio buttons with standard HTML inside an HTML Embed and map those fields to Foxy option syntax.
5. Set up a Foxy-powered Cart and Checkout
- Create a Cart Page in Webflow where you embed Foxy's cart snippet (available via your Foxy admin).
- You’ll include checkout links using a Foxy-hosted secure checkout.
- Make sure your cart form includes
fc-cartandfc-itemas defined in the Foxy documentation.
6. Use CMS Filters for Categories
- On Category Pages, filter your CMS collection list by the Category reference to display matching products.
- This allows Foxy to remain unaware of taxonomy while Webflow handles sorting/filtering visually.
7. Enable CMS-driven Image and Product Info
- Bind Images, Price, Product description, and other attributes directly from the CMS on both Product Summary and Product Detail pages.
- You control all styling and layout with Webflow Designer while embedding functional cart buttons via HTML embeds.
Summary
To combine Foxy with Webflow CMS, embed Foxy’s cart logic via dynamic Webflow CMS fields, using Collection pages and HTML embeds. You gain full CMS-based control over images, pricing, and categorization, while Foxy handles secure checkout, inventory, discounts, and more. This hybrid method supports rich product variants and add-ons through dynamic URL parameters.