Alternate logo for certain products or collections

Tourist
4 0 0

I want to specify an alternate logo in the header for certain products.  It can either be by product name, product type, collection, etc.  Either way is fine.  I'm using a theme called "Minimal" and I was able to create a new template.liquid file for a collection and that works, but it only allows me to manipulate content in the body, not in the header or footer.

 

After reading some posts here in the Shopify Community it seems my best bet is to edit my existing header.liquid file (copy/pasted below) and create an "if" statement for a collection or product type which pulls in my alternate logo for a certain collection/products/product types, followed by an "else" statement which uses the regular logo in all other circumstances.  Could someone proficient in liquid code insert that statement and give me back the entire header.liquid code snippet, or tell me what statement to use and which line to add it, or perhaps offer an alternate solution?  This is not my strong suit.

 

The following code snippet is my entire header.liquid file and I'm using a layout with my logo on the same line as my navigation:

 

<style>
  .site-header__logo {
    a {
      max-width: {{ section.settings.logo_max_width }}px;
    }
  }

  /*================= If logo is above navigation ================== */
  {% if section.settings.nav_below_logo %}
    .site-nav {
      {% if section.settings.show_header_lines %}
        border-top: 1px solid {{ settings.color_borders }};
        border-bottom: 1px solid {{ settings.color_borders }};
      {% endif %}
      margin-top: 30px;
    }
  {% endif %}

  /*============ If logo is on the same line as navigation ============ */
  {% unless section.settings.nav_below_logo or section.settings.show_header_lines == false %}
    .site-header .grid--full {
      border-bottom: 1px solid {{ settings.color_borders }};
      padding-bottom: 30px;
    }
  {% endunless %}


  {% unless section.settings.nav_below_logo %}
    @media screen and (min-width: 769px) {
      .site-nav {
        text-align: right!important;
      }
    }
  {% endunless %}
</style>

