Manage products with Webflow Ecommerce

Foxy loader.js Code Snippet

1. 1

   From your Foxy Admin, go to Settings > Website & Products

2. 2

   Copy the Foxy loader.js code snippet

3. 3

   In Webflow site settings, go to the Custom Code page

4. 4

   In the Footer Code text box, paste the copied code snippet and save changes

Webflow Designer Setup

1. 1

   From your Webflow Designer, go to the Products Template

2. 2

   Select the product name element and go to the Settings tab

3. 3

   Add a new custom attribute to the element. Enter foxy-product-option in the Name field and name in the Value field
   

4. 4

   Similar 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

1. 1

   Open the page settings for Products Template by clicking the gear button located at the top of the designer
   

2. 2

   Scroll to near the bottom of the settings. In the text box of Before </body> tag, copy and paste the code below:

   Copy Copied

   <!-- FOXY + WEBFLOW ECOMMERCE -->
   <script type="module">
     import init from "https://foxy-integrations.netlify.app/foxy-webflow-ecommerce.js";
     const foxyConfig = {
       frequencyGroupLabel: ""
     };
     init(foxyConfig);
   </script>

3. 3

   Click the Save button at the top right corner

4. 4

   Publish 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:

1. 1

   Open the page settings for Products Template and scroll to the Before </body> tag section

2. 2

   In 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"