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

Technical Q&A
, ,

Topic summary

Goal: Change the default black logo color on certain Shopify Dawn 12.0 product pages based on a product tag (e.g., “turquoise”).

Key issues and fixes:

  • Initial implementation added a CSS style “fill: #HEX” to a PNG via image_tag, causing a Liquid error: “wrong number of arguments.” Root cause: passing Liquid code instead of a variable to the tag parameter.
  • Fix: assign the style string to a variable (e.g., style_value) and pass it to image_tag.
  • Technical constraint: CSS “fill” only affects SVGs, not PNGs. Therefore, color changes won’t apply to PNG logos via CSS.

Attempts and outcomes:

  • After switching the logo to SVG and applying the Liquid fix, the error disappeared, but the logo remained black and appeared too large; a literal “{# change to your desired hex color code #}” string also displayed.

Resolution:

  • Implemented separate PNG logo files in desired colors and conditionally rendered them based on product tags. This worked as intended and was accepted as the solution.

Status: Resolved. No outstanding questions. Potential alternative (not used): ensure a properly styled SVG to leverage “fill”.

Summarized with AI on December 28. AI used: gpt-5.
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 #}

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

2

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.

1 Like
3

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

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.

5

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?

6

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

7

Looks perfect btw :sweat_smile:

8

Thank you! I am happy with it.

1 Like