Dawn: How to get Collection image full width + Name & Description on the image

[PresidentC24]

Hey Shopify Community,

I would like to have my collection image full width and have the collection name and description on top of the full width image. Both for desktop and mobile.

This is how my collection pages look like right now:

As you can see in this screenshot, my collection image is on the right and my collection name and description are on the left. So they all need to be center aligned.

The theme I'm using is Dawn.

Help would be very much appreciated 🙂

Thank you!

[zaczee]

Hi,

Can you share your store url

[BSS-Commerce]

Hi @PresidentC24 ,
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

[magenest]

Hi @PresidentC24, we tried to create it in our page, and here is our solution

Go to Online store > theme > customize > setting > custom CSS and add the below CSS

.collection-hero__inner.page-width {
position: relative;
height: 200px;
}
.collection-hero__text-wrapper {
position: absolute;
height: 100%;
z-index: 999;
}

.collection-hero__image-container.media.gradient {
margin-left: 0 !important;
position: absolute;
width: 100%;
height: 100%;
}

The result: https://prnt.sc/ZQTlfV2bXmpf

If you need further support, please provide us with your store URL and password (if any), and we will be happy to help you with any of your questions.

[PresidentC24]

Hi @magenest , thanks that worked for the full width image. Do you also know how to center align the collection title and description?

Appreciate your help 🙂

[magenest]

Yes @PresidentC24, to center align the collection title and description, you can add this CSS:

.collection-hero__text-wrapper {
position: absolute;
height: 100%;
z-index: 999;
left: 50%;
transform: translateX(-50%);
}