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

PresidentC24
Visitor
2 0 0

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:

 

Collection image, name, description center aligned.jpg

 

 

 

 

 

 

 

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!

Replies 5 (5)

zaczee
Globetrotter
848 46 42

Hi,

 

Can you share your store url

BSS-Commerce
Shopify Expert
3477 461 515

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.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

magenest
Shopify Partner
151 9 15

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.

Magenest - One-stop Digital Solution Provider
- Don’t forget to drop a thumbs-up and Mark it as a Solution if you find our response useful
- Elevate your online business with our Shopify experts and professional designers
PresidentC24
Visitor
2 0 0

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
Shopify Partner
151 9 15

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%);
}

 

Magenest - One-stop Digital Solution Provider
- Don’t forget to drop a thumbs-up and Mark it as a Solution if you find our response useful
- Elevate your online business with our Shopify experts and professional designers