Skip to main content

OutOfStock

OutOfStock displays a subscription form for shoppers who want to be alerted when a sold-out product is back in stock.

The OutOfStock component is a compound of the following:

  • OutOfStock: wraps the title and content of the OutOfStock component.
  • OutOfStockTitle: wraps the title of the OutOfStock component.
  • OutOfStockMessage: wraps the content of the OutOfStock component.

Import

import { OutOfStock, OutOfStockTitle, OutOfStockMessage } from '@faststore/ui'

Usage

Loading...

Props

Customization

data-store-out-of-stock

data-out-of-stock-form

data-out-of-stock-title

data-out-of-stock-message

Best practices

✅ Do's

  • Use the OutOfStock component in PDPs.
  • Specify the input type in your form to validate data (e.g., <Input type="email" placeholder="Email"/>).
  • Handle the form submission by informing shoppers that they will be emailed when the item is back in stock.

❌ Don'ts

  • Don't use the OutOfStock component for alert messages. Instead, use the Alert component.
  • Don't use the OutOfStock component in products that won't return to stock.

Accessibility

  • Text elements and buttons must have sufficient color contrast against the background.

Didn't find your answers? Ask the Community. For documentation suggestions, submit your feedback.

JOIN THE COMMUNITY