Solved

Dawn 12.0 - Changing default PNG logo into a different HEX code on certain product pages

Ronjaidaweia
Tourist
5 0 1

Hi,

 

I am trying to change my default black PNG logo into different HEX color codes on specific product pages that have a specific tag, like "turquoise". This is the code I have now in my header.liquid file:

 

{%- if template == 'product' and product.tags contains 'turquoise' -%}
{% assign logo_color = '#40E0D0' %} {# Change to your desired hex color code #}
<div class="header__heading-logo-wrapper">
{{ settings.logo | image_url: width: 600 | image_tag:
class: 'header__heading-logo motion-reduce',
widths: '600',
height: 'auto',
alt: logo_alt,
style: 'fill: ' | append: logo_color,
preload: true
}}
</div>
{%- else -%}

 

While it does still show the default black logo on all other pages and targets the specific product page, it just gives an error when it does. It shows the following error on the spot where the logo would be:

 

Liquid error (sections/header line 176): wrong number of arguments (given 3, expected 2)
 
Does anyone know what the problem, and what the solution would be? 
 
 
TIA! I really hope I can make this work, I know almost about coding.
 
Best,
Ronja
Accepted Solution (1)

Columbus_Themes
Shopify Partner
121 9 16

This is an accepted solution.

Hi there,

The CSS property "Fill" only works on SVG elements, hence it wont take effect on your PNG image.

You have one of two solutions:
1- Keep the same fill property as written on your code, but change your Logo into an SVG html element.
2- Make a Red version of your PNG logo, then attach it using any liquid condition you may need.

Good luck.

If you find my reply helpful, please hit Like and Mark as Solution.

Happy coding!

View solution in original post

Replies 7 (7)

Columbus_Themes
Shopify Partner
121 9 16

This is an accepted solution.

Hi there,

The CSS property "Fill" only works on SVG elements, hence it wont take effect on your PNG image.

You have one of two solutions:
1- Keep the same fill property as written on your code, but change your Logo into an SVG html element.
2- Make a Red version of your PNG logo, then attach it using any liquid condition you may need.

Good luck.

If you find my reply helpful, please hit Like and Mark as Solution.

Happy coding!
Ronjaidaweia
Tourist
5 0 1

Hi! Thank you for your answer. 

 

Right, for now I have re-uploaded the default logo as a SVG file. This did not seem to change anything yet. After this I also changed the piece of code that Tim mentions below. This removed the error code, but the logo is still black and too big now on the specific page (shop > hangers/pendants > Aquamarijn hanger/Aquamarine pendant) and now it says in text {# change to your desired hex color code #}. 

 

Maybe the second solution is easier? This was the first way I wanted to try this, but I thought that just using color codes it would be less messy, as I would like to have quite a few different colors. But maybe it doesn't matter, as you have to add an extra condition anyway for every added product tag/color. I will try this now.

Ronjaidaweia
Tourist
5 0 1

I have now just used the PNG images themselves for the alternative logo's! A bit more messy, but it works.

Columbus_Themes
Shopify Partner
121 9 16

Looks perfect btw 😅

If you find my reply helpful, please hit Like and Mark as Solution.

Happy coding!
Ronjaidaweia
Tourist
5 0 1

Thank you! I am happy with it.

tim
Shopify Expert
3578 304 1332

In addition -- your liquid error is because you're trying to pass liquid code rather than variable as tag parameter. Rather than

{{ settings.logo | image_url: width: 600 | image_tag:
class: 'header__heading-logo motion-reduce',
widths: '600',
height: 'auto',
alt: logo_alt,
style: 'fill: ' | append: logo_color,
preload: true
}}

You need to do:

{% assign style_value = 'fill: ' | append: logo_color %}
{{ settings.logo | image_url: width: 600 | image_tag:
class: 'header__heading-logo motion-reduce',
widths: '600',
height: 'auto',
alt: logo_alt,
style: style_value,
preload: true
}}

  

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com
Ronjaidaweia
Tourist
5 0 1

Thank you! I have changed this piece of code, and this removed the error code, but the logo is still black and too big now on the specific page (shop > hangers/pendants > Aquamarijn hanger/Aquamarine pendant) and now it says in text {# change to your desired hex color code #}. Do you know where this next issue may lie?