How do I make my logo not an H1 tag?

Highlighted
Excursionist
17 0 4

I do not want my logo to be an H1 tag. How do I make it so it's not? Any help is greatly appreciated!

0 Likes
Highlighted
Excursionist
17 0 4

I found the code that makes the logo an h1 tag found in header.liquid, which is:

<h1 class="site-header__logo{% if section.settings.logo == blank %}{% unless section.settings.left_aligned_logo == false and section.settings.nav_below_logo %} post-large--left{% endunless %}{% endif %}" itemscope itemtype="http://schema.org/Organization">
            {% else %}
              <div class="h1 site-header__logo{% if section.settings.logo == blank %}{% unless section.settings.left_aligned_logo == false and section.settings.nav_below_logo %} post-large--left{% endunless %}{% endif %}" itemscope itemtype="http://schema.org/Organization">
            {% endif %}
              {% if section.settings.logo != blank %}
                <noscript>
                  {% capture image_size %}{{ logo_width | escape }}x{% endcapture %}
                  <div class="logo__image-wrapper">
                    {{ section.settings.logo | img_url: image_size | img_tag: shop.name }}
                  </div>
                </noscript>
                <div class="logo__image-wrapper supports-js">
                  <a href="/" itemprop="url" style="padding-top:{{ 1 | divided_by: section.settings.logo.aspect_ratio | times: 100}}%;">
                    {% assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
                    <img class="logo__image lazyload"
                         src="{{ section.settings.logo | img_url: '300x300' }}"
                         data-src="{{ img_url }}"
                         data-widths="[120, 180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
                         data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
                         data-sizes="auto"
                         alt="{{ shop.name | escape }}"
                         itemprop="logo">
                  </a>
                </div>
              {% else %}
                <a href="/" itemprop="url">{{ shop.name }}</a>
              {% endif %}
            {% if template.name == 'index' %}
              </h1>

If I replace the h1 with div, it fixes the issue. Now I have a new issue. I want to keep my logo looking the way it does. Once I took off h1 and replaced it with div, my logo changed. How do I keep it the same way it is and still have it not be an h1 tag?
 

0 Likes
Highlighted
Excursionist
17 0 4

I figured it out. If anyone has this problem and wants the solution, just msg me.

Highlighted

I would like to know how you changed the h1 from logo to text.

0 Likes
Highlighted
Tourist
9 0 10

Hi, 

 

I'm running into the same issue. I want to keep my logo but i want to have a h1 text aswell. How can i fix this?

0 Likes
Highlighted
Tourist
8 0 2

I'd love to know how you stopped the logo from being a H1 tag... have sent you a message.  Thanks!

0 Likes
Highlighted
Tourist
9 0 10

It is very easy. Just change something else that's H2 now into H1. And change the H1 Logo to H2 for example. This is how i solved it.

Highlighted
Shopify Partner
53 3 30

Changing it to any tag may work, but there are css styles unique to H1 that might change the appearance of the logo, they can be copied to the new tag

I wonder why you would want to change it from H1?

Developer of PixPix image editor for Shopify
0 Likes
Highlighted
Tourist
8 0 2

Just for SEO purposes, I want to add my own H1 tag on the home page and for that to be the only H1 tag on the page.

Highlighted
Excursionist
17 0 4

Since I made this post I've changed my theme, but I am still willing to try and help. What theme are you on?

0 Likes