How to Add Banner Image to Product Pages Without The App - Quick Shopify Tutorial
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.
Be sure to check out more of our Shopify coding tutorials on Ecom Experts.
Guides
- How To Create CUSTOM PRODUCT OPTIONS on Shopify 2.0
- How To Open External Links In A New Tab - Easy Shopify Tutorial
- How To Add Before And After Slider To Shopify - Easy 2022 Tutorial
- How To Add a Background Video To Shopify For Free
- How To Embed TikTok Videos To Any Shopify Page For Free
- Create Product Bundles Without The App - 2022 Easy Shopify Tutorial!
- Add Back to Top Button on Shopify Using Code: Detailed Tutorial
- How to Add A Custom Cart Icon on Shopify Using Code: Detailed Tutorial
- How to Add Breadcrumb Navigation to Your Shopify Store: DIY Tutorial Using Code
- How to Add Sales Countdown Timer to Your Shopify Store
- Cumulative Layout Shift Optimization: Causes and How to Measure It
- Ask How Customers Heard About Your Store On The Cart Page - 2022 Shopify Tutorial
- How to create a simple Quick View without app usage to your Shopify store
- Add A Multiple Currency Selector to Your Shopify Store Using Code Tutorial
- How to Create A Page of Collections on Shopify Using Code
- Show The Number of Products Left in Stock on Your Shopify Product Page
- Change the Number of Products in the Collection Page- Shopify Tutorial
- DIY Guide to Embed A YouTube Video in Shopify Product Page Tutorial
- Add a Message to the Shopify Product Pages by Using Product Tags - 2022 Easy Tutorial
- How to Add a Delivery Date Picker to Your Cart Page - Easy Step-By-Step Shopify Tutorial
- How To Create A Stunning Parallax Scrolling Section In Your Shopify Store Tutorial
- 6-step Tutorial on How to Add Wholesale To Shopify Store Without Shopify Plus
- How to Add Banner Image to Product Pages Without The App - Quick Shopify Tutorial
- How to add Hover Effect on Main Navigation Bar In Shopify
- How to Add A Gallery Page to Your Shopify Store without the App
- Disable Right-click to Protect Your Images on Shopify Using Code - Tutorial
- How to Auto Hide Sold Out Products on Shopify: DIY Tutorial
- DIY Code: How To Add Continue Shopping Button To Your Shopify Cart Page
- How to Create Custom Product Options on Shopify Without the App in 2022
- How to Select Variants By Clicking Their Images on Shopify
- How to Create a Custom Note Field on Your Shopify Cart Page
- How to Enable Custom File Upload Product Options on Shopify
- How To Show An Alternate Product Image On Your Shopify - Easy Step-By-Step Tutorial
- Step-by-Step Tutorial to Set Up Facebook Messenger Chat On Shopify Without App
- DIY Code To Add a Size Chart to Shopify Product Pages
- How To Redirect Shopify Customers After Login, Logout & Account Creation
- 4 Steps to Create a Sticky Header on Shopify: DIY Code
- How to Add Featured Product Slider To Your Shopify Store: Step-By-Step Tutorial
- Shopify Product Description Tabs: 5 easy steps to create your own collapsable descriptions
- Shopify Quick ADD TO CART Button On Collection Page Without The App
- How To Add a CUSTOM FONT To Your Shopify Store
LEARN MORE
Get ahead with the latest in e-commerce and Shopify Plus

How Headphones.com Mobile Speed Score Went From 21 to 76 In 48 Hours