How can I add a banner to each product page?

Store Design
1

Hello,

I am trying to add banner image to each page. Right now I only have banner on the main home page and I am trying to add banner to each product page.

For example, if you visit our website on motowntress.com, we have many menus such as hot&new, the m premium collection, human hair, lace wig, etc. If you click on each menu, we only have text and images of our items. I want to add a banner like we have on the main home page to each menu page.

Is that something that I can do?

Thank you for your help in advance.

2

hi @MotownTress !

On this case, you can go to Customize theme and find the settings maybe have the setting image banner section on page. If don’t exists, you need go to code file and implement it.

3

Hi I tried changing the setting, but I couldn’t find a way to add banner. How do I edit to code?

4

@MotownTress

yep! so the issue need go to code file and implement directly in code the thing you want, if you don’t familiar working with code, i think you should be ask help from developer.
if you want a developer help directly you can contact with me or other developer you want.
Skype:tvk_1990

Hope will helpful to you!

5

Hi @MotownTress ,

Please follow the steps below:

  • Step 1: Go to Settings > Metafields > collection > Add definition.

Screenshot.png
Screenshot.png1257×856 30.3 KB

  • Step 2: Go to each collection and add a banner for it.

Screenshot.png
Screenshot.png1118×274 6.08 KB

  • Step 3: Go to collection-template.liquid file and add code here:

Screenshot.png
Screenshot.png1359×682 68.3 KB

Code:
1 Like
6

Hello @MotownTress .

The query is already solved. I do have a suggestion for you to add banners on the Home page and product pages. There are apps on the Shopify app store that allow you to do so with ease. You can simply pick the template, and make changes as required with the text that you want or create a completely new one. And easily apply these on required pages without any development effort at all. That’s all. You can use apps like ModeMagic to do the same!

And it doesn’t end there, the app is an all-in-one store conversion kit that helps you run flash sales, clearance sale, % off discounts, stock & inventory updates, announcements, product bundles +more… Feel free to explore the app with the free plan available.

Thanks, hope this would make things easier :slightly_smiling_face:

7

Thanks for sharing the code! Adding banners is not my specialty, and I really needed help. Recently, our company ordered banners from https://promolayer.io/%e3%81%8b%e3%81%94%e8%90%bd%e3%81%a1%e5%af%be%e7%ad%96/%e3%83%90%e3%83%8a%e3%83%bc%e7%b4%a0%e6%9d%90%e3%81%8a%e3%81%99%e3%81%99%e3%82%81%e3%82%b5%e3%82%a4%e3%83%8837%e9%81%b8/, and I needed to install them into the website code and make sure they are displayed correctly. The banners look really nice and make the website look professionally made. I believe it will help increase sales a lot because customers like it when a website looks and works fine.

1 Like