3 min read • Updated 2 years ago
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
In your Products CMS Collection add a number field for Inventory (this can be called anything).
Ensure that "Allow negative numbers" is enabled.
Save changes.
Set Default Inventory Count
Click on desired product from your products list.
Give your product a starting inventory count.
Click the "Save" button at top to save your changes.
Repeat steps for each product.
Conditionally Show/Hide Purchase Option
Select your purchase button or form element.
Click on the "Element Settings" icon at top.
Under the "Condition Visibility" section, click the plus sign to add a new condition.
Set the element to be visible when Inventory Is Greater Than 0.
Click the "Save" button to add condition.
Conditionally Show/Hide Out Of Stock Message
In Webflow's Designer, click on the "Add Elements" icon to the left.
Choose your desired element. (ex: Heading or Text Block)
Modify element as needed.
Click on the "Element Settings" icon at top.
Under the "Condition Visibility" section, click the plus sign to add a new condition.
Set the element to be visible when Inventory Is Less Than 1.
Click the "Save" button to add condition.
Publish changes.
Configure Webflow Webhook
In the Foxy dashboard, click on the Integrations link at top.
Under the "Webhooks" section, click the "Webflow" checkbox option.
Click the "Integrate Webflow" button.
On the next page, choose your desired Webflow website.
On the next page, specify your products collection.
Specify your product's code field. This must match the code value you are using in your product link or form.
Specify your product's inventory field.
Click on the "Update Webhooks" button to save your changes.
Review your integration settings and run a transaction to test functionality.