How to insert an image banner in product page

Technical Q&A
, , , , ,
1

Hi, does anyone knows how to insert an image banner into my product page where each image display a different banner for each collection where it also supports both mobile and desktop.

Screenshot (269).png
Screenshot (269).png1920×1080 299 KB

IF anyone knows how to do it do reach out to me.

Thank You.

2

@Bugbuzz456 you will need page builder app to build product pages, default shopify pages will not provide different images for different pages

3

Hi can it be done with using any coding or you have a app recommendation to try out

4

Hi @Bugbuzz456 , thanks for reaching out.

Could you let me know which theme you are currently using to add the image banner? For example, if you’re using the Dawn theme, here are the steps to address the issue:

  1. Select the Product page template: Go to the theme editor and select the Product Page template. Screenshot
  2. Add a section: Click on Add Section in the editor. Screenshot
  3. Choose Image banner: Select the Image Banner section from the options. Screenshot
  4. Upload your desired image: Choose the image you want to display as the banner. Screenshot

I hope my solution is helpful to you, and please feel free to feedback.

Liz

5

Hello @Bugbuzz456

You will need to modify your product.liquid or main-product.liquid file (depending on your theme) to display the appropriate banner based on the product’s collection.

Steps:- Find Your Product Template File:

  • In your Shopify admin, go to Online Store > Themes > Actions > Edit Code.
  • Locate the product.liquid or main-product.liquid file under the Sections folder.

Insert Banner Code: Add the following code at the top of the product page template, where you want the banner to appear:
{% assign current_collection = product.collections | first %}
{% if current_collection %}

{% endif %} Replace 'collection-handle-1' and 'collection-handle-2' with the actual handles of your collections. Replace 'desktop-banner-1.jpg' and 'mobile-banner-1.jpg' with the filenames of your banner images, which you will upload in the next step.

3. Add Responsive CSS

To handle both desktop and mobile, update your theme’s CSS file (theme.css or styles.css):

.collection-banner {
background-size: cover; /* Ensures the image covers the entire div /
background-position: center; / Centers the image /
background-repeat: no-repeat;
width: 100%; / Ensures it spans the full width /
height: 300px; / Default height for mobile */
}

@media (min-width: 768px) {
.collection-banner {
height: 500px; /* Taller height for desktop */
}
}

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

6

Hi i am using crave theme btw thx for your solution but i am looking to place it in here

IMG_4684.png
IMG_4684.png1284×2778 418 KB

7

@Bugbuzz456 - you can try meta tags coding if you are familiar with it, otherwise needs to use page builder app

8

Hi @Bugbuzz456 , thanks for your feedback.

If you’re using the Crave Theme, here are the steps to address the issue:

  • Choose Collection Template: Start by selecting the Collection Template.
  • Add Section and Block: Add a section and select the block you need. Screenshot
  • Select Image Banner: Finally, choose the Image Banner you want to use.

Please let me know if you have any questions.

Liz

9

Hi thank you for the solution may i know is which part for me to paste.

Screenshot (270).png
Screenshot (270).png1920×1080 198 KB

10

Hi @Bugbuzz456

You can consider creating different collection templates in your theme for each collection:

1/ You can create a template here: https://prnt.sc/AddM0WMLjgsZ

2/ And add this image banner block here: https://prnt.sc/nAMmGJS2rcyw

3/ Go to one collection and assign it to the collection template you have just created here: https://prnt.sc/m8DUFH-gfd_D

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.