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

  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:

    NameValueRequired
    foxy-product-optionnameYes
    foxy-product-optionpriceYes
    foxy-product-optioncodeNo
    foxy-product-optionimageNo

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:

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


Need Help?

Did this article answer your questions? Need help with anything? Please click below to contact us.