4 min read • Updated 2 days ago
Manage products with Webflow Ecommerce
Our recommended approach to integrate with Webflow is to use Webflow CMS to manage products, which supports unlimited variants, automatic inventory updates and more. If you already have lots of products created in Webflow Ecommerce and making a switch would be too much work, you can follow the steps below to integrate with Foxy.
Foxy loader.js Code Snippet
1From your Foxy Admin, go to Settings > Website & Products
2Copy the Foxy loader.js code snippet
3In Webflow site settings, go to the Custom Code page
4In the Footer Code text box, paste the copied code snippet and save changes
Webflow Designer Setup
1From your Webflow Designer, go to the Products Template
2Select the product name element and go to the Settings tab
3Add a new custom attribute to the element. Enter foxy-product-option in the Name field and name in the Value field
4Similar to the previous step, add a custom attribute to the product price, code (SKU) and image elements. Supported attribute values can be found below:
Name | Value | Required |
---|
foxy-product-option | name | Yes |
foxy-product-option | price | Yes |
foxy-product-option | code | No |
foxy-product-option | image | No |
Foxy + Webflow Ecommerce Code Snippet
1Open the page settings for Products Template by clicking the gear button located at the top of the designer
2Scroll to near the bottom of the settings. In the text box of Before </body> tag, copy and paste the code below:
<script type="module">
import init from "https://foxy-integrations.netlify.app/foxy-webflow-ecommerce.js";
const foxyConfig = {
frequencyGroupLabel: ""
};
init(foxyConfig);
</script>
3Click the Save button at the top right corner
4Publish the site and test
Subscriptions Setup (Optional)
The Foxy + Webflow Ecommerce code snippet will parse variant options automatically. If you sell subscriptions, follow the steps below to specify a variant option as the subscription frequency:
1Open the page settings for Products Template and scroll to the Before </body> tag section
2In line 5 of the Foxy + Webflow Ecommerce code snippet, add the variant option name for subscription frequency to the frequencyGroupLabel
property (ex: frequencyGroupLabel: "Frequency"
)
Note: currently it only supports options in the format of a number followed by a unit of time. For example, "10 days", "3 weeks", "6 month", "1 year"