How do I set up and define the <h1> tag on my homepage?

The following article does not apply to our Flex theme. Currently, the logo/shop name will be the <h1> in Flex.

An important part of search engine optimization is to include a well crafted <h1> tag on every page, including the homepage.

In our Turbo, Parallax, Retina, and Responsive themes, the <h1> tag is determined by the first slide in your slideshow on your homepage.

To add or change the <h1> tag on your homepage:

• If you're using a sections compatible theme, open the slideshow section and edit the first image's heading text.
• If you're not using sections, open Home page - slideshow and edit the heading under the first slide.

This is the preferred method for adding an <h1> tag to your homepage and is the best way to conform to SEO best practices. In situations where you cannot use this approach, you can use these alternative methods:

Hiding the text in a slide

If you prefer to not have any text in your first slide but still need an <h1> tag on the homepage, you can follow these steps to "hide" it:

• First, enter your desired <h1> tag text in the Heading field as described above.
  
  • Next, open your styles.css.liquid by clicking here or open the code editor and navigating to the "Assets" folder and add this code to the end of the file:
    .flex-caption h1.headline { font-size: 10px; position: absolute; top: -9999px; left: -9999px; }
  
  Specific for Turbo versions 4.1.2 and newer (What theme version am I using?):
  • Next, open your styles.scss.liquid by clicking here or open the code editor and navigating to the "Assets" folder and add this code to the end of the file:
    .homepage-slideshow h1.headline { font-size: 10px; position: absolute; top: -9999px; left: -9999px; }
  
  Specific for Parallax
  • Next, open your styles.css.liquid by clicking here or open the code editor and navigating to the "Assets" folder and add this code to the end of the file:
    .homepage_slider h1.headline { font-size: 10px; position: absolute; top: -9999px; left: -9999px; }
  
  Specific for Retina versions 4.7.0 and newer (What theme version am I using?):
  • Next, open your styles.css.liquid by clicking here or open the code editor and navigating to the "Assets" folder and add this code to the end of the file:
    h1.slideshow__caption-headline { font-size: 10px; position: absolute; top: -9999px; left: -9999px; }
  This code will hide the <h1> tag content but still allow it to be detected by search engines.

Manually adding the tag

If do not use a slide show on your homepage, you can manually add an <h1> tag using these steps:

• Open index.liquid by clicking here or opening the code editor.
• At the top of the file, enter <h1 class="custom-h1">Your text here</h1>
• Next, open your styles.scss.liquid and add this code to the end of the file:
  h1.custom-h1 { font-size: 10px; position: absolute; top: -9999px; left: -9999px; }