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

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

For Pixel Union themes, the <h1> is typically applied to the shop name, or the heading in your homepage. Please check the specific theme below for more information. 

• Empire
• Atlantic
• Editions
• Grid
• Startup
• Tailor
• Launch
• Pacific

• Empire

  In Empire, the <h1> is applied to the shop name on the Homepage. 

  If a logo has been uploaded to replace the shop name, this removes the <h1>.

  Where is the <h1> located by default? 
  Adding <h1> in the logo
  Adding a custom <h1> in the theme customizer
  Adding a custom <h1> in the theme code
  
  

  Where is the <h1> located by default? 

  You can find the code for it by following the steps below: 

  1. Go to the theme code editor by clicking [ ... ] and choosing Edit code
  2. Open the sections/static-header.liquid
  3. Scroll down to line 121 (tentative line depending on your theme version and/or prior customization): 

  {% if template == 'index' %}
  <h1 class="site-logo-text">
          {{ shop.name }}
       </h1>
  {% else %}
  <span class="site-logo-text">
          {{ shop.name }}
       </span>
  {% endif %}

  Adding <h1> in the logo

  If you would like to continue using the <h1> tag for the logo, it's possible to make the changes through code customization. 

  1. Open the sections/static-header.liquid
  2. Use CTRL + F or CMD + F in the file and search for section.settings.logo
  This is typically in line 106 before any code customization. 
  
  
  View the full logo code block here

  Click the image for a larger version

  
  3. Change the first line from <div class="site-header-logo"> to <h1 class="site-header-logo"> and replace </div> with </h1>
  
  

  <div class="site-header-logo">
      <a class="site-logo" 
      href="{{ routes.root_url }}"> 
          {% if section.settings.logo %} 
  {% assign logo_alt = section.settings.logo.alt %} 
  {% if logo_alt == '' %} 
      {% assign logo_alt = shop.name | strip %} 
  {% endif %}
  
  [...]
  
      </a>
  </div> 

  4. After changing the class for the lines, in the same code block, look for <h1 class="site-logo-text"> 
  

  <h1 class="site-header-logo">
  <a class="site-logo" 
  
  [...]
  
  {% if template == 'index' %}
      <h1 class="site-logo-text">
          {{ shop.name }}
      </h1>
  {% else %}
      <h1><span class="site-logo-text">
          {{ brand.logo }}
      </span>
  
  </a>
  </h1>

  5. Replace <h1 class="site-logo-text"> with <span class="site-logo-text"> and </h1> with </span>
  6. Save the changes. 
  
  

  Adding a custom <h1> in the theme customizer

  1. In your Shopify admin, go to the theme theme customizer by clicking Online Store > Themes > Customize
  2. In the theme customizer, add the section Custom liquid 
  
  3. In the Custom liquid section, add the following: 

  <h1>Insert your text here</h1>

  4. Save the changes. 

  Adding a custom <h1> in the theme code

  If you would like to define your <h1> manually, code customization is also needed and this would require removing the default code block that contains the tag, and replacing it with a new one. 

  1. Open the sections/static-header.liquid
  2. Scroll down to line 121 (tentative line depending on your theme version and/or prior customization): 

  {% if template == 'index' %}
  <h1 class="site-logo-text">
             {{ shop.name }}
          </h1>
  {% else %}
  <span class="site-logo-text">
             {{ shop.name }}
          </span>
  {% endif %}

  3. Delete the first {{ shop.name }} and replace it with your desired text or phrase. 
  4. Save the changes.
  
  

• Atlantic

  In Atlantic, the <h1> is applied to the store name or the logo if one is uploaded to your theme settings. Most of the heading in the storefront uses the <h2> tag.
  

  Where is the <h1> located by default? 

  You can find the code for it by following the steps below: 

  1. Go to the theme code editor by clicking [ ... ] and choosing Edit code
  2. Open the sections/header-storetitle.liquid
  3. Scroll down to line 22 (tentative line depending on your theme version and/or prior customization): 

  {% if template == 'index' or template contains 'customers' %}
  {% assign heading = 'h1' %}
  {% endif %}

  Adding a custom <h1> in the theme

  If you would like to manually add an <h1> tag to your homepage, you can do the following steps: 
  
  1. In your Shopify admin, go to the theme theme customizer by clicking Online Store > Themes > Customize
  2. In the theme customizer, add the section Custom liquid 
  
  3. In the Custom liquid section, add the following: 

  <h1>Insert your text here</h1>

  4. Save the changes. 
  
  

