Change Header Icon Color Only on New Product Page Theme Template (Horizon Theme)

Technical Q&A
,
1

I had previously updated by theme.liquid with this code:

{% if template == ‘product’ %}

@media screen and (min-width: 750px) { header-component svg { color: #de3426 !important; } }

{% endif %}

in order to change the icons of the right of image 1 to red only on mobile. I recently added a new theme template to my digital products and the icons are no longer red on that template (Image 2). How do I make them red on new theme templates?

5
51920×909 281 KB

4
41920×909 354 KB

URL: www.eastsidemelrose.com

Password: opensesame

2

Use template.suffix so the rule targets your new product template too:

{% if template == 'product' or template.suffix == 'digital-product' %}
@media (min-width:750px){ header-component svg{color:#de3426!important} }
{% endif %}
3

Thanks, it didn’t work with the “template.suffix” part, but this worked

{% if template == ‘product’ or ‘digital-download’%}

@media screen and (min-width: 750px) { header-component svg { color: #de3426 !important; } }

{% endif %}

4

The issue is happening because your CSS targets only the default product template:

{% if template == ‘product’ %}

If your new digital product template has a different name (e.g., product.digital), this condition won’t be true, so the CSS won’t apply.

How to fix

  1. Target all product templates, including the new one:

{% if template contains ‘product’ %}

@media screen and (min-width: 750px) { header-component svg { color: #de3426 !important; } }

{% endif %}

  • template contains 'product' ensures it matches product, product.digital, or any other product template.

  • Keep the <style> inside the Liquid condition.

  1. Alternative: Remove the Liquid check entirely and use CSS targeting the SVG globally on product pages:

/* In theme.css or style.css */
template-product header-component svg,
template-product-digital header-component svg {
color: #de3426 !important;
}

  • This approach works if Shopify adds template-product or template-product-digital classes to the body automatically.