Adding Trust Badges

Adding Trust Badges

If you want to add a Trust badge to the footer or product pages, we have some steps you can follow along with. Please note that these steps involve editing the theme's template files. 

In This Article

• Uploading Trust Badge Image File
• Adding Code

Uploading Trust Badge Image File

Step 1: First, source a Trust Badge image file (.png) and save it to your computer. For example:

Step 2: From your Shopify admin, upload your Trust Badge image file by going into Settings > Files: 

Step 3: Click into Upload files to add your image: 

Step 4: The image is given a URL. Copy this as you will need it when editing your template files!

Adding Code

Step 5:  Head into your template files by going into  Online Store > Themes > Actions > Edit Code: 

Choose your location

• Footer
• Product Page

• Footer

  Step 6a: If you want your Trust Badge to appear in your footer, you will want to work in the footer.liquid, which is found in the Sections folder. For the Flex theme, it's dependent on which footer layout you're using. So you'd be looking for footer-centered.liquid, footer-classic.liquid or footer-promotional.liquid:

  

  Step 7a: You will need the URL that you copied when you uploaded your Trust Badge image in the Settings. 

  Step 8a: Wrap the URL in a div and img tag like this:

  <div class="trust-badge"> 
    <img src="Your URL Goes Here"/>
  </div>

  The below example places the Trust Badge at the bottom of your shop's footer:

  

• Product page - Below 'Add to Cart'

  Step 6b: If you want your Trust Badge to appear on your product page under the 'Add to Cart' button you can go into the Snippets folder and locate the product-form.liquid file. For the Flex theme, you'll want to locate the product__form.liquid file. 

  

  Step 7b: and place the code like this:

  

Further Styling

Further styling can be made to the badge by going into the Assets folder and locating the styles.scss.liquid

At the very bottom of this file write some code such as:

  .trust-badge {
  margin-top: 25px;
}

If you are familiar with HTML/CSS you can place your Trust Badge in other files as you need.