How to Add H1 to Homepage

[siliconestuff]

Somehow, it reads that I do not have an H1 on my homepage. I would like to change this so that the H1 on the homepage is the name of my website. However, I would not like this to interfere with the H1s I have for my product pages, blog posts, etc, i.e. by editing the code so that the header always says that my site title is my H1.

I am having this issue with all four of my Shopify sites.  I am using Debut.

If someone from Shopify could help me with this that would be of great service to me and everyone else who undoubtedly has this issue.

[andrew_ecomloop · Accepted solution]

The Debut theme has an H2 tag on the hero image text, which can be changed to an H1 tag. 

Go to the Theme Editor, then find the hero.liquid file. Search for the h2 text in a line like this: 

<h2 class="h1 mega-title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">{{ section.settings.title | escape }}</h2>

and change the h2 to h1

<h1 class="h1 mega-title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">{{ section.settings.title | escape }}</h1>

[siliconestuff]

Thanks Andrew!

---

@andrew_ecomloop wrote:

The Debut theme has an H2 tag on the hero image text, which can be changed to an H1 tag. 

Go to the Theme Editor, then find the hero.liquid file. Search for the h2 text in a line like this: 

<h2 class="h1 mega-title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">{{ section.settings.title | escape }}</h2>

and change the h2 to h1

<h1 class="h1 mega-title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">{{ section.settings.title | escape }}</h1>

---

[LudoP]

Hi !

It can help, so i post this solution here, because i've spent so much time on it...

If you're using Debut Theme and if your homepage is like mine : logo in your header + slideshow or image with a CTA + a rich text section just under this.

If you want to place a h1 on the title of your rich text section, you should :

- find the file rich-text.liquid and edit it

- replace

        <div class="rich-text__heading--{{ section.settings.text_size }} text-center">
          <h2 class="h3">{{ section.settings.section_title | escape }}</h2>

by

        <div class="rich-text__heading--{{ section.settings.text_size }} text-center">
          <h1 class="h3">{{ section.settings.section_title | escape }}</h1>

Beware : if you have several rich text sections on your HP, i'm not sure but il may create several h1 on your HP, and that can be bad for your SEO.

I guess it would be a problem as well if you use rich text sections on other pages. But it's not my case and i've made no test.

But i can help, it works fine for me 😉

[Yuga-P]

<h1 class="h1 mega-title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">{{ section.settings.title | escape }}</h1>

[in8society]

Is this the only thing you need to do or do you have to input your website name somewhere in this code as well? Thank you. 

[borntoshave]

I tried this, but it didn´t work. I have 2 of those lines, if i change only one, it stays the same, if a change both It shows that i have 2 h1... one with nothing and the other only with the name of my shop. And also how can i put the h1 that i want?

Thanks!

[Aysiya]

Hi @andrew_ecomloop thank you for the solution. 

Is there a way of adding a target keyword into this line of code?