Solved

Can I change the header logo on a specific Shopify page?

Elisaw
Explorer
79 2 11

Hello, I would like to change the logo on my header here: https://igxn7f3e71rcpc2s-24792738.shopifypreview.com. In CSS it is header 2 and I have found the following code in my header.liquid file:

<div id='header-2' class='main style2 padding-mobile-35' style="
    position: relative;
    width: 100%;
    
    padding-top: 0px;
    padding-bottom: 35px;
    text-align: center;
"><a href="/"><img src="https://cdn.shopify.com/s/files/1/2479/2738/files/TARTAR-webheader_2f64f81d-e65a-4f1e-99ab-6766355f38de.jpg?17689223928869986124" style="

    max-height: 275px;
    padding-top: 20px;
    
    "></a>
  </div> 

 

which is currently making the logo show like this:

 

Screen Shot 2021-02-16 at 3.55.48 PM.png

 

However on this page (https://igxn7f3e71rcpc2s-24792738.shopifypreview.com), I want to display a different image. How can I go around this? Thanks so much for your help!!!

Accepted Solutions (3)
Nitin_Kujur
Shopify Partner
81 19 32

This is an accepted solution.

@Elisaw just replace the header.liquid code you shared with below code, where new_cdn_link (at line no. 2) will be replaced by the cdn link of new logo image uploaded to files.

 

{% if template contains "collection" and collection.handle == "tartar-care" %}
{% assign logo_src="new_cdn_link" %}
{% else %}
{% assign logo_src="https://cdn.shopify.com/s/files/1/2479/2738/files/TARTAR-webheader_2f64f81d-e65a-4f1e-99ab-6766355f38de.jpg?17689223928869986124" %}
{% endif %}
<div id='header-2' class='main style2 padding-mobile-35' style="
    position: relative;
    width: 100%;
    
    padding-top: 0px;
    padding-bottom: 35px;
    text-align: center;
"><a href="/"><img src="{{ logo_src }}" style="

    max-height: 275px;
    padding-top: 20px;
    
    "></a>
  </div> 

 

 

View solution in original post

Elisaw
Explorer
79 2 11

This is an accepted solution.

@Nitin_Kujursorry to bother you again. Is there a way to make the image on this page not a link? Here again the Theme preview: https://bwu20dkj9rd8mfd8-24792738.shopifypreview.com

 

View solution in original post

Nitin_Kujur
Shopify Partner
81 19 32

This is an accepted solution.

@Elisaw you mean you don't want link for header image on home page.. right?  If so then just replace the header.liquid code with the below code

{% if template contains "collection" and collection.handle == "tartar-care" %}
{% assign logo_src="https://cdn.shopify.com/s/files/1/2479/2738/files/TARTAR-Care-Logo-Web-transparent.png?v=1614004087" %}
{% else %}
{% assign logo_src="https://cdn.shopify.com/s/files/1/2479/2738/files/TARTAR-webheader_2f64f81d-e65a-4f1e-99ab-6766355f38de.jpg?17689223928869986124" %}
{% endif %}
<div id='header-2' class='main style2 padding-mobile-35' style="
    position: relative;
    width: 100%;
    
    padding-top: 0px;
    padding-bottom: 35px;
    text-align: center;
"><a {% unless template contains "index" %}href="/"{% endunless %}><img src="{{ logo_src }}" style="

    max-height: 275px;
    padding-top: 20px;
    
    "></a>
  </div> 

  

View solution in original post

Replies 11 (11)

Nitin_Kujur
Shopify Partner
81 19 32

@Elisaw  you can upload the new logo in the files and copy its cdn link from there and replace the below src value with it in the header.liquid code you shared and save.

https://cdn.shopify.com/s/files/1/2479/2738/files/TARTAR-webheader_2f64f81d-e65a-4f1e-99ab-6766355f3...

Elisaw
Explorer
79 2 11

@Nitin_KujurThank you for your suggestion! That would change the image in all pages though. I want only one page to have a different Header Image, the rest should stay the same. Do you have any other tips? Thanks again!

Nitin_Kujur
Shopify Partner
81 19 32

@Elisaw do you need different image for home-page?

Elisaw
Explorer
79 2 11

@Nitin_KujurNo, I need it on one of the pages in the Menu called "Tartar Care"

Nitin_Kujur
Shopify Partner
81 19 32

This is an accepted solution.

@Elisaw just replace the header.liquid code you shared with below code, where new_cdn_link (at line no. 2) will be replaced by the cdn link of new logo image uploaded to files.

 

{% if template contains "collection" and collection.handle == "tartar-care" %}
{% assign logo_src="new_cdn_link" %}
{% else %}
{% assign logo_src="https://cdn.shopify.com/s/files/1/2479/2738/files/TARTAR-webheader_2f64f81d-e65a-4f1e-99ab-6766355f38de.jpg?17689223928869986124" %}
{% endif %}
<div id='header-2' class='main style2 padding-mobile-35' style="
    position: relative;
    width: 100%;
    
    padding-top: 0px;
    padding-bottom: 35px;
    text-align: center;
"><a href="/"><img src="{{ logo_src }}" style="

    max-height: 275px;
    padding-top: 20px;
    
    "></a>
  </div> 

 

 

Elisaw
Explorer
79 2 11

@Nitin_KujurGreat, works perfectly! Thank you so much 🙂

Elisaw
Explorer
79 2 11

This is an accepted solution.

@Nitin_Kujursorry to bother you again. Is there a way to make the image on this page not a link? Here again the Theme preview: https://bwu20dkj9rd8mfd8-24792738.shopifypreview.com

 

Nitin_Kujur
Shopify Partner
81 19 32

This is an accepted solution.

@Elisaw you mean you don't want link for header image on home page.. right?  If so then just replace the header.liquid code with the below code

{% if template contains "collection" and collection.handle == "tartar-care" %}
{% assign logo_src="https://cdn.shopify.com/s/files/1/2479/2738/files/TARTAR-Care-Logo-Web-transparent.png?v=1614004087" %}
{% else %}
{% assign logo_src="https://cdn.shopify.com/s/files/1/2479/2738/files/TARTAR-webheader_2f64f81d-e65a-4f1e-99ab-6766355f38de.jpg?17689223928869986124" %}
{% endif %}
<div id='header-2' class='main style2 padding-mobile-35' style="
    position: relative;
    width: 100%;
    
    padding-top: 0px;
    padding-bottom: 35px;
    text-align: center;
"><a {% unless template contains "index" %}href="/"{% endunless %}><img src="{{ logo_src }}" style="

    max-height: 275px;
    padding-top: 20px;
    
    "></a>
  </div> 

  

Elisaw
Explorer
79 2 11

@Nitin_Kujuramazing, thank you!

Elisaw
Explorer
79 2 11

@Nitin_KujurI am hoping you can help me again with this one 🙂 I need logo that appears on the Tartar Care collection page to also appear on the product pages under this collection. For example here:

https://tartar-berlin.com/collections/tartar-care/products/lederbalsam

How would I adjust the if statement above to cater for this?

Thank you so much in advance!

Elisaw
Explorer
79 2 11

@Nitin_KujurI am still looking for here for this one which follows up on the code from this post: https://community.shopify.com/c/Technical-Q-A/Different-header-in-product-pages/m-p/1117810

Please let me know if you can help me again! Thank you!