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

[greenvalleycode]

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? 

[RainbowGlitter]

So something like this?

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.

[Guleria]

Hello @greenvalleycode ,

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

[greenvalleycode]

@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]

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.  

[greenvalleycode]

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

[Guleria]

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

[greenvalleycode]

lol 🙄