How to create a footer with trust badges on your Shopify store?

We will see in this tutorial how to create a footer with trust badges.

It is important to have a pre-footer with beautiful icons and elements to reassure your customers.

This tutorial will create 4 columns with the following elements:

  • Free Shipping
  • Satisfaction Guaranteed
  • 24/7 Client Support
  • Secure Payments

It’s going to look like this:

trust-badge-footer shopify store

You can see the result on this demo store : https://speed-ecom-tutorials.myshopify.com/

Password : Speedecom

Script installation

Go to your Theme files: Online Store – Actions – Edit code and open the Layout folder.

Now you need to find the file theme.liquid.

Once the file is open, go to the bottom of the file and find the following tag: <footer… or a code that looks like this: {% section ‘footer’ %}}.

You will copy/paste the code below just before the area seen here between </main> and {% section ‘footer’ %} :

Code to insert:

<!-- Beginning of the code - Pre footer trust badges -->
<style>
#gd-pre-footer { overflow:hidden; clear:both; margin-top:35px; margin-bottom:10px; padding-bottom:0; }
#gd-pre-footer .col-item { padding:15px 25px; text-align:center; list-style:none; }
#gd-pre-footer ul { padding-left:0 !important; }
#gd-pre-footer center { background:#FFFFFF; }
@media screen and (min-width: 768px) {
#gd-pre-footer .col-item {
width:25%;
text-align:center;
float:left;
padding:5px 15px;
}
}
</style>
<div id="gd-pre-footer" class="pre_footer index-section home-section">
<div class="wrapper">
<div>
<ul class="footer-badges-list">
<li class="col-item">
<div class="text-center">
<img src="https://cdn.shopify.com/s/files/1/0533/3834/1574/files/shipping.png?v=1612535028" style="height: 75px;">
<h3 class="h4">Free Shipping</h3>
</div>
<p></p><center>You love free shipping, we love free shipping, everyone loves it!</center><p></p>
</li>
<li class="col-item">
<div class="text-center">
<img class="" src="https://cdn.shopify.com/s/files/1/0533/3834/1574/files/satisfaction-guaranteed.png?v=1612535028" style="height: 75px;">
<h3 class="h4">Satisfaction Guaranteed</h3>
</div>
<p></p><center>Is something wrong? You have 14 days to change your mind.</center><p></p>
</li>
<li class="col-item">
<div class="text-center">
<img class="img90" src="https://cdn.shopify.com/s/files/1/0533/3834/1574/files/client-support.png?v=1612535028" style="height: 75px;">
<h3 class="h4">24/7 Client Support</h3>
</div>
<p></p><center>Need help? Our team will gladly help you anytime!</center><p></p>
</li>
<li class="col-item">
<div class="text-center">
<img class="img90" src="https://cdn.shopify.com/s/files/1/0533/3834/1574/files/secure-payments.png?v=1612535028" style="height: 75px;">
<h3 class="h4">Secure Payments</h3>
</div>
<p></p><center>We use SSL encryption to ensure a secure shopping experience.</center><p></p>
</li>
</ul>
</div>
</div>
</div>
<!-- Ending of the code - Pre footer trust badges -->

If you want this footer only on the home page you just have to put the code in the following display condition:

{% if template.name == "index" %} 
Add your code here
{% endif %}

You have a dark background?

Go to Online Store – Actions – Edit Code – Assets folder – theme.scss.liquid or style.scss.liquid or timber.scss.liquid – Open it and at the very bottom of the file paste the following code that will put a nice rounded white background on the images 😉

#gd-pre-footer * {
    color: #FFF !important;    
}

The code is of course RWD, which means that it will adapt to different devices such as tablets and mobiles 😉

Don’t forget to make a backup before making any changes to your theme files!

This tutorial is also available in video format

Hope you found this tutorial helpful !

You have any ideas for new tutorials ? Any questions about this one ? Leave me a comment 😉

Share this article

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on telegram
Share on whatsapp
Share on email

17 Responses

    1. Thanks for the comment. Here’s what you need to do.

      To make the titles smaller, add the following code before (and change the px number for the size you prefer) : #gd-pre-footer h4 { font-size: 15px; }

      To make the texts smaller, add the following code before (and change the px number for the size you prefer) : #gd-pre-footer p { font-size: 13px; }

      As for the images, try the same thing with this code : #gd-pre-footer img { height: 40px; }

  1. hi, thank you for your helpful code. I just want to show the footer only in my homepage AND my product page. How can I edit the code?

    1. Hi, thank you for the comment. For the homepage, you need to add the code in the index.liquid file. As for product pages, add it in the product.liquid file. The code should be added at the very bottom in both cases.

    1. Hi, can you tell me more ? Not sure i understand what you mean by “link those images to a collection page”.

      1. I want to replace the trust badges with the official logos of my vendor brands. So in the badge area at my homepage I want to place custom jpg’s and if tapped on will link user to my collection pages.

        1. OK, you just need to change the image urls in the code so you’ll add your own logos from your shopify files. As for the link, put the img insertion code inside the following code : imgcode

  2. Hello team!
    Thank you for the code, it is really awesome!
    I have an issue. I only want to use 3 of those pictures. I delete one and because of float:left; the box goes to the left side. But I want the box in the center.
    Can you help me with this?

  3. hello my badges are shown bellow the newsletter. I want first badges shown then the newsletter. Can you help me please.

  4. Hi, i want the badges in a partcular part of the main homepage and not directly above the footer, any way i can do it ? Appreciate if you could help.

Leave a Reply

Your email address will not be published. Required fields are marked *