Manage product inventory with Webflow CMS

Links

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.