Trust badges on a product page: what to show, what to drop

Three tests, and a badge has to pass all three. Is it clickable through to a page you do not control? Is it already recognised by the person reading it? Does it answer the objection this page raises, not a generic one? A badge that fails any of the three is not neutral. It takes space, it takes attention, and it tells the buyer that the seller felt the need to defend himself.

A drawn padlock fails all three. It links nowhere, it is recognised as decoration, and it answers an objection nobody had on a product page.

Why does a row of badges make a page less credible?

Because badges are cheap and everyone knows it. A seal is an image file. Anyone can save one, and buyers who have shopped online for a decade have seen the same six shapes on stores that took their money and vanished. The signal died of overuse.

What is left is the second-order reading, and it is unflattering: a wall of reassurance in front of a purchase implies the purchase needed defending. Nobody puts six badges under a product they are confident about.

There is also an arithmetic to it. The block under an add-to-cart button holds about two lines on a phone. Every badge you put there is a line you did not spend on the delivery date, the return window, or what happens if the thing does not fit. Those are the facts a buyer is actually weighing, and none of them is a badge.

Which badges pass the three tests?

The last row is the one that matters. The most useful trust element on a product page is a sentence, not a seal. Ships Monday, arrives Wednesday or Thursday. 30 days to send it back, we pay the label. It is specific, it is checkable, it is the actual question in the buyer's head, and it survives being read out loud.

Where does the card logo actually belong?

At the point of payment, not on the product page. A card network mark under an add-to-cart button answers a question the buyer has not reached yet, and it borrows a third-party brand to do it. On the checkout page the same mark is doing real work, because there the buyer is deciding whether to type a card number into your form.

One European detail worth knowing before writing badge copy. Annex I of Directive 2005/29/EC on unfair commercial practices lists, among the practices considered unfair in all circumstances, presenting rights given to consumers in law as a distinctive feature of the trader's offer. In the EU, distance selling already carries a 14-day right of withdrawal under Directive 2011/83/EU. A badge advertising 14-day returns as a favour is therefore in awkward territory. Thirty or sixty days is a real commitment above the statutory floor and you may say so plainly. Both texts are transposed country by country, so this is a rule to check locally rather than a legal opinion.


How do you code a badge row that is not decoration?

The structure decides the behaviour. A row of <img> tags inside a <div> is a decorative strip: it announces nothing useful to a screen reader, it cannot be clicked, and nothing stops a hurried configuration from adding a seventh seal. Make the link mandatory in the type, and the row filters itself.

type Badge = {
  /** what the buyer recognises, in words. The picture is the ornament. */
  label: string
  /** the page that proves it, on a domain you do not control.
      No href, no badge. That is why it is not optional. */
  href: string
  /** the objection it answers, in your own words. Empty means drop it. */
  answers: string
  icon?: { src: string; width: number; height: number }
}

const badges: Badge[] = [
  {
    label: 'Payments handled by Stripe',
    href: 'https://stripe.com/legal/ssa',
    answers: 'Who ends up holding my card number?',
  },
  {
    label: '30 days to send it back, we pay the label',
    href: '/returns',
    answers: 'What if it does not fit?',
  },
]

export function TrustRow({ items }: { items: Badge[] }) {
  const kept = items.filter((b) => b.href.trim() && b.answers.trim())
  if (kept.length === 0) return null

  return (
    <ul className="trust-row" aria-label="Payment, delivery and returns">
      {kept.map((b) => (
        <li key={b.label}>
          <a href={b.href}>
            {/* alt="" on purpose: the word beside it carries the meaning,
                and a screen reader reading both says everything twice. */}
            {b.icon ? (
              <img src={b.icon.src} alt="" width={b.icon.width} height={b.icon.height} />
            ) : null}
            <span>{b.label}</span>
          </a>
        </li>
      ))}
    </ul>
  )
}

Three things that row does which a strip of images does not. It is a list, so assistive technology announces how many items there are instead of reading a hedge of unrelated pictures. Every item is a link, so the claim is checkable by the one buyer in fifty who checks, and that buyer is the sceptical one you were trying to convince. And a badge with no answers line cannot be rendered at all, which forces whoever adds one to write down what it is for.

