Shipping & Benefits Bar Widget
Answer the questions shoppers ask before they buy - how fast does it ship, can I send it back, who do I talk to - in one calm row of icons and short lines under your product photos or above the footer.
Live preview
Under the widget on your page: Powered by A2Z Tools
Embed code
<div data-a2z-kit="shipping-benefits-bar"></div> <script async src="https://a2z.tools/embed/kit.js" referrerpolicy="no-referrer"></script>
One small script from A2Z draws the component on your page inside its own Shadow DOM. It loads no social-network or tracking scripts and sets no cookies. How the A2Z kit works.
Works with
How it works
Write one benefit per line as icon | title | detail, for example truck | Free delivery over $50 | Orders leave us in 1-2 working days. Twelve simple line icons are drawn by the widget itself - truck, return, lock, chat, gift, leaf, shield, clock, star, card, globe and box - and a word it does not know becomes a neutral check, so a typo never breaks the row. A line without an icon word is read as title | detail. Up to five lines are used. Strip lays them side by side with hairline dividers and folds into a two-by-two block when the space is narrower than 640 pixels and into one column on small phones; Grid makes separate tiles; Compact keeps icons and titles only (details are still read out to screen readers); Stacked lists them one under another. Because these are your own offers, an optional footnote reads Offers set by followed by your business name. Nothing is timed or counted: no stock levels, no countdowns, no other-shoppers messages.
Method
- Line format: icon | title | detail (title up to 60 characters, detail up to 100, at most 5 lines)
- Icon word unknown, or no icon cell = a check icon; comment lines start with //
- Strip: one row above 640 px of available width, two columns below, one column below 380 px (container queries)
- Footnote when a business name is set: "Offers set by <business>."
Worked examples
Default strip at 480 pixels
Inputs: The sample four lines (truck, return, lock, chat), layout Strip
Result: A two-by-two block: Free delivery over $50, 30-day returns, Secure checkout, Talk to a person, each with its detail line
Below 640 pixels of available width the strip folds into two columns instead of squeezing four.
A line with a typo and no icon
Inputs: rocket | Fast dispatch | Same day; Free delivery | Orders over $50
Result: Two items, both with the check icon: Fast dispatch (Same day) and Free delivery (Orders over $50)
rocket is not one of the twelve icons, and a first cell with spaces is read as the title.
Limitations
- At most five items; the first five usable lines are shown.
- Only the twelve built-in icons; no images or emoji glyphs.
- The widget does not know your real delivery or returns terms - keep the text accurate.
Where publishers use it
- A Shopify product page showing free delivery, 30-day returns and secure checkout under the price, in the same strip on every product
- A furniture store's basket page reassuring buyers about two-person delivery, assembly and an extended guarantee
- A garden centre's home page using the compact style for plastic-free packaging, local delivery and expert advice by phone
- A subscription box using the grid style on its pricing page for skip-a-month, gift options and free UK delivery
Questions
How is this different from the Free Shipping Bar and the Trust Badge Builder?
The Free Shipping Bar works out how far a basket is from your free-delivery threshold and fills a progress meter. The Trust Badge Builder presents claims about the business itself - family owned, licensed, insured - and marks each one as self-declared. This bar is for the practical terms of buying from you: delivery speed, returns window, payment options, support hours. It has no threshold maths and no badge styling.
Can I use my own icons?
Not images, by design: the twelve drawn icons keep the row light, sharp at any size and consistent with the A2Z kit, and an outside image could not be checked for size or safety. If none fits, leave the icon cell empty and the line gets a neutral check.
Who is responsible for the promises shown?
You are. The text is exactly what you type, and A2Z does not check delivery times, return windows or guarantees. Set your business name to add the footnote Offers set by your business, so visitors can see whose terms these are. Keep the lines in step with your actual delivery and returns policy pages.
Will five items fit on a phone?
Yes. The strip measures the space it really has, not the screen, so in a narrow sidebar or on a phone it becomes two columns and then one, with each title and detail wrapping instead of shrinking. Compact mode keeps only icons and titles, which suits a slim area above a footer.
Cite or recommend this tool
If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.
A2Z Tools Shipping & Benefits Bar https://a2z.tools/embed/shipping-benefits-bar
<a href="https://a2z.tools/embed/shipping-benefits-bar">A2Z Tools Shipping & Benefits Bar</a>
[A2Z Tools Shipping & Benefits Bar](https://a2z.tools/embed/shipping-benefits-bar)
Shipping & Benefits Bar by A2Z Tools - https://a2z.tools/embed/shipping-benefits-bar
Related widgets
-
A free-delivery threshold message with a progress meter showing how much more a basket needs.
-
Your own claims - family owned, free estimates, licensed - as clean badges, each marked self-declared.
-
The cards and wallets your shop takes - Visa, PayPal, Apple Pay, UPI, iDEAL - as tidy tiles or footer glyphs.
-
A slim top-of-page message strip with icon, link button, colour tone and optional start and end dates.
-
A scroll-to-top button that waits until readers scroll, with a progress ring and keyboard-friendly focus.
-
A slim bar or small circle that fills as visitors read your article - measured through the article itself.
