How to centre headings?

Shopify Discussion

Topic summary

A user is trying to center headings across their Shopify store pages. They successfully centered the featured collection heading but cannot center other headings.

Solutions Provided:

Three community members offered CSS-based solutions:

  1. theme.liquid modification: Add custom CSS code above the </body> tag in the theme.liquid file

  2. main.css editing: Insert CSS targeting .title-wrapper-with-link class at the bottom of the main.css (or base.css/style.css) file with justify-content: center property

  3. base.css targeting: Add CSS for .collection-hero .hero__title class with text-align: center !important in the base.css file

Outcome:

The original poster initially reported one solution didn’t work, but later confirmed success with “Great thanks,” indicating the issue was resolved. All responders requested the user mark helpful posts as solutions and like them.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

How can I centre headings across my pages? I have been able to center the featured collection at the top of the page, but none of the rest. Any ideas?

https://2c6852-ef.myshopify.com

pass: aubril

thanks!

1 Like
2

Hey @Jj37

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1719776253857.png
Moeed_0-1719776253857.png789Ă—899 410 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hi @Jj37

Check this one.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
.title-wrapper-with-link.title-wrapper--self-padded-tablet-down.title-wrapper--no-top-margin {
    justify-content: center;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
4

Hello @Jj37 ,

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 of the file.

.collection-hero 
.collection-hero__title {
    text-align: center !important;
}
5

No, this did not work

6

Great thanks