Keep the row at two items, three at the very most. The credibility of a row falls as its length rises, which is the exact opposite of how badge sections get built.

What does a money-back guarantee need to be worth anything?

Its condition, on the same screen. 30-day money-back guarantee on its own is a slogan. What the buyer needs to know is who pays the return shipping, whether an opened item still qualifies, from what date the clock starts, and where the money lands. Any of those left unsaid is where the doubt goes.

export function Guarantee({
  days,
  condition,
  href,
}: {
  days: number
  /** the actual rule, in plain words. Not a slogan. */
  condition: string
  /** the page carrying the full policy */
  href: string
}) {
  if (process.env.NODE_ENV !== 'production' && condition.trim().length < 20) {
    throw new Error(
      'Guarantee: a promise with no condition attached is not a promise. '
      + 'Write who pays the return, from what date the clock starts, and in '
      + 'what state the item is accepted back, or remove the block.',
    )
  }

  return (
    <section className="guarantee">
      <p><strong>{days} days to change your mind</strong></p>
      <p>{condition}</p>
      <p><a href={href}>The full return policy</a></p>
    </section>
  )
}

// Used like this, and the condition is the component's whole payload:
//
// <Guarantee
//   days={30}
//   condition="Opened or not. Tell us within 30 days of delivery, we email a
//              prepaid label, and the refund goes back to the card that paid,
//              usually within five working days of the parcel reaching us."
//   href="/returns"
// />

The throw is deliberate. A rule written in a README is advice; a rule that stops the build is a rule. The same reasoning applied to a checkbox that must never start ticked is in order bump that is legal in Europe.

What replaces the badges you removed?

Facts with a source, in the space the seals were occupying.

• The delivery date, computed. Not fast shipping. A date, derived from your dispatch cutoff and the carrier's transit time.
• The return terms in one sentence, including who pays the postage.
• What is in the box, listed. A photograph of the contents beats a seal about quality.
• Who to reach, and how fast you answer — but only if you actually answer that fast.
• The material evidence: close-ups of the real object, weights, dimensions, a certificate you can link to.

That last one is the entire subject when you are new and have nothing else, and it is worth its own piece: social proof when you have no customers yet. If you do have reviews, the stars belong in a section built on real data rather than in a badge, which is a reviews section with real structured data.

FAQ

Do trust badges increase conversions?

There is no honest single answer, and any percentage quoted at you was measured on a store that is not yours. What can be reasoned about is the mechanism. A badge that links to third-party proof gives a sceptical buyer something to check; a badge that links nowhere is an unverifiable claim placed in front of a purchase. The second category is the one to remove first, and removing it costs nothing to test.

Which trust badges should go on a product page?

Two, three at the most, each clickable through to proof on a domain you do not control, and each attached to an objection this page raises. In practice that usually means your payment processor's own name and your return terms. Card network logos belong on the checkout page, where the buyer is about to type a card number, not on the product page where they are still deciding what to buy.

Is a padlock icon a security signal?

No. A drawn padlock in the page body is an image with no relationship to the connection. The only padlock that means anything is the one the browser draws in its own address bar, and buyers distinguish the two. It costs a line of space and returns nothing.

Can I advertise 14-day returns as a selling point in the EU?

Careful there. Distance selling in the EU already carries a 14-day right of withdrawal under Directive 2011/83/EU, and Annex I of Directive 2005/29/EC lists presenting rights given to consumers in law as a distinctive feature of the offer among the practices considered unfair in all circumstances. A longer window that you genuinely grant sits above the statutory floor and can be advertised as your own. Check how your country transposed both texts before writing the copy.

If you would rather not build the row yourself

uxgen.ai is an MCP server. It gives Claude 168 commerce components and places them directly in the store, as HTML the merchant owns: nothing to uninstall, no commission on orders. $19, $29 or $59 a month. The specification for the cart components is public and MIT-licensed at github.com/kinerette/uxgen-commerce-kit, so the reasoning above is checkable without paying for anything.