Use Different Logos on Different Pages with Pipeline 7.1.1 Theme

[liamscott1044]

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!

[josiah_helium]

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. 

[liamscott1044]

Thanks, Could you help walk me through this?

[josiah_helium]

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. 👍