The availability-badges block displays availability badges for product delivery and pickup.

1. Import the shipping-option-components app to your theme's dependencies in the manifest.json file as in the following example:

2. Add the availability-badges block to the product-summary.shelf component. For example:

Although this block does not have explicit props, it uses the ProductSummaryContext and useShippingOptionState to retrieve delivery information.

To apply CSS customizations to this and other blocks, please see the Using CSS handles for store customization guide.

CSS Handles
availabilityBadgeCircle
availabilityPickupButton

• Delivery availability is defined at the product level.
• Each product may or may not have each delivery method (Shipping and Pickup).
• The store must be regionalized for the component to work correctly.