How To Add H1 Tag In Shopify
Our 'keyboard jiggler' product website was migrated from Wix to the Shopify platform late in 2022. We benefitted immensely from an improved SEO experience and in some ways the stricter rules around page design kept us focussed on selling via our website rather than constantly tweaking the layout.
Although we have loved using Shopify we did encounter one very specific issue with our Shopify theme: The issue we found was that the Collections <H1> tag did not exist as part of our Theme. This was only a problem for our collections. This led to our 3rd party SEO platform highlighting this issue as an error when we ran an SEO audit on our site.
We would like to share how we solved this.
Disclaimer: Please note that we are learning how to solve challenges as they appear in Shopify, just as you may be doing. We are not experts in SEO or Shopify so please use what we can offer but double check that our suggestion doesn't cause you an issue somewhere else.
How To Add H1 Tag In Shopify Collection?
Keep in mind that the H1 tag should probably be an automated part of your page creation process. If the Theme was built in the best possible way then receiving the H1 missing error for your Collections pages should not become an issue. Nevertheless we experienced this problem and had to solve it using method 2 below.
Method 1 :
Online Store > Customize Theme > Add "Rich Text" section to your Page > Select the text you want as a title > Format to "Header 1" > Save.
Method 2 :
Online Store > Customize Theme > Select the collection you want to add the H1 tag to > Add "Custom Liquid" block > Paste & edit the text shown below > Save.
Copy the code below & add to 'Custom Liquid' block:
<div class="rich-text__wrapper rich-text__wrapper--center page-width">
<div class="rich-text__blocks center"><div class="rich-text__text rte" >
<H1>Mouse Jiggler Without Software</H1>
<p>See our Full Collection of Keyboard Clips for Microsoft Teams Users.<p>
We show a screen grab below of where to paste the Custom Liquid code.
If our code fails then simply add your title into the custom liquid code field and add <H1> at the start of your text. Then add </H1> at the end:
ie. <H1>Mouse Jiggler Without Software</H1>
