Product Detail
Benefits Box
Compact list of product benefits or USPs such as delivery, returns, and warranty.
Overview
BenefitsBox is the compact list of product-level USPs shown on a PDP, things like free shipping, easy returns, or warranty terms. Each entry pairs an icon with a short label and an optional sub-line.
Auto-import tag: <LBenefitsBox>.
Key Business & UX Benefits
- Reinforces purchase confidence at the moment of decision by repeating shipping, returns, and warranty signals right next to the buy button.
- Icon-led entries are scannable in two seconds, so the USPs land even when shoppers don't read product copy.
- Driven by data, so policy changes (extended returns, new shipping cutoffs) ship without a content rebuild.
Usage
BenefitsBox Default
<BenefitsBox
:delivery-benefit="product.deliveryBenefit"
:is-free-delivery="product.isFreeDelivery"
:benefits="product.benefits"
/>
Feature List
- Each entry pairs an icon with a short label and an optional sub-line so USPs read in two seconds
- Driven by a single benefits array, so policy changes (extended returns, new shipping cutoffs) ship as data updates
- Drops into the PDP content column next to the price and add-to-cart so trust signals sit at the decision point
- Compact list layout keeps the buy-box scannable instead of crowding it with paragraphs of fine print
- Same shape covers free shipping, easy returns, warranty terms, and any vertical-specific USPs
API Reference
| Prop | Default | Type |
|---|---|---|
deliveryBenefitrequired | Benefit { icon, title, description } | |
benefitsrequired | Benefit[] { icon, title, description } | |
isFreeDeliveryrequired | boolean |