How can I center the heading and add a sub-heading on my home page using Dawn theme?

[contactdaiquiri]

Hi,

I would like to customize the Heading of this collage on my home page.

I would like it to me centered, and I would like to add a sub-heading that says “DAÏQUIRI LILAC”.

I think I found the coding part related to it but I don’t know how to achieve what I want.

Could someone help me ? Thanks a lot !

Theme : Dawn 6.0.2

Website : www.daiquiriparis.com

Screenshots of website & coding locations

Code

"settings": {
        "heading": "NEW IN",
        "heading_size": "h1",
        "desktop_layout": "left",
        "mobile_layout": "collage",
        "color_scheme": "background-1",
        "padding_top": 36,
        "padding_bottom": 36

[made4Uo]

Hi @contactdaiquiri

Please follow the instruction below to make the text center.

1. From you Admin page, go to Online store > Themes > Customize

2. Go to Section, click the Collage, then open the Custom CSS

3. Place the code below inside the Custom CSS

.collage__item .card__information > * {
    text-align: center;
}

[contactdaiquiri]

Hi ! Thanks a lot for trying to help, unfortunately it does not work (nothing happens).

Any other idea ?

[made4Uo]

Hi @contactdaiquiri

Sorry. I misunderstood. You can follow the instructions below instead

1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
2. Go to Asset folder and open the base.css file
3. At very end of the code, add the code below

#shopify-section-template--16386916352226__1408be1f-536f-480a-89d7-7bb733ccd091 h2.collage-wrapper-title.h1 {
    text-align: center;
    position: relative;
}

#shopify-section-template--16386916352226__1408be1f-536f-480a-89d7-7bb733ccd091 h2.collage-wrapper-title.h1:after {
    content: "DAÏQUIRI LILAC";
    width: 100%;
    display: block;
    font-size: 20px;
}

Result here

[contactdaiquiri]

Thank you so much! It works!

What could I add to do the same for the “featured collections” sections ? I would like the Heading and description to be centered. Thanks so much!

[oscprofessional]

Hello @contactdaiquiri

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.collection__title.title-wrapper {
    text-align: center;
}

[contactdaiquiri]

Thank you so much ! Is it possible to center the products as well ? They are aligned on the left right now.

Thanks a lot, I really appreciate your precious help.

[oscprofessional]

Hello @contactdaiquiri

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.grid--4-col-desktop .grid__item {
    margin: 0 auto;
}

[contactdaiquiri]

Working pretty great!

Except is it possible to center the images next to each other ?

Sorry for multiple requests…

[oscprofessional]

Hello @contactdaiquiri

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.card-information {
    text-align: center !important;
}
.card__content {
    text-align: center !important;
}

[contactdaiquiri]

Hi, thanks a lot ! Unfortunately it did not work (nothing changed).

In case I didn’t make myself clear, I wanted to bring the products’ images closer to one another in the middle, just like the range circled above.

[oscprofessional]

Hello @contactdaiquiri

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.grid {
    justify-content: center;
}
.grid--4-col-desktop .grid__item {
    margin: 0 !important;
}

[contactdaiquiri]

Thanks a lot, you are the best