Manage product inventory with Webflow's CMS

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.