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.

We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

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 7 19

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 Hubbard | Product Manager | Helium
- Customer Fields ✪✪✪✪✪ (380 reviews)
- Meteor Mega Menu ✪✪✪✪✪ (307 reviews)
- Onboard B2B NEW!
liamscott1044
Shopify Partner
2 0 0

Thanks, Could you help walk me through this?

josiah_helium
Shopify Partner
71 7 19

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 Hubbard | Product Manager | Helium
- Customer Fields ✪✪✪✪✪ (380 reviews)
- Meteor Mega Menu ✪✪✪✪✪ (307 reviews)
- Onboard B2B NEW!