Small Default Collection heading. Unable to make larger

Store Design

Topic summary

Issue: The collection page H1 heading was smaller than other site H1s, rendering at 1.6em instead of the expected 3.0em. Disabling the 1.6em rule in browser dev tools restored the correct size, indicating a CSS override on the collection template.

Context: Store URL and screenshots were shared. The specific heading to adjust was the collection page title “Choose your six pack.”

Fix: Add a CSS override in base.css targeting the collection template header H1 to enforce the desired size. Suggested selector: #shopify-section-collection-template .section-header.text-center h1 with font-size set to 40px and !important to override existing styles. An equivalent selector including the leading div was also provided; both achieve the same effect.

Outcome: The change worked immediately and the heading sized correctly across the collection page. The user confirmed success.

Status: Resolved. No further action requested. Images/screenshots supported identifying the affected element but were not required after applying the CSS override.

Summarized with AI on February 20. AI used: gpt-5.
1

hi all,

I’m having an issue with my default collection heading, it is not sizing with the rest of my h1 headings across my site. When looking at the code with inspect, font size 1.6em is being used, instead of the font size 3.0em (when clicking the box to unselect 1.6em the font reverts to 3.0em and is the correct size). I have also included the code from the collection template if that helps.

Ideally i’d like to be able to size all h1 headings tot he same size.

Can anyone give me a hand on this?

Thanks

Screenshot 2022-04-09 180353.png
Screenshot 2022-04-09 180353.png1325×715 59.5 KB

Shopify issue1.png
Shopify issue1.png697×377 13.8 KB

1 Like
2

@Hightide
Welcome to the Shopify community!
Thanks for your good question.
Please share your store URL.
So that I will check and let you know the exact solution here.

1 Like
3

Thanks @Zworthkey :slightly_smiling_face:

URL is - www.persysandco.com

i will send the password to you over message.

Thanks

4

@Hightide
Kindly share screenshot of it,
Which heading you want to change or the url

1 Like
5

It is the heading on the store page. Choose your six pack

Screenshot 2022-04-09 184304.png
Screenshot 2022-04-09 184304.png1117×262 6.09 KB

6

@Hightide

div#shopify-section-collection-template .section-header.text-center h1 {
    font-size: 40px !important;
}

Add this code in the base.css

2 Likes
7

Bingo! Works like a charm. Thanks so much @Zworthkey

Very much appreciated!!

8

Hi @Hightide ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css->paste below code at the bottom of the file:
#shopify-section-collection-template .section-header.text-center h1 {
    font-size: 40px !important;
}

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

Best regards.

9

@Hightide
Kindly like and Accept our Solution if helpful.

1 Like