Wanting to Change the Header Logo when User Scrolls down

Technical Q&A
, ,

Topic summary

A user wants to implement a logo swap feature in the Shopify Horizon theme that changes the header logo when scrolling down the page, similar to how some brands adjust logos for better visibility.

Technical Requirements:

  • Cannot be achieved with CSS alone
  • Requires custom JavaScript and Liquid coding modifications to theme files
  • Involves editing header.liquid file and adding custom CSS

Proposed Solution:
One respondent provided a technical approach involving:

  • Uploading a secondary scroll logo to Shopify files
  • Modifying the header file with a data-scroll-logo attribute
  • Adding custom CSS styling
  • Implementing JavaScript to detect scroll position (threshold: 50px) and toggle logo classes

Current Status:
Multiple developers offered assistance, recommending either hiring a Shopify developer or requesting collaborator access to implement the customization directly. The discussion remains open with no confirmed resolution yet.

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

I’m using the free Shopify theme Horizon and I’d like to change the logo in the header once the user scrolls down the page, similar to how some brands shrink or swap logos for better visibility on scroll.

Has anyone done this successfully with Horizon?

Any help or code snippets would be much appreciated!

Thanks in advance!

1 Like
2

Hey @goodlabel

For sure that is possible to do but since it’s not only possible with CSS and would require some custom JS and Liquid coding within your theme files so I would recommend you to hire a Shopify developer if you’re not familiar with coding.

If you’d like my help then feel free to DM me your store URL and collaborator request code and I would be happy to resolve this for you.

Best,
Moeed

3

Hi @goodlabel,

This is a complex request, it will need to add options at header.liquid file and CSS code for it to display well.
So if you want, please send me the link store and collaborator code in private message, I will check and guide you

4

Hi,

Hope this will help

  • Add Your Scroll Logo to Shopify Files , Find and Edit Your Header File (Edit the Logo Code)
    New code example
<img 
  class="main-logo" 
  src="{{ settings.logo | img_url: '300x' }}" 
  data-scroll-logo="https://yourstore.com/path/logo-scroll.png"
  alt="{{ shop.name }}">
  • Add Custom CSS
  • Add Javascript to Swap Logo on Scroll

Javascript example

<script>
  window.addEventListener('scroll', function () {
    const logo = document.querySelector('.main-logo');
    if (window.scrollY > 50) {
      logo.classList.add('scrolled');
    } else {
      logo.classList.remove('scrolled');
    }
  });
</script>