Different logos per page

New Member
18 0 0

Hi,

 

Is it possible for the logo above the menu to differ depending on page? I'd like it to change for a specific collection, which would include the product in that collection. I am using the theme Debut as a bass. Happy doing a bit of code, can't see the logo being saved in the CSS but it must be there!

 

Any help would be greatly appreciated.

 

Thanks!

0 Likes
Shopify Partner
1156 133 204

Hey Harry,

The logo render logic is located in sections/header.liquid file, below is a snippet you might be interested in:

          {% if section.settings.logo %}
            {%- assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
            <a href="/" class="site-header__logo-image{% if section.settings.align_logo == 'center' %} site-header__logo-image--centered{% endif %}">
              {% capture logo_alt %}{{ section.settings.logo.alt | default: shop.name }}{% endcapture %}
              <img class="lazyload js"
                   src="{{ section.settings.logo | img_url: '300x300' }}"
                   data-src="{{ img_url }}"
                   data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                   data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
                   data-sizes="auto"
                   alt="{{ logo_alt | escape }}"
                   style="max-width: {{ section.settings.logo_max_width }}px">
              <noscript>
                {% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}
                <img src="{{ section.settings.logo | img_url: image_size }}"
                     srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
                     alt="{{ section.settings.logo.alt | default: shop.name }}"
                     style="max-width: {{ section.settings.logo_max_width }}px;">
              </noscript>
            </a>
          {% else %}
            <a class="site-header__logo-link" href="/">{{ shop.name }}</a>
          {% endif %}

You can build your conditional logic that would take the collection id or handle in consideration and pick one or another logo file from assets.

Hope that helps!

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
New Member
18 0 0

thank you! Very helpful! 

 

All the best,

H

0 Likes
New Member
18 0 0

Having some difficulty getting it top work for the collection. Might be referencing the collection page wrong. 

 

 {% if url == "collection.gx.liquid" %}
            <a href="/" class="site-header__logo-image{% if section.settings.align_logo == 'center' %} site-header__logo-image--centered{% endif %}">
              {% capture logo_alt %}{{ section.settings.logo.alt | default: shop.name }}{% endcapture %}
              <img class="lazyload js"
                   src="https://cdn.shopify.com/s/files/1/0088/3094/3290/files/BAREFACED_GX_GREEN_OUTLINED_LOGO.png?17931139...
                   data-src="{{ img_url }}"
                   data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                   data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
                   data-sizes="auto"
                   alt="{{ logo_alt | escape }}"
                   style="max-width: {{ section.settings.logo_max_width }}px">
              <noscript>
                {% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}
                <img src="https://cdn.shopify.com/s/files/1/0088/3094/3290/files/BAREFACED_GX_GREEN_OUTLINED_LOGO.png?17931139...
                     srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
                     alt="{{ section.settings.logo.alt | default: shop.name }}"
                     style="max-width: {{ section.settings.logo_max_width }}px;">
                
                {% else %}
                
                <a href="/" class="site-header__logo-image{% if section.settings.align_logo == 'center' %} site-header__logo-image--centered{% endif %}">
              {% capture logo_alt %}{{ section.settings.logo.alt | default: shop.name }}{% endcapture %}
              <img class="lazyload js"
                   src="{{ section.settings.logo | img_url: '300x300' }}"
                   data-src="{{ img_url }}"
                   data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                   data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
                   data-sizes="auto"
                   alt="{{ logo_alt | escape }}"
                   style="max-width: {{ section.settings.logo_max_width }}px">
              <noscript>
                {% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}
                <img src="{{ section.settings.logo | img_url: image_size }}"
                     srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
                     alt="{{ section.settings.logo.alt | default: shop.name }}"
                     style="max-width: {{ section.settings.logo_max_width }}px;">
                
                {% endif %}

 

 

0 Likes
New Member
18 0 0

Sorry I used:

  {% if template == "collection.gx.liquid" %}

 

1st line

0 Likes
Shopify Partner
1156 133 204

hey Harry,

You can validate whether you are on collection page by checking if collection liquid object exists, and then match its handle, here is a hint for you:

            {% if collection and collection.handle == 'bodycon-dresses' %}
            <a class="site-header__logo-link" href="/">CUSTOM LOGO</a>
            {% else %}
            <a class="site-header__logo-link" href="/">{{ shop.name }}</a>
            {% endif %}

'boddycon-dress' being the handle of the collection as in the collection URL /collections/bodycon-dresses

Give it try and let me know how it goes.

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
New Member
18 0 0

Thank you so much guys! Getting there now, I have two logos displaying on the custom collection and everything else dispaying well. Can't seem to get the if statement into a place that doesn't display both images.. 

 

0 Likes
Shopify Partner
1156 133 204

Hey Harry,

Most probably the code snippet is misplaced, it's hard to tell in this blindfolded way. I can help you further if you can accept a Shopify collaborative account with access to your theme, drop me a note at ssvinarciuc@nemo.ai.

Cheers!

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
New Member
18 0 0

Hi Sergiu,

 

It's exactly that needed to be nested in another 'if' statement. Got it working now! Thank you so much for all your help! 

 

All the best,

Harry

0 Likes
Shopify Partner
1156 133 204

Awesome! Good luck with your store!

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes