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?

To integrate Foxy (formerly FoxyCart) with Webflow CMS Collections, you can build a flexible, dynamic e-commerce system where product pages and options are powered by Webflow's CMS, and purchasing is handled by Foxy's cart and checkout.

1. Set Up Your CMS Collections in Webflow

• Create a "Products" Collection in Webflow with relevant custom fields, such as:
• Name
• Slug
• Main Image
• Price
• Product Category
• Description
• Variants or Options (e.g., sizes, colors — can be added as plain text fields, multi-reference, or option lists)
• Custom Add-ons (e.g., engraving or bundles — use plain text fields or multi-reference depending on complexity)

2. Embed Foxy Buy Buttons via Webflow CMS

• Use Webflow’s Embed element to insert a Foxy add-to-cart form inside your Product Template Page or a CMS Collection List.
• Populate the embed code dynamically using CMS fields:
• name → Product name from CMS
• price → Price field from CMS
• image → Use the hosted image URL from Webflow
• code or sku → Generate unique identifiers using the Slug or a custom SKU field
• Example:
• Inside the embed: <input type="hidden" name="name" value="{{name}}">, replacing {{name}} with Webflow's CMS field variable syntax
• Important: Turn on "HTML is editable" inside each Embed block for field binding

3. Add Variant and Add-On Support

• For variants, you can add <select> inputs or radio buttons inside your embed code, using the CMS option values.
• For add-ons, include extra form inputs with their own pricing (Foxy allows price modifiers).
• Foxy reads optional price-additive fields like: name="engraving", name="bundle", with associated amounts
• All user-selected data is sent to Foxy's cart

4. Configure Cart and Checkout in Foxy Admin

• Log into your Foxy Dashboard, go to Templates and customize your:
• Cart template
• Checkout template
• Email receipts
• Enable shipping, taxes, and other logic depending on what data is passed from Webflow

5. Test with Live CMS Entries

• Add multiple products with different combinations of variants and add-ons
• Open each product page and verify:
• Buy button renders with correct options
• Selected options and pricing appear correctly in Foxy’s cart
• Use Foxy’s sandbox mode and test checkout without charging cards

6. Optional: Use Webflow Categories for Filtering

• If you use a separate Categories Collection, link products to categories with a reference or multi-reference field
• On your store page, use Webflow’s CMS Filters or tools like Jetboost.io to allow users to sort/filter by category or price

Summary

To combine Foxy with Webflow CMS, build dynamic product pages using Webflow Collections and embed custom Foxy add-to-cart forms with CMS-bound fields for pricing, images, variants, and add-ons. Utilize FoxyCart’s configurability for custom options and cart functionality, then test using sandbox mode for full flexibility.