How can I center page titles on the Studio theme?

Store Design
, , ,
1

Hi Community,

I have searched but couldn’t find a solution that worked for me…

I would like to centre the page titles on the standard pages (i.e. not the Collection pages) of the site. Can someone please advise how to go about this?

The pages I would like to centre the titles on are using the “default page” template.

Many thanks in advance!

1 Like
2

Hi @AJPurnell ,

Sorry for experiencing this problem. Would you mind to share your store URL and Password if you have? thanks!

3

Hi @AJPurnell ,

To provide you with the most precise solution in this case, could you please share your page URL ( with pass if your store password is enabled )?

Thank you and hope to hear from you.
Best regards,
GemPages Support Team

4

Hi, thanks for getting back to me. The URL is: www.anitapurnell.com and the password: sowhee
Many thanks!

5

Hi, thanks for getting back to me. The URL is: www.anitapurnell.com and the password: sowhee
Many thanks in advance!

6

Hi @AJPurnell ,

Thank you for the information. Would you mind specify which pages you want to Center the Page titles? Thanks!

7

Hi @AJPurnell

Please follow these steps:

  • First, go to Themes → Edit code
![view-54.png|1856x986](upload://u7qY1dEPbbvpaTjJpacKqxcDzpK.png)
  • Next, go to the Assets folder → select the base.css file. Here, you add this code at the end of the file:
.main-page-title {
  text-align: center !important;
}

I hope that it will work for you.

8

Hi, I would like to centre the page titles on the following pages: About, Commissions, Contact, Postage & Shipping, Returns & Exchanges, Terms & Conditions and Privacy & Cookie Policy. The Collections pages (Originals, Prints, Cards) I would like to keep left aligned as it is currently.
Many thanks

9

Hi @AJPurnell ,

Sorry for experiencing this problem, I understand you would like to centre the page titles.

You can try this code.

  1. Go to themes Click the 3 dots > Edit code >

  2. Go to Asset Folder > click base.css

  3. And Copy, Paste below on the last code on the base.css.

h1.main-page-title.page-title.h0 {
    text-align: center;
}
.footer-block.grid__item.footer-block--menu {
    text-align: right;
}

I hope it helps. Thanks!

10

Hi @AJPurnell

You can check our reply above if you want to center the titles. In addition, to let the titles on the collections pages stay in the current left-aligned state, you can do the following:

  1. Go to Themes → Edit code → navigate to Assets folder → go to global.js file and add the following code:
const windowURL = window.location.href
if(windowURL.includes('/pages/prints') || windowURL.includes('/pages/cards') || windowURL.includes('/collections/')){
  const title = document.querySelector('.main-page-title')
  title.classList.add("left-aligned-title");
}
  1. Next, still in the Assets folder, go to the base.css file and add the following code at the end of the file:
.main-page-title.left-aligned-title{
  text-align: left !important;
}

We hope that it will work for you.