Making Logo Appear in Header (in Between The Menu and Cart) in Minimal Theme (My Solution Needs Work

Highlighted
Tourist
9 0 2

I am using the Minimal Theme, and I want my Logo to appear in the Header  (in between the Menu And The Cart)

 

I did what a Shopify Staff member suggested, which was:

 

Open up 'header.liquid'  located inside 'Sections' folder.

 

In this file, search for</style>, and paste the following code right above it.

 

 

@media only screen and (max-width: 769px) {
    .site-header__logo {
      display: none;
    }
  }

 

 

 

Then, search for layout.cart.title. You should find this code in two sections; you'll want to go to the second section. Paste this code after the closing </a> tag.  

 

 

 

{% if template.name == 'index' %}
        <h1 class="site-header__logo-small{% 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>
      {% else %}
        </div>
      {% endif %}

 

 

 

This DID in fact work for me, BUT, I want my logo to show up in the Header for DESKTOP View as well (the above fix ONLY applies to Mobile View.)

 

The other issue is that the above code ONLY applies to the Homepage, because of two  {% if %}  tags that tell it to only apply to the "index" template (which appears to be the homepage only.)

 

I had to modify these two  {% if %}  tags From THIS:    {% if template.name == 'index' %}

 

To THIS:  {% if '' %}   

 

Note how I had to put the two stupid '' marks in there  'like this'  but with no words in between... it is NOT an actual quote mark, it is two of these next to each other:  '

 

This stupid hack DID completely work though... it made it so my logo showed up in my header where I wanted it to, on the Homepage, AND everywhere else, which was what I wanted (but it still only applies to Mobile view, and not Desktop view.)

 

I tried to just remove the two instances of the  {% if template.name == 'index' %}  tags entirely, but then I would get errors, even after trying to find and remove the closing {% endif %} tags  (probably because there were other 'if' related tags in there, like {% elseif %}  etc.

 

So does anyone know how to change this code so that it will work on Mobile AND Desktop view?

 

And does anyone have a better way to make this work for more than just the homepage?

 

Sure, my stupid  {% if '' %}   tag hack works... but I hate having to do it like that... just seems like I'm asking for trouble. And I'm guessing that my "hack" probably just tricks the {% if %} tag into thinking if it meets ANY (or NO) criteria, that it needs to activate... thus making it activate under any and ALL circumstances?

 

Lastly, I will gladly PAY anyone that solves this problem, $30 via Paypal (or through another Payment channel, if possible.)

 

P.S. I don't want to give a URL to my website or allow access to it.

0 Likes
Highlighted
Tourist
9 0 2

Here is an example of how I want it to look, on Mobile, AND on Desktop view:

 

 

header example.jpg

0 Likes