Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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:
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!!!
Solved! Go to the solution
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>
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
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>
@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!
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>
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
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>
@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!
@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!
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025