• Editions

  In Editions, the <h1> is added in the logo.
  If there's no logo uploaded in the theme, the store name has the <h1> tag instead.

  Where is the <h1> located by default? 

  You can find the code for it by following the steps below: 

  1. Go to the theme code editor by clicking [ ... ] and choosing Edit code
  2. Open the static-header.liquid file 
  3. Scroll down to line 69 (tentative line depending on your theme version and/or prior customization): 

  You can find the <h1> code in the static-header.liquid 
  

  static-header.liquid

  Click the image for a larger version

  Adding a custom <h1> in the theme customizer

  1. In your Shopify admin, go to the theme theme customizer by clicking Online Store > Themes > Customize
  2. In the theme customizer, add the section Custom liquid 
  
  3. In the Custom liquid section, add the following: 

  <h1>Insert your text here</h1>

  4. Save the changes. 

• Grid

  In Grid, the <h1> is applied to the store name. If there is a logo uploaded to the theme, the <h1> is removed. 

  Where is the <h1> located by default? 

  You can find the code for it by following the steps below: 

  1. Go to the theme code editor by clicking [ ... ] and choosing Edit code
  2. Open the sections/header.liquid
  3. Scroll down to line 130 (tentative line depending on your theme version and/or prior customization): 

  <a class="logo-link" href="{{ routes.root_url }}">
      {%- if section.settings.logo -%}
         {%
          render 'rimg',
          img: section.settings.logo,
          class: 'logo-image',
          size: '200x100',
          focal_point: section.settings.logo.presentation.focal_point,
         %}
      {%- else -%}
  <h1>{{- shop.name -}}</h1>
      {%- endif -%}
  </a>

  
  Adding a custom <h1> in the theme customizer

  1. In your Shopify admin, go to the theme theme customizer by clicking Online Store > Themes > Customize
  2. In the theme customizer, add the section Custom liquid 
  
  3. In the Custom liquid section, add the following: 

  <h1>Insert your text here</h1>

  4. Save the changes. 

• Startup

  In Startup, the <h1> is added in the store name. If a logo is uploaded to the theme, the <h1> is only applied on the homepage. All other pages use an <h2>.

  Where is the <h1> located by default? 

  You can find the code for it by following the steps below: 

  1. Go to the theme code editor by clicking [ ... ] and choosing Edit code
  2. Open the sections/general-header.liquid
  3. Scroll down to line 178 (tentative line depending on your theme version and/or prior customization) - this is a long code block and wraps up at around line 241. 

  {% if template contains 'index' %}
       <h1 class="site-header__title">
  {% else %}
       <h2 class="site-header__title">
  {% endif %} 
  
  [...]
  
  <span class="site-header__site-name">{{ shop.name }}</span>
      </a>
  {% if template contains 'index' %}
      </h1>
  {% else %}
      </h2>
  {% endif %}

  
  

  Adding a custom <h1> in the theme customizer

  1. In your Shopify admin, go to the theme theme customizer by clicking Online Store > Themes > Customize
  2. In the theme customizer, add the section Custom liquid 
  

  3. In the Custom liquid section, add the following: 

  <h1>Insert your text here</h1>

  4. Save the changes. 

