Header change based on template or collection | Prestige Theme

[Teddy9]

Hi,

I have a store with one brand and two collections for girls and boys. We want to create two separate branded 'worlds' for boys and girls. I created for both collections separate templates for collection and product page. 

Now I am looking for a way to change the logo in the header when visiting one or the other collections. 

I found a few lines of code and implemented them into the header.liquid file. This does not work unfortunately.

I hope one of you smarter people could take a look and let me know what I am doing wrong and how I should fix it.

store url: https://le-chic-garcon.myshopify.com/

password: jolo

I included a slide with print screen and I made a copy of the header.liquid file. Line 22-28 are implemented by that should change logos based on collection.handle. Despite the fact the code doesn't work I don't think this will change the header to the correct logo when visiting the product page of one of the product of that certain collection.

So in short; how to achieve the logo switch when a customer visits the collection and product pages of the different collections?

[ExpertRookie]

Hi @Teddy9 
In this case you can change the code in header.liquid.
The first you need to check the page type is collection with the collection handle.
example If the collection handle == boy, its will show the logo 1, else, it show logo 2.
That is my idea, if you need any help do not hesitate to contact us.

[Teddy9]

Hi @ExpertRookie ,

Thank you for your answer. I did exactly that and tried multiple version of the code I found but nothing happens. I ran out of ideas how to get it right. Could you take a look at the code I included in my previous message? I would be more than thankful. 

Cheers,

Teddy

[ExpertRookie]

Hi @Teddy9 
I have not Prestige theme on my store, so I can not check.
Please send me the theme code via email, then I can check it.

[Teddy9]

Hey @ExpertRookie ,

Thanks for this. Here is the part that I implemented in the header.liquid.

--------------------------------------------------------------------------------------------------------------------
USEFUL VARIABLES
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}

{%- assign use_transparent_header = false -%}

{%- if template == 'index' and section.settings.enable_transparent_header -%}
{%- assign use_transparent_header = true -%}
{%- endif -%}

{%- if template.name == 'collection' and section.settings.enable_transparent_header_collection and collection.image and collection.all_products_count > 0 and collection.template_suffix != 'no-image' -%}
{%- assign use_transparent_header = true -%}
{%- endif -%}

{% if collection.handle == 'le-chic-garcon' %} {% assign logo_src="https://cdn.shopify.com/s/files/1/0567/2707/6943/t/4/assets/le-chic-garcon.png?v=1667182280" %}
{% endif %}

{% if collection.handle == 'le-chic' %} {% assign logo_src="https://cdn.shopify.com/s/files/1/0567/2707/6943/t/4/assets/le-chic.png?v=1667180917" %}
{% endif %}

{%- if section.settings.navigation_style != 'sidebar' -%}
{%- assign use_sidebar_menu = false -%}
{%- else -%}
{%- assign use_sidebar_menu = true -%}
{%- endif -%}

{%- comment -%}

[ExpertRookie]

Hi @Teddy9 
Can you share the theme file to my email.
I can check the problem with the code above

[ExpertRookie · Accepted solution]

Hi @Teddy9 
Just sent an email to you with the solution.
Please check.

assign collection_handle = nil
  if request.page_type == 'collection'
    if collection.handle == 'boys'
      assign collection_handle = true
      assign logo_src="https://cdn.shopify.com/s/files/1/0567/2707/6943/t/4/assets/le-chic-garcon.png?v=1667182280"
    endif
    if collection.handle == 'girls'
      assign collection_handle = true
      assign logo_src="https://cdn.shopify.com/s/files/1/0567/2707/6943/t/4/assets/le-chic.png?v=1667180917"
    endif
  endif

{% if collection_handle != nil %}
            <img class="Header__LogoImage Header__LogoImage--primary"
              src="{{- logo_src -}}"
              width="{{ section.settings.logo.width }}"
              height="{{ section.settings.logo.height }}"
              alt="{{ section.settings.logo.alt | default: shop.name | escape }}">
          {% else %}
            <img class="Header__LogoImage Header__LogoImage--primary"
              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"
              width="{{ section.settings.logo.width }}"
              height="{{ section.settings.logo.height }}"
              alt="{{ section.settings.logo.alt | default: shop.name | escape }}">
            {%- if use_transparent_header and section.settings.transparent_logo != blank -%}
              <img class="Header__LogoImage Header__LogoImage--transparent"
                    src="{{ section.settings.transparent_logo | img_url: image_size }}"
                    srcset="{{ section.settings.transparent_logo | img_url: image_size }} 1x, {{ section.settings.transparent_logo | img_url: image_size, scale: 2 }} 2x"
                    width="{{ section.settings.logo.width }}"
                    height="{{ section.settings.logo.height }}"
                    alt="{{ section.settings.transparent_logo.alt | default: shop.name | escape }}">
            {%- endif -%}
          {%- endif -%}

[Teddy9]

Hey @ExpertRookie ,

First of all another thank you for you fantastic assistance. Really much appreciated!

I changed the code and YES, the header changes the logo for the main collection for boys and girls. One question though how come the logo does not change for all sub-collections while they are created with the same collection templates? As in two different collection templates for boys (handle = 'le-chic-garcon') and girls (handle = 'le-chic')

[ExpertRookie]

