How do I make my logo not an H1 tag?

Tourist
16 0 2

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
Tourist
16 0 2

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
Tourist
16 0 2

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

2 Likes
Tourist
8 0 1

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

0 Likes
New Member
2 0 1

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
New Member
5 0 0

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

0 Likes
New Member
2 0 1

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.

1 Like
Shopify Partner
41 1 26

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 Shopify app
0 Likes
New Member
5 0 0

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.

0 Likes
Highlighted
Tourist
16 0 2

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