<div data-section-id="{{ section.id }}" data-section-type="header-section">
  <div class="header-bar">
    <div class="wrapper medium-down--hide">
      <div class="post-large--display-table">

        {% if section.settings.header_text != blank or section.settings.header_search_enable %}
          <div class="header-bar__left post-large--display-table-cell">

            {% comment %}
              Add social links to header
            {% endcomment %}

            {% comment %}
            <div class="header-bar__module header-bar__module--list">
              {% include 'social-links' %}
            </div>
            {% endcomment %}

            {% if section.settings.header_text != blank %}
              <div class="header-bar__module header-bar__message">
                {{ section.settings.header_text }}
              </div>
            {% elsif section.settings.header_search_enable %}
              <div class="header-bar__module header-bar__search">
                {% include 'search-bar' with 'header' %}
              </div>
            {% endif %}

          </div>
        {% endif %}

        <div class="header-bar__right post-large--display-table-cell">

          {% if shop.customer_accounts_enabled %}
            <ul class="header-bar__module header-bar__module--list">
              {% if customer %}
                <li>
                  <a href="/account">{{ 'layout.customer.account' | t }}</a>
                </li>
                <li>
                  {{ 'layout.customer.log_out' | t | customer_logout_link }}
                </li>
              {% else %}
                <li>
                  {{ 'layout.customer.log_in' | t | customer_login_link }}
                </li>
                <li>{{ 'layout.customer.or' | t }}</li>
                <li>
                  {{ 'layout.customer.create_account' | t | customer_register_link }}
                </li>
              {% endif %}
            </ul>
          {% endif %}

          <div class="header-bar__module">
            <span class="header-bar__sep" aria-hidden="true"></span>
            <a href="/cart" class="cart-page-link">
              <span class="icon icon-cart header-bar__cart-icon" aria-hidden="true"></span>
            </a>
          </div>

          <div class="header-bar__module">
            <a href="/cart" class="cart-page-link">
              {{ 'layout.cart.title' | t }}{% unless cart.item_count == 0 %}:{% endunless %}
              <span class="cart-count header-bar__cart-count{% if cart.item_count == 0 %} hidden-count{% endif %}">{{ cart.item_count }}</span>
            </a>
          </div>

          {% if section.settings.header_search_enable %}
            {% unless section.settings.header_text == blank %}
              <div class="header-bar__module header-bar__search">
                {% include 'search-bar' with 'header' %}
              </div>
            {% endunless %}
          {% endif %}

        </div>
      </div>
    </div>
    <div class="wrapper post-large--hide">
      <button type="button" class="mobile-nav-trigger" id="MobileNavTrigger" data-menu-state="close">
        <span class="icon icon-hamburger" aria-hidden="true"></span>
        {{ 'layout.navigation.menu' | t }}
      </button>
      <a href="/cart" class="cart-page-link mobile-cart-page-link">
        <span class="icon icon-cart header-bar__cart-icon" aria-hidden="true"></span>
        {{ 'layout.cart.title' | t }} <span class="cart-count{% if cart.item_count == 0 %} hidden-count{% endif %}">{{ cart.item_count }}</span>
      </a>
    </div>
    {% include 'mobile-nav' with linklists[section.settings.nav_menu] %}
  </div>

  <header class="site-header" role="banner">
    <div class="wrapper">

      {% if section.settings.nav_below_logo %}

      <div class="grid--full">
        <div class="grid__item">
          {% if template.name == 'index' %}
            <h1 class="site-header__logo{% if section.settings.left_aligned_logo %} post-large--left{% endif %}" itemscope itemtype="http://schema.org/Organization">
          {% else %}
            <div class="h1 site-header__logo{% if section.settings.left_aligned_logo %} post-large--left{% endif %}" itemscope itemtype="http://schema.org/Organization">
          {% endif %}
            {% if section.settings.logo != blank %}
              {% capture image_size %}{{ section.settings.logo_max_width }}x{% endcapture %}
              <a href="/" itemprop="url">
                <img src="{{ section.settings.logo | img_url: image_size }}" alt="{{ shop.name }}" itemprop="logo">
              </a>
            {% else %}
              <a href="/" itemprop="url">{{ shop.name }}</a>
            {% endif %}
          {% if template.name == 'index' %}
            </h1>
          {% else %}
            </div>
          {% endif %}
          {% if section.settings.header_text != blank %}
            <p class="header-message post-large--hide">
              <small>{{ section.settings.header_text }}</small>
            </p>
          {% endif %}
        </div>
      </div>
      <div class="grid--full medium-down--hide">
        <div class="grid__item">
          {% include 'site-nav' with linklists[section.settings.nav_menu] %}
        </div>
      </div>

      {% else %}

      <div class="grid--full post-large--display-table">
        <div class="grid__item post-large--one-third post-large--display-table-cell">
          {% if template.name == 'index' %}
            <h1 class="site-header__logo post-large--left" itemscope itemtype="http://schema.org/Organization">
          {% else %}
            <div class="h1 site-header__logo post-large--left" itemscope itemtype="http://schema.org/Organization">
          {% endif %}
            {% if section.settings.logo != blank %}
              {% capture image_size %}{{ section.settings.logo_max_width }}x{% endcapture %}
              <a href="/" itemprop="url">
                <img src="{{ section.settings.logo | img_url: image_size }}" alt="{{ shop.name }}" itemprop="logo">
              </a>
            {% else %}
              <a href="/" itemprop="url">{{ shop.name }}</a>
            {% endif %}
          {% if template.name == 'index' %}
            </h1>
          {% else %}
            </div>
          {% endif %}
          {% if section.settings.header_text != blank %}
            <p class="header-message post-large--hide">
              <small>{{ section.settings.header_text }}</small>
            </p>
          {% endif %}
        </div>
        <div class="grid__item post-large--two-thirds post-large--display-table-cell medium-down--hide">
          {% include 'site-nav' with linklists[section.settings.nav_menu] %}
        </div>
      </div>

      {% endif %}

    </div>
    
    
    

    <script type="text/javascript">
setTimeout(function(){var a=document.createElement("script");
var b=document.getElementsByTagName("script")[0];
a.src=document.location.protocol+"//script.crazyegg.com/pages/scripts/0011/7420.js?"+Math.floor(new Date().getTime()/3600000);
a.async=true;a.type="text/javascript";b.parentNode.insertBefore(a,b)}, 1);
</script>
    
    
    
    
  </header>
</div>

{% schema %}
  {
    "name": "Header",
    "settings": [
      {
        "type": "image_picker",
        "id": "logo",
        "label": "Logo",
        "info": "450 x 200px recommended"
      },
      {
        "type": "text",
        "id": "logo_max_width",
        "label": "Custom logo width (in pixels)",
        "default": "450"
      },
      {
        "type": "header",
        "content": "Main menu"
      },
      {
        "type": "link_list",
        "id": "nav_menu",
        "label": "Menu",
        "default": "main-menu"
      },
      {
        "type": "checkbox",
        "id": "nav_below_logo",
        "label": "Center main menu below logo"
      },
      {
        "type": "checkbox",
        "id": "left_aligned_logo",
        "label": "Left-align logo"
      },
      {
        "type": "checkbox",
        "id": "show_header_lines",
        "label": "Show divider lines in header"
      },
      {
        "type": "header",
        "content": "Top bar"
      },
      {
        "type": "text",
        "id": "header_text",
        "label": "Top bar text",
        "info": "Max 55 characters"
      },
      {
        "type": "checkbox",
        "id": "header_search_enable",
        "label": "Show search bar"
      }
    ]
  }
{% endschema %}   
0 Likes
Tourist
4 0 0

