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 and variants created in Webflow Ecommerce and making a switch would be too much work, you can follow the steps below to integrate with Foxy. 

Delete

Some limitations on this integration approach: 

  • It only supports select as the variant selector (buttons are not supported). 
  • Inventory in the Webflow Ecommerce Products collection won't get updated automatically since the sale will be via Foxy, but you can utilize automation tools like Zapier or Make to achieve that.

Add Foxy code snippet

  1. Go to the Sample Code page in the Foxy admin, and copy the code snippet in Step 1
  2. In Webflow, go to your site's settings, then navigate to the Custom Code section
  3. In the Footer Code text box, paste the copied code snippet and save changes
  4. In Webflow Designer, go to the Products Template
  5. Select the product name element, in the Style panel, add a class name foxy-product-name in the Selector field
  6. Similar to the previous step, for the product price, image and code (SKU) elements, add class names foxy-product-price, foxy-product-image, and foxy-product-code correspondingly
  7. If there are any product options, make sure to have a label element for the name of the select field, and it needs to be placed right above the select field
  8. From the Pages panel, open the page settings for Products Template by clicking the gear button
  9. In the text box of before </body> tag, paste the code below:
    <script>
      var FC = FC || {};
    
      FC.onLoad = function () {
        FC.client.on("ready.done", function () {
          document
            .querySelector(".w-commerce-commerceaddtocartbutton")
            .addEventListener("click", (e) => {
              e.preventDefault();
    
              const name = document.querySelector(".foxy-product-name").innerText;
              const code = document.querySelector(".foxy-product-code")?.innerText ?? "";
              const image = document.querySelector(".foxy-product-image")?.src ?? "";
    
              let price = document.querySelector(".foxy-product-price").innerText.replace(/[^\d,.]/g, "");
              if (price.charAt(price.length - 3) === ",") {
                price = price.replace(/[.]/g, "").replace(/[,]/g, ".");
              }
    
              const quantity = document.querySelector(".w-commerce-commerceaddtocartquantityinput")?.value ?? 1;
    
              let cartUrl = `https://${FC.settings.storedomain}/cart?name=${encodeURIComponent(name)}&price=${price}&code=${encodeURIComponent(code)}&quantity=${quantity}&image=${encodeURIComponent(image)}`;
    
              const variantSelect = document.querySelectorAll("[data-node-type='commerce-add-to-cart-option-select']");
    
              const variantName = Array.from(variantSelect).map((select) =>
                encodeURIComponent(select.previousElementSibling.innerText)
              );
    
              const variantValueName = Array.from(variantSelect).map((select) =>
                encodeURIComponent(select.options[select.selectedIndex].text)
              );
    
              const variantValue = Array.from(variantSelect).map((select) =>
                encodeURIComponent(select.value)
              );
    
              if (variantSelect.length > 0 && variantValue.includes("")) {
                return;
              } else {
                variantName.forEach(
                  (name, index) => (cartUrl += `&${name}=${variantValueName[index]}`)
                );
    
                FC.client.event("cart-submit").trigger({
                  data: { cart: "add" },
                  url: cartUrl,
                });
              }
            });
        });
      };
    </script>
    
    
  10. Click the Save button at the top right corner
  11. Publish the site and test