Manage product inventory with Webflow's CMS

The following tutorial assumes you have already setup a products collection in Webflow's CMS and have added your products. Please refer to this article for more information.

Important

This integration assumes that all of your products are set up within a single Webflow CMS Collection, and that all of your products will be tracked for inventory. If the integration is unable to find a specific product code from an order in your products collection, it will trigger an error response for the webhook.

Your product link or form must include the code parameter and optionally the quantity_max parameter to ensure a single customer can't order more than the inventory count of a product.

Links

Demo

Read-only

Create Inventory Field

  1. In your Products CMS Collection add a number field for Inventory (this can be called anything).
  2. Ensure that "Allow negative numbers" is enabled.
  3. Save changes.

Set Default Inventory Count

  1. Click on desired product from your products list.
  2. Give your product a starting inventory count.
  3. Click the "Save" button at top to save your changes.
  4. Repeat steps for each product.

Conditionally Show/Hide Purchase Option

  1. Select your purchase button or form element. 
  2. Click on the "Element Settings" icon at top.
  3. Under the "Condition Visibility" section, click the plus sign to add a new condition.
  4. Set the element to be visible when Inventory Is Greater Than 0.
  5. Click the "Save" button to add condition.

Conditionally Show/Hide Out Of Stock Message

  1. In Webflow's Designer, click on the "Add Elements" icon to the left. 
  2. Choose your desired element. (ex: Heading or Text Block)
  3. Modify element as needed.
  4. Click on the "Element Settings" icon at top.
  5. Under the "Condition Visibility" section, click the plus sign to add a new condition.
  6. Set the element to be visible when Inventory Is Less Than 1.
  7. Click the "Save" button to add condition.
  8. Publish changes.

Configure Webflow Webhook

  1. In the Foxy dashboard, click on the Integrations link at top.
  2. Under the "Webhooks" section, click the "Webflow" checkbox option.
  3. Click the "Integrate Webflow" button.
  4. On the next page, choose your desired Webflow website.
  5. On the next page, specify your products collection.
  6. Specify your product's code field. This must match the code value you are using in your product link or form.
  7. Specify your product's inventory field.
  8. Click on the "Update Webhooks" button to save your changes.
  9. Review your integration settings and run a transaction to test functionality.

In This Article

Related Articles

Manage multiple products with Webflow CMS
Create a purchase form with Webflow's Form Builder
Create a customer portal in Webflow
Create a purchase button in Webflow

Need help?

Can't find the answers you're looking for? Our team is here to help. Please click below to contact us.

Contact Us