Add a banner image to certain Products or all Product Pages

This tutorial will demonstrate how to add a banner image to the top of your product pages. This can be used when a promotion banner is needed for certain products or even all products. 

Important: The same banner will be used on all product pages which use this custom template. Not ideal for when unique images are needed. 

Example if using for site-wide product messaging:

How to:

1

Create a new section file

In the Sections folder, choose Add a new section:

Call the section:

product-banner

Example:

Use the Create section button to complete. 

Erase all the default code that generated:

Save the file.

Refresh the Code Editor. 

Copy all the code from this file (sections/index-banner-image.liquid):

Paste all the code into your newly created product-banner.liquid section file:

Save the file:

2

Create a new template file

We will create a new custom template file which will use the section file created from Step 1. If you want the same banner image on all your products (example if your banner image a brand image or a flash sale banner for all products), then you can skip this step and follow the instructions in Step 3. 

Add a new template:

(1) Choose product in the first drop-down

(2) Call the template banner

Use the Create template button to complete.

3

Change template code

There are two scenarios in this step, choose the one that's correct for you. 

Option A - Use a custom product template for certain products only (same banner image for certain products)

Option B - Add a banner image to all product pages (same banner image for all products). 

Option A

Open the new template file you've created (the file is likely still open):

Add the following code above the existing code:

{% section "product-banner" %}

Example:

Save the file:

< OR >

Option B

Open your standard product template file:

Add the following code above the existing code:

{% section "product-banner" %}

Example:

Save the file:

4

Assign products to use your new template

If you used Option B in the last step, you can skip this step. If you used Option A, please follow this step.

Each product that will need to display your custom banner image will need to use the new template file you've created. In the Shopify Product Setup, there is a templates option on the right - Use that drop-down and choose the new template:

Find a product that will use the new template. Then choose the drop-down for Theme templates. 

Theme templates is located on the lower right:

Change to:

Save the change. 

Apply to all products that will use the new product-banner template. 

5

Customize Theme - Configure the banner settings

Next, in the Theme Editor, browse to a product that you've assigned the template to. If you used Option B, any product page will be fine.

Once on a product page (that has the new template if you used Option A), use the left section settings to configure both the Banner and your Product page settings. If you used Option A, the Product page settings will have be default since you're using a new template. Configure these settings to match your regular product template.

Example markup used for flash sale message: