Shopify Tutorial: Displaying Trust Badges

This tutorial will guide you on adding trust badges to your Shopify store to increase customer confidence and improve conversion rates.

Step 1: Understanding the HTML Structure

Here’s the basic HTML snippet for Shopify trust badges:

<div class="trust-badges">
  <p>Shop with confidence:</p>
  <ul>
    <li><img src="/assets/secure-payment.svg" alt="Secure Payment"></li>
    <li><img src="/assets/money-back.svg" alt="Money-Back Guarantee"></li>
    <li><img src="/assets/fast-shipping.svg" alt="Fast Shipping"></li>
  </ul>
</div>

Step 2: Adding Trust Badges to Your Shopify Theme

1. In your Shopify Admin, navigate to:

Online Store > Themes > Actions > Edit Code

2. Open the template file (product-template.liquid, footer.liquid, or another suitable file) where you want the trust badges to appear.
3. Insert the provided HTML code at the desired location within the file.

Step 3: Uploading Trust Badge Images

1. Navigate to:

Online Store > Themes > Actions > Edit Code

2. Upload badge images (secure-payment.svg, money-back.svg, fast-shipping.svg) to your theme’s assets directory:

Assets > Add a new asset

Step 4: Customizing CSS for Trust Badges

Add styling to your CSS:

.trust-badges {
  text-align: center;
  padding: 10px;
}

.trust-badges ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.trust-badges img {
  width: 50px;
  height: auto;
}

Step 5: Testing Your Trust Badges

• Preview your Shopify store.
• Ensure badges display clearly and professionally on various devices.

Final Thoughts

Trust badges provide assurance to customers, helping build confidence in your store and increasing conversions.