Subscribe to Marouane The Number 1 Youtube Channel to get Free insightful tips and tricks in eCommerce
The H1 tag is an important element in HTML that tells search engines and users what the main topic of a webpage is.
unlike Scrowp Shopify theme, where you can modify the H1 tag easily with a simple click directly from the theme editor, Free Shopify themes like Dawn don't offer this feature.
In this tutorial, I'll show you how to manually fix the H1 tag issue on Dawn theme to increase your Shopify store SEO.
- From your Shopify admin dashboard, click Online store => Click The three dots => Edit code
- Under sections, open the file header.liquid
- Search the file for "h1" and replace it with "div"
- Click Save
[/spoiler]
In this step, we will assign the h1 tag to header of the rich text section :
- Under sections, open the file rich-text.liquid
- Since Shopify uses the h1 tag on the title on (product page, collection page, article page, pages, ...), we will a condition to assign h1 tag only on homepage on that rich text section, to do so, replace this entire code
<h2
class="rich-text__heading rte inline-richtext {{ block.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{{ block.shopify_attributes }}
{% if settings.animations_reveal_on_scroll %}
data-cascade
style="--animation-order: {{ forloop.index }};"
{% endif %}
>
{{ block.settings.heading }}
</h2>
- With this one
{%- if template == "index" -%}
<h1
class="rich-text__heading rte inline-richtext {{ block.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{{ block.shopify_attributes }}
{% if settings.animations_reveal_on_scroll %}
data-cascade
style="--animation-order: {{ forloop.index }};"
{% endif %}
>
{{ block.settings.heading }}
</h1>
{%- else -%}
<h2
class="rich-text__heading rte inline-richtext {{ block.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{{ block.shopify_attributes }}
{% if settings.animations_reveal_on_scroll %}
data-cascade
style="--animation-order: {{ forloop.index }};"
{% endif %}
>
{{ block.settings.heading }}
</h2>
{%- endif -%}
- Click Save
It's all done now, you h1 tag will be the text you type on the header of the rich text section.
For a video tutorial, please visit Marouane The Number 1 Youtube Channel.
Let me know if you have any questions or issues.