The Benefits section shows a row of cards, each with an icon, a heading, and a short text. Use it for the promises you make to every shopper, such as free delivery, cash on delivery, secure payment, or easy returns.
Add the section
- Open the builder and choose Home page in the Pages tab.
- In the Sections tab, click Add new section and pick Benefits from the Marketing group.
- Select the section and click Add new block to add a Benefit card. Drag cards to change their order.
It is only offered on the home page, one per page, with up to 8 cards.
Section settings
- Desktop columns: how many cards sit side by side on computers (1 to 6). Extra cards go to a new row.
- Mobile columns: how many cards sit side by side on phones (1 to 3). One keeps each text easy to read.
- Surface: Card puts each benefit on its own panel, Plain puts them straight on the section background, and Divider draws a thin line between cards. The corners, borders, and shadow come from your theme.
- Section width, Color scheme, Gap between cards, Padding, and a Custom CSS tab.
Each benefit card
- Icon: pick an icon, such as a delivery truck, a shield, or a lock. Choose None for a card with text only.
- Image: use your own image in place of the icon, for this card only. It is drawn at the icon size.
- Alignment: Start or Center, for the icon and the accent line. The heading and the text have their own alignment in their text blocks.
- Icon size: the size of the icon or image.
- Accent line: a short line under the text that closes the card. On by default.
- Hover effect: Lift raises the icon and Scale makes it bigger when the mouse is over the card, and both make the accent line longer. None keeps the card still.
Each card holds up to 2 Text blocks: the first is the heading, the second is the short text. You can style them like any text block, see Group, Text, Button, and Divider blocks: how do the layout component settings work? Icon size, alignment, accent line, and hover are set card by card, so you can mix them in one row.
Ideas
- Delivery and payment: "Free delivery", "Cash on delivery", "Easy returns", and "Support 7 days a week", with 4 Desktop columns and 2 Mobile columns.
- Brand promises: "Handmade", "Natural ingredients", "Made locally", with your own drawn images.
Good to know
- The cards are not links, so the hover effect only moves the icon and the line, never the card.
- Shoppers who turned on reduced motion on their device see the cards without movement.
- For small trust messages near the buy button on the product page, use the Badges block instead. See How do I add collapsible tabs, delivery dates, a size guide, badges, or before and after images to my product page?
- Only promise what you really offer. Shoppers trust these cards.