Free Trust Badges for Shopify – 4 Animated Seals with Full Code

Trust badges for Shopify that look and feel legitimate go a long way to giving your future customers more confidence in your store. And animated ones? They go even further since they’re harder to copy and catch your attention.

A study from Econsultancy / Toluna found 48% of respondents look for trustmarks when deciding whether or not to trust an unknown retailer.

The good news is that it’s super easy to add trust badges to Shopify if you don’t have them already. All it takes is a little copy and pasting.

You have a short time to gain the trust of visitors who land on your store and convince them to purchase something. Let’s make the most of it!

To use these badges, just copy and paste the code to wherever you want to use them. Best of all? They’re completely free, and won’t slow your store down.

Shopify Light Badge:

Your Shopify store comes with a 256-bit SSL certificate, encrypting the traffic between your store and your customers. This provides a high level of security for your visitor’s data. Why not show it off with this animated trust seal?

<div class="shopify-security-badge">
    <img src="https://i.ibb.co/mCpcsX0/shopify-trust-badge-1.png" />
</div>
<style>
    .shopify-security-badge{vertical-align:middle;overflow:hidden;width:120px;background:linear-gradient(120deg,#56ab2f,#96bf48);z-index:0;position:relative;padding:15px;border-radius:5px;display:inline-block;margin:5px}.shopify-security-badge img{width:100%vertical-align: middle}.shopify-security-badge.black{background:linear-gradient(120deg,#000,#434343)}.shopify-security-badge:after{content:'';top:0;transform:translateX(100%);width:100%;height:75px;position:absolute;z-index:1;animation:slide 4s infinite;background:-moz-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%);background:-webkit-gradient(linear,left top,right top,color-stop(0,rgba(255,255,255,0)),color-stop(50%,rgba(255,255,255,.8)),color-stop(99%,rgba(128,186,232,0)),color-stop(100%,rgba(125,185,232,0)));background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%);background:-o-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%);background:-ms-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%);background:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%)}@keyframes slide{0%{transform:translateX(-100%)}50%{transform:translateX(100%)}100%{transform:translateX(100%)}}
</style>

Shopify Dark Badge:

Same as the light badge, but a less colourful version. While less eye-catching, a dark version may fit better with your store’s aesthetic. Use the dark Shopify trust seal if you’re looking for a more sleek look.

<div class="shopify-security-badge black">
    <img src="https://i.ibb.co/mCpcsX0/shopify-trust-badge-1.png" />
</div>
<style>
    .shopify-security-badge{vertical-align:middle;overflow:hidden;width:120px;background:linear-gradient(120deg,#56ab2f,#96bf48);z-index:0;position:relative;padding:15px;border-radius:5px;display:inline-block;margin:5px}.shopify-security-badge img{width:100%;vertical-align: middle}.shopify-security-badge.black{background:linear-gradient(120deg,#000,#434343)}.shopify-security-badge:after{content:'';top:0;transform:translateX(100%);width:100%;height:75px;position:absolute;z-index:1;animation:slide 4s infinite;background:-moz-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%);background:-webkit-gradient(linear,left top,right top,color-stop(0,rgba(255,255,255,0)),color-stop(50%,rgba(255,255,255,.8)),color-stop(99%,rgba(128,186,232,0)),color-stop(100%,rgba(125,185,232,0)));background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%);background:-o-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%);background:-ms-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%);background:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%)}@keyframes slide{0%{transform:translateX(-100%)}50%{transform:translateX(100%)}100%{transform:translateX(100%)}}
</style>

PCI-DSS Badge:

Shopify is PCI compliant. This is a security standard for any company that processes Credit or Debit card transactions. Shopify is certified to the level 1 standard, which means your Shopify store is as well. Learn more about Shopify’s PCI compliance here.

<div class="shopify-dss-badge-wrapper">
    <img src="https://i.ibb.co/61nqL49/pci-dss-level-one.png" class="shopify-dss-badge" />
    <img src="https://i.ibb.co/GMvfcHx/pci-dss-level-one-inner.png" class="shopify-dss-badge-inner" />
</div>
<style>
    .shopify-dss-badge-wrapper{vertical-align:middle;width:100px;height:100px;position:relative;display:inline-block;margin:5px}.shopify-dss-badge{width:100%;animation-name:spin;animation-duration:10s;animation-iteration-count:infinite;animation-timing-function:linear;position:absolute;top:0;left:0}.shopify-dss-badge-inner{position:absolute;top:0;left:0;width:100%}@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
</style>

Satisfaction Guaranteed Badge:

If you offer a refund/return policy and guarantee that the customer will be satisfied, this trust badge is for you. Show off your satisfaction guarantee with pride. We’ve added a slowly shifting gradient effect to make this trust seal look extra super duper shiny.

<div class="shopify-satisfaction-badge">
    <div class="shopify-satisfaction-badge-inner">
        <img src="https://i.ibb.co/86b0FN3/shopify-trust-badge-satisfaction.png" />
    </div>
</div>
<style>
        .shopify-satisfaction-badge{vertical-align:middle;display:inline-block;width:175px;text-align:right;border-radius:5px;background:linear-gradient(120deg,#f7971e,#ffd200,#fceabb);background-size:600% 600%;-webkit-animation:gradientglow 4s ease infinite;-moz-animation:gradientglow 4s ease infinite;animation:gradientglow 4s ease infinite}.shopify-satisfaction-badge-inner{border-radius:5px;max-width:120px;margin:10px;padding:10px;display:inline-block;text-align:right;background:#c03b99;background:-webkit-linear-gradient(120deg,#891d41,#c03b99);background:linear-gradient(120deg,#891d41,#c03b99)}.shopify-satisfaction-badge-inner img{width:110px;vertical-align:middle}@-webkit-keyframes gradientglow{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes gradientglow{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes gradientglow{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}    
</style>

Where should these trust seals go in Shopify?

Symbols of trust should go near areas where your customer needs an extra nudge. Any time a customer is making a decision, they’ll need some reassurance that they’re making the right choice.

Add these trust badges for Shopify near your Add to Cart and Proceed to Checkout buttons for the highest impact.

To paste this code in the right place, you’ll need a little HTML know-how. Head over to your Shopify admin and go to Online Store > Themes. On your active theme, click Actions > Edit Code.

On most themes, your add to cart button should be in the product-template.liquid file. You should also be able to find your Proceed to Checkout button in the cart-template.liquid file.

Need some affordable developer help? Check out Store Tasker and a developer would be happy to add these badges for you!

Go boost your sales with these free trust seals and trust badges for Shopify

We designed these trust badges for your Shopify site. Get out there and build some trust to boost your conversion rate!

If you’re looking to boost your conversion rate further, try our Shopify speed optimization guide to get your pages loading quickly.