Is it possible to enable the 'out of stock view' in Webflow for an eCommerce store?

Published on
September 22, 2023

Yes, it is possible to enable the 'out of stock view' in Webflow for an eCommerce store. By default, when a product is out of stock, it will be marked as sold out and won't be available for purchase. However, you can create a custom 'out of stock view' to provide a better user experience and inform visitors about the availability of the product. Here's how you can do it:

  1. Create a new collection: Start by creating a new collection in Webflow for your out of stock products. This collection will hold all the out of stock items that you want to display on your website.

  2. Add fields to your collection: Customize the fields in your collection to include relevant information about the out of stock products, such as the product name, description, price, and any other details you want to display.

  3. Design the out of stock view: Go to your collection template page and design the layout and appearance of the out of stock view using the Webflow Designer. You can include product images, descriptions, prices, or any other elements you need to showcase the out of stock items effectively.

  4. Set up filtering: To display only the out of stock items in your out of stock view, you need to set up filtering based on their availability status. You can create a filtering system using the 'Availability' field you added to your collection in step 2. Configure the filter to show only items with the 'out of stock' status.

  5. Create a link to the out of stock view: Add a link or button on your product detail pages or anywhere else you want to give users access to the out of stock view. This link should direct visitors to the collection list page that displays the out of stock items.

  6. Publish and test: Once you have designed and configured your out of stock view, publish your Webflow site and test the functionality. Make sure that when a product is out of stock, it appears in the out of stock view as expected.

Enabling the 'out of stock view' in Webflow can help you provide a better user experience for your visitors and keep them informed about the availability of your products. By creating a custom view for out of stock items, you can maintain a visually consistent design while conveying relevant information to your customers.

Additional Questions:

  1. How do I create a collection in Webflow?
  2. Can I customize the fields in my product collection with Webflow?
  3. How to set up filtering in Webflow for an eCommerce store?