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

Shopify Discussion
1

I want to make the search bar, account, and cart icons red, only on my product page and only on desktop, so that you can see them on the white background. Attached is an image showing the page, and as you can see, you can’t see the icons on the top right corner. Is that possible?

3
31920×964 120 KB

URL: www.eastsidemelrose.com

2

Hey,

In order to add the logic for the background color to the header requires to do the custom code in your theme file.

Could you please share your store collab code in the p/m so that I can implement it.
Thanks

3

Hello @EastsideMelrose ,

Edit theme.liquid scroll down to bottom, search for
now just before to it add this code

{% if template == 'product' %}
<style>
header-component svg {
    color: red;
}
</style>
{% endif %}

Regards
Guleria

5

This worked, except it changed the color of all of the icons on mobile. I only want it to change the desktop appearance.

6

Please update previous code with this one

{% if template == ‘product’ %}

@media screen and (min-width: 768px) { header-component svg { color: red; } }

{% endif %}

7

I replaced the old code with the new code and it just changed everything back to the way it was initially. So now the icons are just white on both desktop and mobile.

8

I figured it out, this is what the code needs to be to get the icons to only be red on desktop. Thank you for the help Guleria

{% if template == ‘product’ %}

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

{% endif %}

9

Yes, custom CSS can achieve that. In your theme editor, navigate to product template settings, then “custom CSS” or “custom liquid.” Add one media query at the bottom for desktop only: @media(min-width:1025px){ .header__icon{color:red!important;} } Wrap it in {% if template == ‘product’ %} to limit it to product pages.