Use Different Logos on Different Pages with Pipeline 7.1.1 Theme

liamscott1044
Shopify Partner
2 0 0

Hello, I would like some guidance on editing my header.liquid file to include conditional logic to display one logo file on the homepage and a different logo file on every other page. Thanks!

Replies 3 (3)

josiah_helium
Shopify Partner
64 7 13

Hey Liam,

This can be done by using a liquid filter to check the page handle and then render your new header.liquid file if the page handle matches. 

Josiah, Solutions Engineer, Helium
- Customer Fields ✪✪✪✪✪ (319 reviews)
- Meteor Mega Menu ✪✪✪✪✪ (239 reviews)
liamscott1044
Shopify Partner
2 0 0

Thanks, Could you help walk me through this?

josiah_helium
Shopify Partner
64 7 13

Sure thing. This code is specific for the theme I was working on, but this should help point you in the right direction: 

 

{% if template contains 'nike' or page.handle contains 'nike' %}
   {% assign nike = true %}
{% endif %}

<div class="someClass">
{% if nike == true %}
   {%- section 'nike-header' -%}
{% else %}
   {% section 'header' %}
{% endif %}
</div>

 

 
So we're assigning a variable first to see if the template is something specific like a product or collection template with the name "nike" then render the 'nike-header', else show me the default 'header'. Or if the page handle contains "nike" in the title, so it could be a collection that's "/collections/new-in-nike" and if that's the case, we're still going to show the new header. It's a way to catch all instances of where we need to show this new header. 

 

You of course will need to create a new liquid file for the new header, but that could be as simple as copy/paste the existing header file to a new one so that you get the same settings to swap the logo out. 

I hope this helps. 👍

Josiah, Solutions Engineer, Helium
- Customer Fields ✪✪✪✪✪ (319 reviews)
- Meteor Mega Menu ✪✪✪✪✪ (239 reviews)