Switch to secondary logo in header on scroll

Store Design
,
1

I’m using a sticky header with my main logo center. Can someone please assist me on how to change to secondary logo on scroll as this example: https://eu.aimeleondore.com/collections/shop-all

I’ve been trying for hours with no success. I can a add second logo picker in the theme settings using this code:

{
   "type": "image_picker",
   "id": "logo-2",
    "label": "Secondary Logo"
},

But after that i’ve been trying different things in the heading.liquid found in the community with no success.

I have the Baseline theme.

Shopify URL: 0gh1nn-8j.myshopify.com

Thanks in advance!

2

Hi @aidenaiden ,

To swap logos on scroll in the Shopify Baseline theme like Aimé Leon Dore:

  1. Add Secondary Logo Picker
    In header.liquid schema, ensure secondary logo is added:
{% schema %}
{
  "name": "Header",
  "settings": [
    {
      "type": "image_picker",
      "id": "logo",
      "label": "Primary Logo"
    },
    {
      "type": "image_picker",
      "id": "logo-2",
      "label": "Secondary Logo"
    },
    {
      "type": "range",
      "id": "logo_max_width",
      "min": 50,
      "max": 300,
      "step": 5,
      "unit": "px",
      "label": "Logo width",
      "default": 140
    }
  ]
}
{% endschema %}
  1. Update Header Liquid In header.liquid, replace logo code with:
  1. Add CSS
.site-header { transition: all 0.3s ease; }
.logo-primary { display: block; }
.logo-secondary { display: none; }
.site-header.scrolled .logo-primary { display: none; }
.site-header.scrolled .logo-secondary { display: block; }
  1. Add JavaScript in theme.liquid file before closing of 
document.addEventListener('DOMContentLoaded', () => {
  const header = document.querySelector('.site-header');
  window.addEventListener('scroll', () => {
    header.classList.toggle('scrolled', window.scrollY > 100);
  });
});
  1. Test
  • Customize theme, upload logos in Header settings.
  • Scroll to check logo swap at 100px (adjust threshold in JS if needed).
3

thanks! What exactly do I replace in step 2? Help me locate the logo code.
4

OK, I’ve carefully done everything but it’s not changing to secondary logo on scroll. Thank you anyway!

EDIT: it now worked. Thanks!

5

Hi Aidenaiden,

Is there any way you could give me instructions to do this on DAWN theme? That would be greatly appreciated!