Skip to content
Search for answers/

3 min read • Updated 3 hours 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

If you're currently using v1 of our Webflow webhook integration, please disable it and follow the steps below to connect to v2.

  1. 1

    Log in to the Legacy Foxy Admin.

  2. 2

    In the navigation, click on Integrations.

  3. 3

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

  4. 4

    Click the Integrate Webflow button.

  5. 5

    On the next page, choose your desired Webflow website.

  6. 6

    On the next page, specify your products collection.

  7. 7

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

  8. 8

    Specify your product's inventory field.

  9. 9

    Click the Update Webhooks button to save your changes.

  10. 10

    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.