Need Help Altering H1 Hero Title Using JavaScript

Hi there,

I am using the theme Liebling and I have noticed I cannot change the H1 header in the hero area. That said, I was trying to use JavaScript to target the header but I cannot seem to get it to work.

I have tried adding the script below to the “code injection” but it doesn’t seem to work.

const newHeader = document.querySelector(‘.m-hero-title’); = ‘m-hero-title-java’;

document.getElementById(“m-hero-title”).innerHTML = “New header!”;

The ID tag doesn’t seem to be getting added to the H1 element (HTML class “m-hero-title”) in the header, which I believe is needed to use “document.getElementById().innerHTML” and edit the HTML content.

My questions are:

Does anyone have any thoughts on why it isn’t working?

Is there an easier way (whether javascript or not) to change the H1 text in the hero area? (I only have an HTML class to work from, no ID)

Any help is hugely appreciated,

Is there a typo? You’re adding an id with -java, but then you’re searching for an element without the -java?

Hi Cathy,

My coding experience is very limited. Are you able to explain?

Thanks for your comment

The hero H1 is controlled by your site title, so you could update your site title if you want to change it.

If you want to do this with JavaScript, you can do the following:

const h1 = document.querySelector(".m-hero-title");
h1.textContent = "My brand new title";
1 Like

Hey Ryan,

I really appreciate the response. It means a lot.

In response to your first comment, the theme I am using inputs the site title as the H1 header. However, I want the site title to stay the same and alter the H1 header.

That said, I gave your suggestion a go but for some reason, it still doesn’t seem to be working. If you have 2secs, I have attached a screenshot and I am curious if you notice what the issue is?

The left side shows the inspected title and the H1 element and the class “.m-hero-title”

The right side shows my code injection with the newly added JavaScript at the top (circled in red)

Any insight is hugely appreciated!

1 Like

I may be tired today, but I’m not seeing the problem. Can you check your console log to see if there’s an error message? (In Chrome, press F12, then click the Console tab.)

For debugging purposes, consider adding


between the two existing lines. That’ll tell you if the querySelector is actually finding it.

Oh, hang on. I found it. Move that code to the site FOOTER. You’re trying to change the text before the browser has actually drawn it. :)


This is the magic that’s missing. Nice catch, @Cathy_Sarisky!


@sebbunney, It’s probably going to flicker. (Will depend on browser speed.) I’m a little surprised it’s hard-coded, but it might be. (Check in the Ghost admin pages, under site settings - it might be there, the same place you can change your theme color.) If you need it changed in a way that doesn’t flicker (because it’s right to start), hit me up. Five minute job. :slight_smile: [Assumes you’re not on the Ghost Pro starter plan. If you’re on the starter plan, then the code injection above is the best option.]

1 Like

One other option I thought of:

Change your site title (GeneralTitle) to what you want to have in the H1. Then, update Meta title to what you want the site to be called. This will be used in search engine results and the browser tab.

This approach might not work, in which case you have the other one, but I thought I’d throw it out there.


You two are the best. That worked. Ahh, I cannot thank you enough. It really means a lot.


Hey Cathy or @RyanF

I just realized an issue! The HTML class “.m-hero-title” is not unique to the home page. Every page uses the same HTML class. That said, do you know of a way to specifically target the home page H1 “.m-hero-title”?

Can you specify a URL to target in JavaScript or have a boolean to check whether you’re on the homepage?

Thanks in advance for any insight,

Spent some time digging further and managed to solve it. Sorry for tagging you, only to figure it out.

For anyone looking to do the same. Here is how I managed to target a specific URL through JavaScript.

1 Like

That solution works! Nice. I’ll throw one more out there.

If developers use it, Ghost outputs a specific class for different contexts. For the home page, it outputs the home-template class. That means you can use it to target elements on the home page.

const h1 = document.querySelector(".home-template .m-hero-title");
1 Like

Ahh amazing. Thanks a ton Ryan!