What's your biggest current challenge? Have your say in Community Polls along the right column.
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Use Different Logos on Different Pages with Pipeline 7.1.1 Theme

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
71 8 18

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 ✪✪✪✪✪ (366 reviews)
- Meteor Mega Menu ✪✪✪✪✪ (295 reviews)
- Strike Automatic Discounts NEW!
liamscott1044
Shopify Partner
2 0 0

Thanks, Could you help walk me through this?

josiah_helium
Shopify Partner
71 8 18

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 ✪✪✪✪✪ (366 reviews)
- Meteor Mega Menu ✪✪✪✪✪ (295 reviews)
- Strike Automatic Discounts NEW!