How to insert an image banner in product page

[Bugbuzz456]

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. 


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

Thank You. 

[suyash1]

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

[Bugbuzz456]

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

[suyash1]

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

[LizHoang]

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

[Bugbuzz456]

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

 

[LizHoang]

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

[Tech_Coding]

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 %}
<div class="collection-banner"
style="
{% if current_collection.handle == 'collection-handle-1' %}
background-image: url('{{ 'desktop-banner-1.jpg' | asset_url }}');
{% elsif current_collection.handle == 'collection-handle-2' %}
background-image: url('{{ 'desktop-banner-2.jpg' | asset_url }}');
{% else %}
background-image: url('{{ 'default-banner-desktop.jpg' | asset_url }}');
{% endif %}
">
</div>
{% 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.

[Bugbuzz456]

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

[DaisyVo · Accepted solution]

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.