• Tailor

  In Tailor, the <h1> is applied to the store name only in the Homepage. If there is a logo uploaded to the theme, the <h1> is applied to it instead. The store name or the logo would use an <h2> tag when viewing other pages. 

  Where is the <h1> located by default? 

  You can find the code for it by following the steps below: 

  1. Go to the theme code editor by clicking [ ... ] and choosing Edit code
  2. Open the sections/header.liquid
  3. Scroll down to line 1145 (tentative line depending on your theme version and/or prior customization) - this is a long code block and wraps up at around line 1190. 

  {% if template contains 'index' %}
        <h1 class="header__title">
    {% else %}
        <h2 class="header__title">
  
  [ ... ]
  
    {% if template contains 'index' %}
        </h1>
    {% else %}
        </h2>
    {% endif %}
  </div>

  Adding a custom <h1> in the theme customizer

  1. In your Shopify admin, go to the theme theme customizer by clicking Online Store > Themes > Customize
  2. In the theme customizer, add the section Custom liquid or Custom HTML 
  

  3. In the Custom liquid or Custom HTML section, add the following: 

  <h1>Insert your text here</h1>

  4. Save the changes. 

• Launch

  In Launch, the <h1> is added to the logo in the Homepage. 

  Where is the <h1> located by default? 

  You can find the code for it by following the steps below: 

  1. Go to the theme code editor by clicking [ ... ] and choosing Edit code
  2. Open the sections/static-header.liquid
  3. Scroll down to line 57 (tentative line depending on your theme version and/or prior customization): 

  {% assign logo_tag = 'div' %}
      {% if template.name == 'index' %}
  {% assign logo_tag = 'h1' %}
      {% endif %}

  Adding a custom <h1> in the theme customizer

  1. In your Shopify admin, go to the theme theme customizer by clicking Online Store > Themes > Customize
  2. In the theme customizer, add the section Custom liquid 
  
  

  3. In the Custom liquid section, add the following: 

  <h1>Insert your text here</h1>

  4. Save the changes. 

   

• Pacific

  In Pacific, the <h1> is applied to the logo in the Homepage. If there is no logo uploaded to the theme, the <h1> is applied to the store name. 
  
  In Collection pages, you will also find that the page title has an <h1> tag. 

  Where is the <h1> located by default? 

  You can find the code(s) for it by following the steps below: 

  1. Go to the theme code editor by clicking [ ... ] and choosing Edit code
  2. Open the sections/header.liquid or the page-header.liquid
  3. Scroll down to line 37 (tentative line depending on your theme version and/or prior customization) - this is a long code block and wraps up at around line 93. 

  header.liquid

  {% capture header_branding %}
  <div class="branding" data-header-branding>
     {% if logo_desktop != blank or logo_mobile != blank %}
        {% if template.name == 'index' %}
           <h1 class="site-title site-title-logo">
     {% endif %}
  
  [ ... ] 
  
     {% else %}
           <span class="site-title header-logo-mobile">{{ shop.name }}</span>
     {% endif %}
  </a>
     {% if template.name == 'index' %}
  </h1>
  
  [ ... ]
  
  <h1 class="site-title"><a href="{{ routes.root_url }}">{{ shop.name }}</a></h1>
     {% else %}
  <div class="site-title"><a href="{{ routes.root_url }}">{{ shop.name }}</a></div>
     {% endif %}
       {% endif %}
  </div>
  {% endcapture %}

  page-header.liquid

  {% if template contains 'collections' %}
     <h1 class="page-title">
        {{ 'collections.listing.title' | t }}
     </h1>

  Adding a custom <h1> in the theme customizer

  1. In your Shopify admin, go to the theme theme customizer by clicking Online Store > Themes > Customize
  2. In the theme customizer, add the section Custom liquid 
  

  3. In the Custom liquid section, add the following: 

  <h1>Insert your text here</h1>

  4. Save the changes. 

For some of the templates, a visually-hidden class is added to the <h1> element. This means that while it is present for accessibility purposes, it doesn't impact the layout of the page. 

As an example, some of our themes like Empire has an <h1> element that can be found in line 32 of the sections/static-list-collections.liquid. 

In other cases, you can also find the <h1> in sections/static-blog.liquid where it is applied to the page title, a part of the layout and is not hidden. 

Get hands-on help with customization

You can get a Shopify Expert to assist with adding <h1> to your theme code. We recommend Storetasker!

Hire Storetasker