The availability-badges block displays availability badges for product delivery and pickup.
Configuration
- Import the
shipping-option-componentsapp to your theme's dependencies in the manifest.json file as in the following example:
_10 "dependencies": {_10 "shipping-option-components": "1.x"_10_10 }
- Add the
availability-badgesblock to theproduct-summary.shelfcomponent. For example:
_10 "product-summary.shelf": {_10 "children": [_10 "availability-badges"_10 ]_10 }
Props
Although this block does not have explicit props, it uses the ProductSummaryContext and useShippingOptionState to retrieve delivery information.
Customization
To apply CSS customizations to this and other blocks, please see the Using CSS handles for store customization guide.
| CSS Handles |
|---|
availabilityBadgeCircle |
availabilityPickupButton |
Notes
- 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.