How to Add Banner Image to Product Pages Without The App

 

This tutorial is a guide to help you figure out how to add banner image to product pages without the app and regardless of size using code. 

Banner image or announcement bar on product pages are a great way to keep your customers up to date on big announcements in your Shopify store such as  free shipping offers, sales, or other promotions. This banner image keeps customers up-to-date on any changes in your store. This tutorial will demonstrate how to add a banner image to the top of your product pages. You can use this tutorial when a promotion banner is needed for certain products or even all products.

Using this 5-step tutorial, you would quickly learn to add a banner image of any size to the top of your product images using no app and only a few lines of code. 

Add Banner Image to Shopify Product Pages

Step 1: Duplicate your live theme

From your Shopify admin go to the Online store and choose themes. Next to the live theme click on Actions and choose Duplicate. This way you will have a backup of your live theme in case you miss some step and mess up your store.

Step 2: Create a new section file 

In the Sections folder, choose Add a new section:

Name the section:

product-banner

Use the Create section button to complete. Erase all the default code that generated and Save the file.

Copy all the code from this file sections/index-banner-image.liquid if you don't have this file hero.liquid would work fine too.

Paste all the code into your newly created product-banner.liquid section file and click on Save.

 Step 3: Create a new template file 

We will create a new custom template file which will use the section file created from Step 2. 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 4.

Add a new template:

Choose product in the first drop-down
Call the template banner

Use the Create template button to complete.

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" %} 

Save the file.

Option B

Open your standard product template file:

 Add the following code above the existing code:

{% section "product-banner" %}

Save the file.

 Step 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.

Choose your newly created template and Save the change.

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

 Step 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.

Add Banner Image To Product Pages Without The App

Looking for how to make special product announcements on your Shopify product page, you should definitely put up a banner image. Follow this step-by-step tutorial to add banner image to your Shopify product pages using code.