Skip to content
Search for answers/

3 min read • Updated 18 days ago

Manage product inventory with Webflow 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.

Demo

https://foxystore.webflow.io/

Read-only

https://preview.webflow.com/preview/foxystore?utm_medium=preview_link&utm_source=dashboard&utm_content=foxystore&preview=ace49a7a5b44685f0d4046eb6b533ef5&mode=preview

Create Inventory Field

  1. 1

    In your Products CMS Collection add a number field for Inventory (this can be called anything).

  2. 2

    Ensure that "Allow negative numbers" is enabled.

  3. 3

    Save changes.

Set Default Inventory Count

  1. 1

    Click on desired product from your products list.

  2. 2

    Give your product a starting inventory count.

  3. 3

    Click the "Save" button at top to save your changes.

  4. 4

    Repeat steps for each product.

Conditionally Show/Hide Purchase Option

  1. 1

    Select your purchase button or form element. 

  2. 2

    Click on the "Element Settings" icon at top.

  3. 3

    Under the "Condition Visibility" section, click the plus sign to add a new condition.

  4. 4

    Set the element to be visible when Inventory Is Greater Than 0.

  5. 5

    Click the "Save" button to add condition.

Conditionally Show/Hide Out Of Stock Message

  1. 1

    In Webflow's Designer, click on the "Add Elements" icon to the left. 

  2. 2

    Choose your desired element. (ex: Heading or Text Block)

  3. 3

    Modify element as needed.

  4. 4

    Click on the "Element Settings" icon at top.

  5. 5

    Under the "Condition Visibility" section, click the plus sign to add a new condition.

  6. 6

    Set the element to be visible when Inventory Is Less Than 1.

  7. 7

    Click the "Save" button to add condition.

  8. 8

    Publish changes.

Configure Webflow Webhook

  1. 1

    In the Foxy dashboard, click on the Integrations link at top.

  2. 2

    Under the "Webhooks" section, click the "Webflow" checkbox option.

  3. 3

    Click the "Integrate Webflow" button.

  4. 4

    On the next page, choose your desired Webflow website.

  5. 5

    On the next page, specify your products collection.

  6. 6

    Specify your product's code field. This must match the code value you are using in your product link or form.

  7. 7

    Specify your product's inventory field.

  8. 8

    Click on the "Update Webhooks" button to save your changes.

  9. 9

    Review your integration settings and run a transaction to test functionality.

Need Help?

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