How can I match my collection and page headings in the Dawn theme?

Solved

How can I match my collection and page headings in the Dawn theme?

RWH
Visitor
2 0 0

I am using the dawn theme and the header on the collection pages allowed me to drop "accent 1" colours on them.  (see below)Screenshot 2023-03-02 at 8.30.08 pm.png

Screenshot 2023-03-02 at 8.33.25 pm.png

The Page heading is not a section and I cannot effect how it looks. I want it the same as the collection heading and I don't even know when're to start looking to edit the HTML code. 

 

Can anyone help please

Accepted Solution (1)

infoatcodelab7
Shopify Partner
593 141 156

This is an accepted solution.

@RWH 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Sections> main-page.liquid 

infoatcodelab7_0-1677750620272.png

<div class="main-page-title">
  <h1 class="main-page-title page-title h0">
    {{ page.title | escape }}
  </h1>
</div>

paste below code here

 

infoatcodelab7_1-1677750740820.png

 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Assetsection-main-page.css  and paste this at the bottom of the file:

.main-page-title {
    background: #000;
}
h1.main-page-title.page-title.h0 {
    color: #fff;
    text-align: center;
    max-width: 1500px;
    padding: 25px 0;
    font-size: 40px;
}

 

Want to modify or develop new website, Hire us.
If helpful then please Like and Accept Solution .
Email: info@codelab7.com

View solution in original post

Replies 2 (2)

infoatcodelab7
Shopify Partner
593 141 156

This is an accepted solution.

@RWH 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Sections> main-page.liquid 

infoatcodelab7_0-1677750620272.png

<div class="main-page-title">
  <h1 class="main-page-title page-title h0">
    {{ page.title | escape }}
  </h1>
</div>

paste below code here

 

infoatcodelab7_1-1677750740820.png

 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Assetsection-main-page.css  and paste this at the bottom of the file:

.main-page-title {
    background: #000;
}
h1.main-page-title.page-title.h0 {
    color: #fff;
    text-align: center;
    max-width: 1500px;
    padding: 25px 0;
    font-size: 40px;
}

 

Want to modify or develop new website, Hire us.
If helpful then please Like and Accept Solution .
Email: info@codelab7.com
RWH
Visitor
2 0 0

hi thanks that is great.

One thing, what code need to change to align and fix the text below the header logo like the collection pages. Text is currently centred. 

 

Screenshot 2023-03-02 at 8.30.08 pm.png