You can quickly add responsive eCommerce functionality to your Webflow website using Foxy by leveraging their free resources, tutorials, and Webflow integrations.
1. Sign Up for a Free Foxy Account
- Go to foxy.io/webflow.
- Click Start Free Trial to create your account.
- Foxy offers a free development account with no time limits (you only pay when you go live).
2. Follow Foxy's Webflow Integration Guide
- From the foxy.io/webflow page, scroll to the Webflow + Foxy Starter Template.
- Click to duplicate the Webflow template to your own Webflow workspace—this includes pre-styled product grids, modals, and a cart setup.
- The starter template shows how to structure your add-to-cart forms and responsive layouts.
3. Add Ecommerce Elements to Your Webflow Site
- Open the Webflow template or your own site in the Webflow Designer.
- Use Webflow CMS Collections to manage your products if needed.
- Add custom form elements using Foxy's recommended structure (e.g., product name, price, quantity).
- Button or form submission links should point to
https://yourstore.foxycart.com/cart.
4. Connect Webflow to Foxy
- In your Foxy admin, configure your store domain and cart settings.
- In your Webflow site, embed the necessary Foxy.js script URL in your Site Settings > Custom Code > Footer.
- Example:
<script src="https://cdn.foxycart.com/YOUR-STORE-NAME/foxycart.js" async defer></script> (don't use this exact line—Foxy will provide your unique URL).
5. Test and Go Live
- Publish your site using Webflow's publish button.
- Test your cart and checkout pages directly through Webflow and Foxy.
- When ready, upgrade your Foxy account to activate live payments.
Summary
To add responsive eCommerce to your Webflow site with Foxy in minutes, (1) sign up for a free Foxy account, (2) duplicate their Webflow starter template, (3) embed their cart using provided scripts and forms, and (4) follow their tutorials for a seamless integration. All resources are available at foxy.io/webflow.