The logo only change on the collections have handle 'boys' or 'girls'. if the handle different, it will use main logo

[LanceAllison]

Hi @ExpertRookie ,

I am trying to do exactly the same thing, but I am using the inkit toos theme (another 2.0 theme), which appears to be structured differently to Prestige theme used in this solution.

https://western-shirts.myshopify.com/

Password is "lance"

I have two collections (brands) called "Pistons & Gears" and "Whiskey & Wine".

I understand the principals behind the code, but have failed to apply it correctly to this theme.

Would you mind pointing me in the right direction?

Thanks,

Lance

[LanceAllison]

Hi @ExpertRookie,

I was able to resolve this based on your code. Thanks very much. I also tied logo to product vendor using same methodology.

[VictoriaD]

Hi @ExpertRookie , I'm trying to do a similar logo switch on Collection pages as well as Product pages with the Dawn theme.  I normally am pretty decent with code, but am getting confused here. Can you help explain it to me as well? Thanks!

[LanceAllison]

Hi @VictoriaD. My code from the start of header.liquid is attached. Pretty self-explanatory and works perfectly for both products and collections. Not Dawn theme, but very close. I also introduced a variable LogoWidth so I can also set the size of each logo image separately.

{%- assign img_url = "https://cdn.shopify.com/s/files/1/0567/4758/9710/files/dog_house_no_background.png?v=1681934794" -%}
{% assign clickthrough = "https://doghouseclothing.com/" %}
{% assign LogoWidth = 200 %}

{% assign collection_handle = nil %}
{% if request.page_type == 'collection' %}
{% if collection.handle == 'cigar-shirts' %}
{% assign collection_handle = true %}
{% assign img_url="https://cdn.shopify.com/s/files/1/0567/4758/9710/files/CubanCutLogo1.png?v=1683748831" %}
{% assign clickthrough = "https://western-shirts.myshopify.com/collections/cigar-shirts" %}
{% assign LogoWidth = 300 %}
{% endif %}
{% if collection.handle == 'whiskey-wine' %}
{% assign collection_handle = true %}
{% assign img_url="https://cdn.shopify.com/s/files/1/0567/4758/9710/files/whiskkey_and_wine_2_gold_logo_1.png?v=1675034..." %}
{% assign clickthrough = "https://western-shirts.myshopify.com/collections/whiskey-wine" %}
{% endif %}
{% endif %}

{% if request.page_type == 'product' %}
{% if product.vendor == 'Whiskey & Wine' %}
{% assign img_url="https://cdn.shopify.com/s/files/1/0567/4758/9710/files/whiskkey_and_wine_2_gold_logo_1.png?v=1675034..." %}
{% assign clickthrough = "https://western-shirts.myshopify.com/collections/whiskey-wine" %}
{% endif %}
{% if product.vendor == 'Cigar Shirts' %}
{% assign img_url="https://cdn.shopify.com/s/files/1/0567/4758/9710/files/CubanCutLogo1.png?v=1683748831" %}
{% assign clickthrough = "https://western-shirts.myshopify.com/collections/cigar-shirts" %}
{% assign LogoWidth = 300 %}
{% endif %}
{% endif %}

[VictoriaD]

Lance, Thank you so much for your speedy reply!! You added this code to the very top of the header.liquid? I tried inputting with all of my specifics but was unable to get this code to work for me. I wonder what I'm missing...! 

[LanceAllison]

I had a quick look at the Dawn theme and it is quite different. Apologies. I would test by changing img_url to image_url in my code, and just include the image assignment code rather than the clickthought and LogoWidth. Would suggest the code should go in at line 153. You can see that image_url is used on line 446. If the image change works, then you'll need to figure out changing the image width and clickthrough, but won't be difficult once you have the basics right.

 

[Teddy9]

@LanceAllisonDo you want me to share the final code? Does that help you? Just let me know and I will get you a copy of those liquid files.

Cheers,

Teddt

[VictoriaD]

Lance, I so appreciate your time and insight. I am truly touched that you would look into this and offer me so much help! I ended up playing around with some code in the theme.liquid instead of the header.liquid based on a similar post for swapping header logos with an answer by @PageFly-Victor but it was your insight and direction that inspired me to keep problem solving so thank you so very much Lance!! If you both don't mind I will post the combined solution here for those like me that are looking to solve a similar problem! Best wishes to you both!

Coding in a logo Swap for specific collection pages or product pages (Dawn theme)

1. Create and name a collection template or product template by going to the "Customize" editor of your site. From the top dropdown create and name a new template for either products or collections. (Make sure your desired collections or products are then defined by those theme templates on their respective collection or product pages)

2. In the theme.liquid theme file, scroll to the bottom and just before </body> inserted the following code:

{% unless template != "collection.NAME OF YOUR COLLECTION TEMPLATE HERE" %}
<style>
.header__heading-logo{
visibility: hidden;
}

a.header__heading-link.link.link--text.focus-inset {
background: url(https://IMAGE FILE FOR YOUR SECONDARY LOGO HERE);
background-size: 160px;
background-repeat: no-repeat;
background-position: center;
}

</style>
{% endunless %}

^^Repeat for any desired collection theme or product theme. This any page that's not the collection page or product page you've outlined above will have your regular logo and the the collection page or product page outlined above will have the secondary logo or image of your choosing.