How To Change H1 Tag In Shopify

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

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

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

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

one. Find the section yous want to optimize

Here'southward our Slideshow department nether customize theme in the Shopify admin.

We want to detect the Liquid code that makes this section. Usually information technology'due south simply a similarly named .liquid file in the Sections folder of our theme code.

In our case it'south slideshow.liquid.

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

You'll need to know a flake of Liquid, HTML and JSON for this function. If you've never worked with sections earlier 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 exist 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 'Customize theme' to check that the new department setting is displayed like this:

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

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

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

Let'southward say we find a H1 similar this:

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

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

Your H1 lawmaking volition be different only in our example nosotros cease upwardly with:

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

Salve that and go back to 'Customize theme'. Check that changing the Heading type setting for the section changes from a H1 to a H2. Notation that the default is H1 then any existing sections volition continue to work as they practice at the moment.

4. Ready upward the CSS styles

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