How To Make Header Icons Change Color On Scroll In Shopify - eCommerce Thesis

How To Make Header Icons Change Color On Scroll In Shopify

Posted on by Foysal

Learn how to dynamically change the color of your header icons as users scroll on your Shopify store! This simple yet effective customization enhances user experience by improving visibility and adding a professional touch to your site.

In this tutorial, you’ll discover:
✅ How to edit your Shopify theme code (no advanced coding skills needed!)
✅ CSS and JavaScript techniques to make icons change color on scroll
✅ Tips for testing and troubleshooting to ensure everything works perfectly

CODE: for DAWN & OTHERS

.header__icons a,
.header__icon {
  color: #0537fc;  /* this is default color before scroll*/
  transition: color 0.3s ease;
}

.scrolled-past-header .header__icons a,
.scrolled-past-header .header__icon {
  color: #fc0505;  /* change to your desired color on scroll */
}

CODE : for the new HORIZON & OTHER Variants

.header-actions__action svg,
.header__icon svg {
  color: #0537fc;   /* this is default color before scroll*/
  transition: color 0.3s ease;
}

[data-sticky-state="active"] .header-actions__action svg,
[data-sticky-state="active"] .header__icon svg {
  color: #fc0505 !important;  /* change to your desired color on scroll */
}