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

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.

Troubleshooting

Beyond general webhook errors, two failures are specific to the Webflow integration. Both appear in your store's error log.

Product code "..." not found

If a product in a transaction is missing a code, or its code doesn't match any item in your products collection, the webhook fails with an error like:

Webhooks processing problems:
Webflow2 (webflow2): Product code "my-missing-code" not found [400]

Confirm the link or form that added the product carries the correct code. To re-feed the webhook, the product in the CMS must carry the code exactly as it was sent. If the codes match, confirm the Webflow connection settings on the Integrations page in the Foxy admin point at the correct collection field for the code (for example the slug, if that is what you use as the product code). If the field is wrong, disable the connection and reconnect, selecting the right fields.

Publish conflicts

If you have edited your product collection's schema without publishing, Webflow rejects API publish requests until the changes are published. You will see errors like:

Webhooks processing problems:
Webflow2 (webflow2): Conflict: Site is published to multiple domains at different times. [409]

Webflow (webflow): CollectionSchemaChangedError: The collection structure changed since the last publish [400]

Publish any collection schema changes in Webflow, making sure staging and live collections match, then re-feed the webhook to your Webflow site.