Where Can I Find the H1 in the Supply Theme

We see pretty frequently the same problem with sections in Shopify themes- multiple H1 heading tags. For best SEO there should be one H1 on a page and the rest as H2, H3, H4 headings.

If a theme has a section (let's say a slideshow) with a H1 heading in it and you want to include that section multiple times on the same page, you're now stuck with multiple H1 headings. You can't edit the section code to make the H1 a H2 as then you'd be left with no H1 heading.

The good news is that the solution is pretty simple with some basic Liquid and CSS knowledge.

What we want to do is to add a new setting to the section to allow you to select a section as a H1 or H2 section.

1. Find the section you want to optimize

Here's our Slideshow section under customize theme in the Shopify admin.

We want to find the Liquid code that makes this section. Usually it's simply a similarly named .liquid file in the Sections folder of our theme code.

In our case it's slideshow.liquid.

2. Add a new 'heading type' setting to the section

You'll need to know a bit of Liquid, HTML and JSON for this part. If you've never worked with sections before they're somewhat different to other Liquid code. Each section has its own settings. These are defined in the {% schema %} at the end of the section and can be accessed in the section code like {% if section.settings.text_size == 'large' %}.

Go to the {% schema %} part of the file. In the settings node of the JSON add this:

{   "type": "select",   "id": "heading_type",   "label": "Heading type",   "options": [     {     "label": "H1",     "value": "h1"     },     {     "label": "H2",     "value": "h2"     }   ] },        

Save and then open up 'Customize theme' to check that the new section setting is displayed like this:

3. Use this setting to switch between H1 and H2 tags

Back in the Liquid code for the section we're going to look at this setting and change if we show a H1 or H2.

Find the current <h1> in the section Liquid. Note there may be multiple H1's.

Let's say we find a H1 like this:

<h1 class="h1 mega-title slideshow__title slideshow__title--mobile">   {{ block.settings.slide_title | escape }} </h1>        

We want to wrap it in some code to check if the setting is h2 and instead of the <h1> render a <h2>.

Your H1 code will be different but in our example we end up with:

{%- if section.settings.heading_type == 'h2' -%}   <h2 class="h1 mega-title slideshow__title slideshow__title--mobile">     {{ block.settings.slide_title | escape }}   </h2> {%- else -%}   <h1 class="h1 mega-title slideshow__title slideshow__title--mobile">     {{ block.settings.slide_title | escape }}   </h1> {%- endif -%}        

Save that and go back to 'Customize theme'. Check that changing the Heading type setting for the section changes from a H1 to a H2. Note that the default is H1 so any existing sections will continue to work as they do at the moment.

4. Fix up the CSS styles

Now that you're sometimes using a H2 instead of a H1 for the section the text may appear in a different style. Every theme and style is different so we don't have any example code here. Edit your CSS styles for the H2 in the section so that it looks as you'd like it to.

Done! Good, single H1s even when you're using sections.

Where Can I Find the H1 in the Supply Theme

Source: https://www.pluginuseful.com/blog/how-to-make-headings-in-shopify-sections-seo-friendly/

Share this post