How to add a promo image image at the bottom of all product pages

Example:

How to:

1

Upload your image to Shopify Files

Open your Shopify Files in the Settings:

Upload your image here. After you've uploaded the image, you'll need to copy this complete URL address, we will add that to some img code in the next step:

2

Open product.liquid from the Snippets folder

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.

Before proceeding - Make a duplicate of your theme (important):

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:

In the Snippets folder, open product.liquid:

Towards the bottom of the file, find where the product_reviews_enable section is (close to the bottom of the file):

Make a few blank lines above that section:

We will add some code in that space. Use this format:

<img class="custom-product-page-image" src="https://cdn.shopify.com/s/files/1/2018/8867/files/Screen_Shot_2018-11-14_at_10.54.06_PM.png?11700217757482838323">

You can use our sample code to start. However, you'll want to replace with your URL address from Step 1 inside the quotes for:

src="replace with our image URL address"

Example of code added:

Again, you can use our sample code while performing the tutorial but replace the src="" section with your own image. We cannot assure how long our image will remain up on our Files so you'll get an error we delete the file. 

Save your code changes. 

3

Add style code to your css file

We've added a class to that image code. This allows us to tweak the size and padding of the image on your product page. Add the following CSS code to the very bottom of your css file:

.custom-product-page-image {margin:0px 30px; max-width:95%;}

Example:

If you need to adjust the sizing and padding, use your own custom CSS to make it work for your store.

Save the file

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code

Undo

Use the Older versions link at the top of the file if you need to rollback or undo this code change. 

Or use your duplicate/backup theme as a safeguard.