How do I add full width banner for each of the collections?

Store Design
1

How can I add full width banner (image with text) for each of the collections?

Right now it looks like this:

0.png
0.png2414Ă—1340 445 KB

But I want it to look like this:

2.png
2.png2512Ă—1324 284 KB

2

Hi @analana ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

3

Welcome to shopify community.

Please share your store URL and if your store is password protected then please provide password too.

Thank you.

4

@analana

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

5

thank you. it’s https://delamushka.com

6

thank you. it’s https://delamushka.com

7

Hi @analana ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/component-collection-hero.css->paste below code at the bottom of the file:
@media (min-width: 1280px) {
.collection-hero__image-container {
     margin-right: calc((100vw - 110rem) / 2 * (-1));
}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

8

@analana

thanks for url can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/component-collection-hero.css->paste below code at the bottom of the file.
.collection-hero.collection-hero--with-image {
    background: #fbf1ee;
    padding: 0;
}
.collection-hero--with-image .collection-hero__inner {
    padding: 0;
    max-width: 100%;
}
.collection-hero__image-container {
    min-height: 40rem;
}
.collection-hero--with-image .collection-hero__text-wrapper {
    padding: 4rem;
}
9

Thank you, it looks beautiful now!

I do have one more question, that probably requires some type of coding as well.

How do I center each collection’s title? see the photo attached. Thank you in advance.

Screen Shot 2022-04-03 at 10.30.44 AM.png
Screen Shot 2022-04-03 at 10.30.44 AM.png2484Ă—960 293 KB

10

@analana

yes, please add this code

.collection-hero--with-image .collection-hero__title {text-align: center;}
11

Thank you :slightly_smiling_face:

12

@analana

you are most Welcome Best Of Luck Sale

13

Dear Ketan, hope you are well.

I do have another question. How do I create the same banner (full width image with text) for the “about” page? https://delamushka.com/pages/about

thank you in advance!

14

Dear Ketan, hope you are well.

I do have another question. How do I create the same banner (full width image with text) for the “about” page? https://delamushka.com/pages/about

thank you in advance!

15

@analana

yes, please add section so i will check and guide you

16

Just did. also would like to remove the word About from the page. Thank you in advance!!

17

@analana

yes, sure did you fix right or do you need more help?

18

yes, I want it to be full width (half photo, half background with text)

1.jpg
1.jpg2510Ă—1300 145 KB

right now is like this

Screen Shot 2022-04-09 at 9.15.12 AM.png
Screen Shot 2022-04-09 at 9.15.12 AM.png2372Ă—1294 502 KB

19

@analana

yes but i can’t see that section can you please show me

20

sorry, not sure what you mean by “I can’t see that section” :slightly_smiling_face: What do I need to send you?