Creating hero banners for each collection - Dawn theme

Shopify Discussion
1

Hi everyone,

I am trying to find a way to have different images at the top of each collection page but have not been able to figure it out on my own.

They currently look like this:

Screen Shot 2023-01-11 at 12.04.05 PM.png
Screen Shot 2023-01-11 at 12.04.05 PM.png2402×1454 176 KB

But I want them to look like this:

Screen Shot 2023-01-11 at 12.04.44 PM.png
Screen Shot 2023-01-11 at 12.04.44 PM.png2434×1550 293 KB

Each collection will have its own image. The closest I got was adding an image banner section to the template and then “hiding” the collection banner from the template. But that just populated the same image across each collection.

Preview link: https://3ebpg0c7w0sr8z4s-66140537063.shopifypreview.com

I’m new to this so hope I’m making sense! Thanks in advance.

2

Hello @littlecoterie

For full width banner you can below code in ‘Assets > base.css’

.collection-hero__text-wrapper .collection-hero__description.rte {
  width: 100%;
  max-width: 100%;
}

If you want to show different banners in all collection you can add collection banner while creating the collection.

Let me know if you have any queries.

3

Hi. Thanks for the quick response. That seemed to have worked, however is there way to just have the image and not the collection title?

I don’t want it to say candles + candleholders like it does in the top left.

Screen Shot 2023-01-11 at 12.38.46 PM.png
Screen Shot 2023-01-11 at 12.38.46 PM.png2354×1144 159 KB

4

@littlecoterie For this you have search the class ‘collection-hero__title’ in ‘main-collection.liquid’ file and comment/remove it.

If you have any issue with code then let me know.

5

Success! Thanks

6

So I tried this, but it didn’t seem to work for me… or make my collection image center in or go all the way across the screen? Any ideas?

7

Hi, for me to span the collection banner, I went to the “default Collection”, “Collection Banner”, and then pasted this code in the “Custom CSS” for that section.

.collection-hero__image-container {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}

Seems to be a lean way to do it. Its my own code, hopefully it helps. :slightly_smiling_face:

8

Additionally, place this code below that code to hide header text.

.collection-hero–with-image .collection-hero__text-wrapper {
display: none;
}

Good Luck :slightly_smiling_face:

9

Additionally, you can add this code to “hide” the banner text. Go to “default Collection”, “Collection Banner”, and then paste this code into the “Custom CSS” for that section above or below any other code in there.

.collection-hero–with-image .collection-hero__text-wrapper {
display: none;
}