Adding a custom banner image to product collection page (all products)

greenvalleycbd
Excursionist
37 0 7

Hi there, I'm trying to add a custom banner image below the header section of my website. Right now it's blank (white) and boring. I want the banner image to render behind the collection title, "Products", spanning the entire width of the webpage. How can I accomplish this? 

Screen Shot 2023-08-04 at 11.08.48 AM.png

Replies 8 (8)

RainbowGlitter
Shopify Partner
18 1 3

So something like this?

RainbowGlitter_0-1691163989956.png

What you can do is add section image banner and remove all the buttons and box on top then just add your image. You can create the image you'd like in canva or any other program and then upload it.

 

If I was able to help you please Like it and Mark it as Solution!

Guleria
Shopify Partner
3095 608 866

Hello @greenvalleycbd ,

 

Add a metafield for collection so you can add a unique banner for each collection.
After that edit the collection template and call the metafield banner just about the heading or the place you need it. 
 
Thanks

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
greenvalleycbd
Excursionist
37 0 7

@Guleria I've done this already, and it works for collection pages, but it does not work on the collections/all (all products) page. Any thoughts?

Guleria
Shopify Partner
3095 608 866

Then create an option in theme collection page settings to add a banner for collections/all and then with a if condition use that banner for collection/all page.  

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
greenvalleycbd
Excursionist
37 0 7

@Guleria can you provide some additional context? Your suggestion is interesting but I don't know how do it. 

Guleria
Shopify Partner
3095 608 866

Actually you need a developer for that. 
btw if you want you can drop me an email for further discussion.  

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
greenvalleycbd
Excursionist
37 0 7

lol 🙄

Ktik-B
Shopify Partner
3 0 0

I am a developer and have completed the same request as per the client's requirements 🙂 Just connect with me so I can explain more 🙂

 

Front.pngAdmin1.pngAdmin2.png