Trust badges

What it is

A trust badge is a short line of text, optionally with a small icon or image beside it. You write one badge per line. The drawer shows them together as a list at the end of the footer.

The words are the badge; the icon is decoration. Screen readers skip the icon and read your wording, and a line with no words is dropped rather than shown as a lone picture. A padlock on its own means "something about security" and nothing more precise, which is why every badge has to carry text.

When to use it

• You have a returns or guarantee promise that shoppers ask about before they buy.
• You want the payment-security reassurance repeated at the moment of checkout, not only on the product page.
• You have a small payment-provider or certification image already hosted on Shopify.

Set it up

1. In the app, open Carts and press Open on the cart you want to change. That takes you to the Cart builder.
2. Look in the Modules list for Trust badges. If it is not there, go to the Add a module section, pick Trust badges in the Module list and press Add.
3. The row is marked Fixed position with a padlock. That is expected — badges always render last in the footer and cannot be moved.
4. Press Settings on that row.
5. In the Badges box, type one badge per line (see the format below).
6. Press Save. You will see a "Saved" banner saying the changes go live the next time you publish.
7. Go back to the builder and use Review and publish under Publish.

Settings

So a filled-in box might look like this:

Secure checkout | secure
    Free returns within 30 days | returns
    Ships in 24 hours | shipping
    Real people on support | support

How badges behave

Where they appear

Always last in the footer: after the savings line, the subtotal, the tax note, the checkout button, any express buttons and "Continue shopping". You cannot move them, and you cannot put them above your cart items — badges pushed above the items would push the shopper's own cart below the fold.

The footer is not drawn at all when the cart is empty, so an empty cart shows no badges.

Icons

Four icons are built in: secure, returns, shipping, support. Type one of those names after the vertical bar. Capitals do not matter. They are drawn in your drawer's own text colour and sized to the text.

If you type something after the bar that is not one of those four names, it is treated as an image URL instead. A misspelled icon name therefore costs you the picture, not the badge — the words still show.

Your own image

You can put an image URL after the vertical bar instead of an icon name. It has to be one of:

• an https address on cdn.shopify.com, cdn.shopifycloud.com, fonts.shopifycdn.com or a .myshopify.com domain — files you upload in your Shopify admin are served from cdn.shopify.com, so that is the usual case;
• a path on your own store, such as /files/badge.png;
• a data: image pasted inline.

Anything else — another company's host, or plain http — is refused, and the badge renders as words alone. That is deliberate: an image loaded from someone else's server is a request from your shopper's browser to that server, carrying their address and the page they were on.

Images are drawn at 20 by 20 pixels, load lazily, and are treated as decoration, exactly like the built-in icons.

What screen readers hear

The badges are announced as a list, so a shopper using a screen reader is told how many there are before hearing any of them. The list is introduced as "Why shop with us". You can change that wording on the Shopper copy screen for the cart, under "Announcements and errors" — it is heard, not seen.

Styling

Badges are small (12 pixel text, slightly dimmed) and wrap onto more lines rather than scrolling sideways, so a long set never pushes the checkout button out of reach on a phone. If you want them to look different, the Custom CSS screen for the cart can target badges, badges__item, badges__icon, badges__img and badges__text, which are class names this app promises not to rename.

Limitations

• Badges never reach your live cart. Publishing only carries the modules that sit in the drawer body. Trust badges are a fixed-footer module, and fixed modules are left out of what gets published — so the storefront receives no badges, whatever you saved. Nothing in the admin warns you about this, and the preview is built the same way, so it shows nothing either. Until that is fixed, treat this page as a description of a module you can configure but not yet ship.
• Display rules do nothing here. The settings screen offers "Add a display rule" for every module, including this one, and a rule you write will save. But rules are applied only to modules in the drawer body, and badges live in the footer — so a rule on trust badges never hides or shows anything.
• No image upload. There is no picker or upload button. You paste a URL, and it must already be on Shopify's servers or your own store.
• A rejected image is silent. If your URL is not allowed, nothing tells you in the admin. The badge simply shows its words with no picture.
• Four icons, and no more. There is no icon library to browse and no way to add a fifth preset. Your own image is the alternative.
• No icon-only badges. A line with no words is dropped, on purpose.
• Badges are not clickable. There is no link, tooltip or popup — you cannot point a badge at your returns policy page.
• No layout controls. Position in the footer, icon size, text size and order-on-screen are fixed; the only ordering you control is the order of your lines.