Adding Trust Badges

Advanced Customization: Please note that this tutorial is considered an advanced customization. While Out of the Sandbox support may be able to help with basic issues with this code, please note that we may need to refer you to a third party developer for more advanced issues, customization or functionality.

If you want to add a Trust badge to your Footer or Product page, please follow along here!

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.

Cheers!

Articles in this section

Adding Trust Badges

Adding Trust Badges

In This Article

Uploading Trust Badge Image File