How to Add H1 to Homepage

Solved
siliconestuff
New Member
4 0 0

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.

 

 

0 Likes
andrew_ecomloop
Shopify Partner
39 1 10

This is an 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>
ecomloop
We help uncommon businesses succeed in the digital economy
Have an interesting project? Send a message or visit ecomloop.com
siliconestuff
New Member
4 0 0

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>

 

0 Likes
LudoP
New Member
1 0 0

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

0 Likes
Yuga-P
Tourist
19 0 1
<h1 class="h1 mega-title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">{{ section.settings.title | escape }}</h1>
0 Likes
in8society
New Member
1 0 0

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. 

0 Likes