Products: Add a trust badge or any image below the Add to Cart button

If you need to add an image that will show on all your product pages, you can modify the template code and manually add an image. Typically, this is used for trust badges. 

This method uses examples for Pipeline 4 and higher. Earlier versions of Pipeline, see notes at the bottom of this article.

How to:

Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.

Make a duplicate before any code changes:

Next, open the Code Editor:

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

1

Edit the main product snippets file

From the Snippets folder, open product.liquid:

In the code area, use the Find feature (Command-F on Mac, Control-F in Windows) and search for:

form

Example:

The search will help you find this line (2). That's where the Add to Cart is inserted. Notice the closing </div> on the following line - We will add a few blank lines after that closing </div> line:

This is where you can add your image HTML. 

2

Examples adding a trust badge or HTML image code

Example 1: Trust badge

Result:

Here's some sample code from Shopify to add a trust badge:

https://help.shopify.com/en/themes/customization/store/add-security-badge

Code from their article plus some Pipeline style code to help center the badge:

<div class="text-center" style="margin-top: 1rem;">
    <a href="//www.shopify.com/pci-compliant?utm_source=secure&utm_medium=shop" title="This online store is secured by Shopify" target="_blank"><img src="//cdn.shopify.com/s/images/badges/shopify-secure-badge-light-shadow.png" alt="Shopify secure badge" /></a>
</div>

You can now paste that code in the area we made from the previous step:

Save the file and preview a product page. 

OR

Example 2: Custom image using HTML

Result:

If you have a custom image to use, upload that image to your Files library:

Quick link:
https://shopify.com/admin/settings/files

Upload your image here.

Copy the entire URL from the image you've uploaded:

The entire URL is long, be sure you copy all of it. 

Paste the entire URL in the space we created earlier in the Snippets/product.liquid file:

Next, we'll add some HTML above and below that URL you pasted to display the image.

Here's the above code to add:

<div class="text-center" style="margin-top: 1rem;">
<img src="

Here's the code to add below:

" /></div>

Important - Be sure to copy both snips of code correctly.

Example after both above and below code is added:

Save the file and preview a product page. 

Earlier versions of Pipeline before Pipeline 4

In Step 1, instead of searching for:

form

Search for:

</form>

That will take you to this section:

Add some blank lines after the closing </div> line: