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.

Uploading Trust Badge Image File

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

From your Shopify admin, upload your Trust Badge image file by going to Admin > Settings:

Ryan_s_Demo_Shop___Themes___Shopify_2017-07-12_14-07-03.png

> Files:

Ryan_s_Demo_Shop___Settings___Shopify_2017-07-12_14-04-14.png

- Upload Files:

Ryan_s_Demo_Shop___Files___Shopify_2017-07-12_14-09-09.png

Go ahead and upload your Trust Badge image.

The image is given a URL. Copy this as you will need it in a few steps!

Ryan_s_Demo_Shop___Files___Shopify_2017-07-12_14-10-50.png

Adding Code

Next head into your template files by going:

Admin > Online Store > Themes > Actions > Edit Code

Screen_Shot_2017-09-17_at_5.33.04_PM.png

Footer

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:

Ryan_s_Demo_Shop___Edit___Retina-4-1-7___Shopify_2017-07-12_14-31-53.png

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

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:

Ryan_s_Demo_Shop___Edit___Retina-4-1-7___Shopify_2017-07-12_15-24-08.png

Product page - Below 'Add to Cart'

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

Ryan_s_Demo_Shop___Edit___Retina-4-1-7___Shopify_2017-07-12_15-43-17.png

and place the code like this:

Ryan_s_Demo_Shop___Edit___Retina-4-1-7___Shopify_2017-07-12_15-36-29.png

Further Styling

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

Ryan_s_Demo_Shop___Edit___Retina-4-1-7___Shopify_2017-07-12_15-44-23.png

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.

Articles in this section

Adding Trust Badges

Advanced Customization

Adding Trust Badges

In This Article

Uploading Trust Badge Image File