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

[Ronjaidaweia]

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? 

This is the website: https://s5o5yiecmz3lt5ef-79750234456.shopifypreview.com

TIA! I really hope I can make this work, I know almost about coding.

Best,

Ronja

[Columbus_Themes · 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.

[Ronjaidaweia]

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]

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

[Columbus_Themes]

Looks perfect btw 😅

[Ronjaidaweia]

Thank you! I am happy with it.

[tim]

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

[Ronjaidaweia]

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?