Or perhaps there's another easier way to approach this?  Thanks in advance @Jason 

0 Likes
Astronaut
835 95 178

The part you're probably going to want to edit is here:

 

 

            {% if section.settings.logo != blank %}
              {% capture image_size %}{{ section.settings.logo_max_width }}x{% endcapture %}
              <a href="/" itemprop="url">
                <img src="{{ section.settings.logo | img_url: image_size }}" alt="{{ shop.name }}" itemprop="logo">
              </a>
            {% else %}

 

 

First back up your theme just in case anything goes wrong. I would do this by tagging your products a specific thing like "alternate-logo". In which case you would change it to something like this:

 

 

{% if section.settings.logo != blank %}
{% unless product.tags contains "alternate-logo" %}
  {% capture image_size %}{{ section.settings.logo_max_width }}x{% endcapture %}
  <a href="/" itemprop="url">
    <img src="{{ section.settings.logo | img_url: image_size }}" alt="{{ shop.name }}" itemprop="logo">
  </a>
  {% else %}
  {% capture image_size %}{{ section.settings.logo_max_width }}x{% endcapture %}
  <a href="/" itemprop="url">
    <img src="{{ section.settings.alternate_logo | img_url: image_size }}" alt="{{ shop.name }}" itemprop="logo">
  </a>
  {% endunless %}
{% else %}

 

Then change your schema so that it accepts an alternate logo from the customize editor:

 

{% schema %}
  {
    "name": "Header",
    "settings": [
      {
        "type": "image_picker",
        "id": "logo",
        "label": "Logo",
        "info": "450 x 200px recommended"
      },
      {
        "type": "image_picker",
        "id": "alternate_logo",
        "label": "Alternate Logo",
        "info": "450 x 200px recommended"
      },
      {
        "type": "text",
        "id": "logo_max_width",
        "label": "Custom logo width (in pixels)",
        "default": "450"
      },
      {
        "type": "header",
        "content": "Main menu"
      },
      {
        "type": "link_list",
        "id": "nav_menu",
        "label": "Menu",
        "default": "main-menu"
      },
      {
        "type": "checkbox",
        "id": "nav_below_logo",
        "label": "Center main menu below logo"
      },
      {
        "type": "checkbox",
        "id": "left_aligned_logo",
        "label": "Left-align logo"
      },
      {
        "type": "checkbox",
        "id": "show_header_lines",
        "label": "Show divider lines in header"
      },
      {
        "type": "header",
        "content": "Top bar"
      },
      {
        "type": "text",
        "id": "header_text",
        "label": "Top bar text",
        "info": "Max 55 characters"
      },
      {
        "type": "checkbox",
        "id": "header_search_enable",
        "label": "Show search bar"
      }
    ]
  }
{% endschema %}  

Let me know how it goes.

 

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Tourist
4 0 0

@Ninthony this works but only if I check the box to show my logo above the main menu navigation.

 

I think we need to place the code at a slightly different location so that it takes effect when my logo is on the same line as my navigation?  I tried moving to a few different places to no avail.

 

Thanks for your assistance!

0 Likes
Astronaut
835 95 178

 

Should be able to achieve the same results by going past that {% include 'site-nav'  with linklists[section.settings.nav_menu] %} portion into the {% else %} statement. Find the same {% if section.settings.logo != blank %} portion and do the same thing you did in the other area.

 

          {% include 'site-nav' with linklists[section.settings.nav_menu] %}
        </div>
      </div>

      {% else %}

      <div class="grid--full post-large--display-table">
        <div class="grid__item post-large--one-third post-large--display-table-cell">
          {% if template.name == 'index' %}
            <h1 class="site-header__logo post-large--left" itemscope itemtype="http://schema.org/Organization">
          {% else %}
            <div class="h1 site-header__logo post-large--left" itemscope itemtype="http://schema.org/Organization">
          {% endif %}
// start here {% if section.settings.logo != blank %} {% unless product.tags contains "alternate-logo" %} {% capture image_size %}{{ section.settings.logo_max_width }}x{% endcapture %} <a href="/" itemprop="url"> <img src="{{ section.settings.logo | img_url: image_size }}" alt="{{ shop.name }}" itemprop="logo"> </a> {% else %} {% capture image_size %}{{ section.settings.logo_max_width }}x{% endcapture %} <a href="/" itemprop="url"> <img src="{{ section.settings.alternate_logo | img_url: image_size }}" alt="{{ shop.name }}" itemprop="logo"> </a> {% endunless %} {% else %}

 

 

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Tourist
4 0 0

Perfect!  I don't think I would have figured this out on my own.  Thanks so much.

0 Likes
Highlighted
Astronaut
835 95 178

Great I'm glad it helped. If you could mark this as solved that'd be great, makes me look better and helps the next person looking for the same solution find the answer :D

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes