How to Add Trust Badges and Custom Content to Shopify Checkout

Introduction

If you run a Shopify store, you already know that getting customers to your checkout page is only half the battle. The real challenge is making sure they complete the purchase. Studies consistently show that checkout abandonment rates hover around 70%, and one of the biggest reasons shoppers leave without buying is a lack of trust.

This is where checkout UI extensions come in. Shopify's checkout extensibility framework gives developers and merchants the ability to inject custom content, trust badges, security seals, custom banners, promotional messages, and more directly into the checkout flow. Without touching the core checkout code. Without risking compliance or security issues. And fully compatible with Shopify's Shop Pay and accelerated checkouts.

In this guide, you will learn exactly how to use checkout UI extensions to add trust badges and custom content to your Shopify checkout. Whether you are a developer building a custom solution or a merchant looking to understand what is happening under the hood, this article covers everything from initial setup to deployment.

What Are Checkout UI Extensions?

Checkout UI extensions are Shopify's official way to customize the checkout experience. Introduced as part of Shopify's move to extensible checkouts (replacing the older checkout.liquid file), these extensions allow you to render custom UI components at specific locations in the checkout flow.

Unlike traditional theme customization, checkout UI extensions:

• Run in a sandboxed environment separate from the main checkout code
• Are reviewed and approved by Shopify to ensure security and performance
• Work seamlessly with Shop Pay, accelerated checkouts, and Shopify's native checkout
• Support Shopify's component library for consistent UI rendering
• Can read order data, cart data, buyer information, and metafields

The extension points (called targets) are pre-defined locations where your custom UI can be injected. Examples include above or below the payment section, next to the order summary, above the shipping address form, and more.

This architecture ensures that no merchant or third-party app can break the checkout experience for buyers, something that was a real risk with the old checkout.liquid approach.

Why Add Trust Badges to Shopify Checkout?

Before diving into the technical implementation, it is worth understanding the human intent behind this feature request.

When a customer reaches your checkout, they are making a financial decision. They are about to hand over their credit card details or payment information. At this exact moment, doubts creep in:

• Is this site secure?
• Will my card information be safe?
• Is this a legitimate store?
• What if I need to return something?

Trust badges answer these questions visually and immediately. A Norton Secured badge, an SSL certificate seal, a money-back guarantee icon, or a "Free Returns" banner can significantly reduce anxiety and push hesitant buyers toward completing their order.

According to multiple conversion rate optimization studies, adding trust signals at checkout can increase conversions by anywhere from 5% to 30%, depending on the niche, the audience, and the quality of the trust signals used.

Custom content beyond trust badges also plays a role and things like a limited-time offer reminder, a free shipping threshold message, or a loyalty points summary can all be injected into checkout using the same checkout UI extensions framework.

Prerequisites Before You Start

Before building your first checkout UI extension, make sure you have the following in place:

1. Shopify Partner Account

You need a Shopify Partner account to create and manage apps. If you do not have one, sign up at partners.shopify.com.

2. A Shopify Development Store

Create a development store from your Partner dashboard. This is where you will test and preview your extension.

3. Shopify CLI Installed

Shopify CLI is required to scaffold, develop, and deploy extensions.

npm install -g @shopify/cli @shopify/theme

Verify the installation:

shopify version

4. Node.js (v18 or later)

Checkout UI extensions require Node.js 18 or higher.

node --version

5. A Shopify App (or an Existing One)

Extensions live inside Shopify apps. You can create a new app or add the extension to an existing one.

Step 1: Create a Shopify App

If you do not already have an app, create one using Shopify CLI:

shopify app create node

Follow the prompts to name your app and connect it to your Partner account. Once created, navigate into the app directory:

cd your-app-name

Step 2: Generate a Checkout UI Extension

Inside your app directory, run the following command to scaffold a new checkout UI extension:

shopify app generate extension

When prompted, select Checkout UI from the list of extension types.

You will be asked to:

• Name your extension (e.g., trust-badges)
• Choose a template language: JavaScript or TypeScript (TypeScript recommended)
• Choose a UI framework: React (recommended) or vanilla JavaScript

Shopify CLI will generate the extension files inside an extensions/ folder within your app.

Step 3: Understand the Extension File Structure

After generation, your extension folder will look like this:

extensions/
  trust-badges/
    src/
      Checkout.jsx
    locales/
      en.default.json
    shopify.extension.toml

The shopify.extension.toml File

This is the configuration file for your extension. It defines the extension's name, the target (where it appears in checkout), and other metadata.

name = "Trust Badges"
type = "ui_extension"

[[extensions]]
name = "Trust Badges"
handle = "trust-badges"
type = "checkout_ui_extension"

  [[extensions.targeting]]
  module = "./src/Checkout.jsx"
  target = "purchase.checkout.payment-method-list.render-after"

The target field is critical. It tells Shopify exactly where in the checkout flow your extension should render.

Step 4: Common Checkout UI Extension Targets

For trust badges, the best performing placements are:

• Above the Pay Now button - catches the buyer right at the moment of commitment
• Below the payment method list - reassures buyers after they see payment options
• Below the order summary - provides a final confidence boost

Step 5: Build the Trust Badge Component

Now let's write the actual React component for the trust badges. Open src/Checkout.jsx and replace the default content with the following:

import {
  reactExtension,
  Banner,
  BlockStack,
  InlineStack,
  Icon,
  Text,
  Image,
  useSettings,
} from "@shopify/ui-extensions-react/checkout";

export default reactExtension(
  "purchase.checkout.actions.render-before",
  () => <TrustBadges />
);

function TrustBadges() {
  const { heading, show_ssl, show_returns, show_secure_payment } = useSettings();

  return (
    <BlockStack spacing="base">
      {heading && (
        <Text size="small" emphasis="bold" appearance="subdued">
          {heading || "Why shop with us?"}
        </Text>
      )}
      <InlineStack spacing="base" blockAlignment="center">
        {show_ssl !== false && (
          <InlineStack spacing="tight" blockAlignment="center">
            <Icon source="lock" size="small" />
            <Text size="small">SSL Secure Checkout</Text>
          </InlineStack>
        )}
        {show_returns !== false && (
          <InlineStack spacing="tight" blockAlignment="center">
            <Icon source="reorder" size="small" />
            <Text size="small">Free Returns</Text>
          </InlineStack>
        )}
        {show_secure_payment !== false && (
          <InlineStack spacing="tight" blockAlignment="center">
            <Icon source="creditCard" size="small" />
            <Text size="small">Secure Payment</Text>
          </InlineStack>
        )}
      </InlineStack>
    </BlockStack>
  );
}

What Is Happening Here?

• reactExtension() registers this component at the specified target
• useSettings() pulls in merchant-configurable settings defined in the TOML file
• BlockStack and InlineStack are Shopify's layout primitives — they ensure consistent spacing and alignment across all checkout themes
• Icon uses Shopify's built-in Polaris icon set
• Text renders text with Shopify's typographic styles

Step 6: Add Merchant-Configurable Settings

One of the most powerful features of checkout UI extensions is the ability to let merchants customize the extension without touching any code and directly from the Shopify checkout editor.

Update your shopify.extension.toml to add settings:

[[extensions.settings.fields]]
key = "heading"
type = "single_line_text_field"
name = "Badge Section Heading"
description = "Heading shown above the trust badges"

[[extensions.settings.fields]]
key = "show_ssl"
type = "boolean"
name = "Show SSL Badge"
description = "Display the SSL Secure Checkout badge"

[[extensions.settings.fields]]
key = "show_returns"
type = "boolean"
name = "Show Returns Badge"
description = "Display the Free Returns badge"

[[extensions.settings.fields]]
key = "show_secure_payment"
type = "boolean"
name = "Show Secure Payment Badge"
description = "Display the Secure Payment badge"

These settings will appear in the checkout editor sidebar, allowing merchants to toggle badges and set custom text without a developer.

Step 7: Adding Custom Image-Based Trust Badges

If you want to display actual badge images (like a McAfee seal, Norton badge, or a custom designed graphic), you can use the Image component:

import {
  reactExtension,
  InlineStack,
  Image,
} from "@shopify/ui-extensions-react/checkout";

export default reactExtension(
  "purchase.checkout.actions.render-before",
  () => <ImageBadges />
);

function ImageBadges() {
  const badges = [
    {
      src: "https://cdn.shopify.com/s/files/1/0000/0000/files/ssl-badge.png",
      alt: "SSL Secure",
    },
    {
      src: "https://cdn.shopify.com/s/files/1/0000/0000/files/mcafee-badge.png",
      alt: "McAfee Secure",
    },
    {
      src: "https://cdn.shopify.com/s/files/1/0000/0000/files/money-back.png",
      alt: "30-Day Money Back Guarantee",
    },
  ];

  return (
    <InlineStack spacing="base" blockAlignment="center">
      {badges.map((badge) => (
        <Image
          key={badge.alt}
          source={badge.src}
          accessibilityDescription={badge.alt}
          aspectRatio={2}
        />
      ))}
    </InlineStack>
  );
}
  

Note: Image sources must be hosted on Shopify CDN or another trusted domain. The extension sandbox restricts external resource loading for security reasons.

Step 8: Adding a Custom Promotional Banner

Beyond trust badges, checkout UI extensions are also great for displaying custom promotional content countdown timers, free shipping thresholds, loyalty point summaries, or custom upsell messages.

Here is an example of a custom promotional banner:

import {
  reactExtension,
  Banner,
  Text,
  useCartLines,
  useApplyCartLinesChange,
} from "@shopify/ui-extensions-react/checkout";

export default reactExtension(
  "purchase.checkout.order-summary.render-after",
  () => <ShippingThresholdBanner />
);

function ShippingThresholdBanner() {
  const cartLines = useCartLines();

  const subtotal = cartLines.reduce((total, line) => {
    return total + line.cost.totalAmount.amount;
  }, 0);

  const freeShippingThreshold = 50;
  const remaining = freeShippingThreshold - subtotal;

  if (remaining <= 0) {
    return (
      <Banner status="success">
        <Text>🎉 You qualify for FREE shipping!</Text>
      </Banner>
    );
  }

  return (
    <Banner status="info">
      <Text>
        Add ${remaining.toFixed(2)} more to get FREE shipping!
      </Text>
    </Banner>
  );
}
  

This banner dynamically reads the cart total and updates the message in real time — no page reload needed.

Step 9: Preview the Extension Locally

To preview your extension in a development store, run:

shopify app dev

This command will:

• Start a local development server
• Connect to your development store
• Provide a shareable preview URL

Open the preview URL in your browser, add a product to your cart, and proceed to checkout. You should see your trust badges rendered in the position you specified.

The extension also supports hot reloading any changes you make to the source files will automatically reflect in the preview without refreshing.

Step 10: Configure via the Checkout Editor

Once your extension is running, you can configure it visually:

• Go to your Shopify Admin
• Navigate to Settings → Checkout
• Click Customize
• In the checkout editor, find your extension in the sidebar
• Use the settings panel to toggle badges, update headings, and reposition the block

This is the experience your merchants get a no-code interface to manage your extension's appearance and content.

Step 11: Deploy the Extension

When you are happy with the extension and ready to go live, deploy it using:

shopify app deploy

This will:

• Build the extension for production
• Upload it to Shopify's infrastructure
• Make it available in the Shopify App Store (if you publish your app) or in your private development store

After deployment, you must also publish the extension version in your Partner dashboard under the app's distribution settings.

Best Practices for Checkout UI Extensions

Keep It Lightweight

The checkout is a performance-critical page. Avoid heavy images, excessive API calls, or complex animations. Shopify imposes strict performance budgets on extensions, and exceeding them can result in your extension being disabled.

Use Shopify's Component Library

Always prefer Shopify's built-in components (BlockStack, InlineStack, Text, Banner, Image) over custom HTML or CSS. These components are automatically styled to match the merchant's checkout theme and brand settings.

Test on Mobile

A large percentage of checkout completions happen on mobile devices. Always test your extension on small screen sizes and ensure the layout is responsive.

Localize Your Content

Use the locales/en.default.json file for all user-facing strings and provide translations for other languages your target markets use.

Respect Buyer Privacy

Checkout UI extensions can access buyer data (email, address, etc.) but should not transmit this data to external servers without proper disclosure and consent, in compliance with GDPR and CCPA.

Common Mistakes to Avoid

• Using unsupported HTML tags or CSS - the extension sandbox does not support arbitrary DOM manipulation
• Hardcoding image URLs that may break - always use stable CDN links
• Placing too many extensions at the same target - this creates visual clutter and hurts conversions
• Not testing with real cart scenarios - test with single items, multiple items, discounted items, and digital products

Conclusion

Adding custom trust badges and custom content to your Shopify checkout is one of the highest-ROI changes you can make to your store. And with checkout UI extensions, doing so is now cleaner, more stable, and more powerful than ever before.

The new extensibility architecture gives developers a proper framework to build custom checkout experiences without hacking core files, while giving merchants a visual editor to manage those experiences without writing a single line of code.

Whether your goal is to reduce cart abandonment, boost buyer confidence, display dynamic shipping thresholds, or surface loyalty rewards at the point of purchase - checkout UI extensions are the right tool for the job.

Start with a simple trust badge block, get comfortable with the framework, and then layer in more sophisticated dynamic content as your needs grow. Your checkout conversion rate will thank you.

Quick Reference

Additional Resources

• Shopify Checkout UI Extensions Documentation
• Extension Targets Reference
• Shopify UI Extensions Component Library
• Shopify CLI Reference
• Checkout Extensibility Overview