Switch to secondary logo in header on scroll

aidenaiden · ‎06-17-2025

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!

oscprofessional · ‎06-17-2025

Hi @aidenaiden,

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

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 %}

2. Update Header Liquid In header.liquid, replace logo code with:

<header class="site-header">
  <div class="header__logo">
    {% if section.settings.logo %}
      <a href="/" class="logo-link">
        <img class="logo-primary" src="{{ section.settings.logo | img_url: 'master' }}" alt="{{ shop.name }}" style="max-width: {{ section.settings.logo_max_width }}px;">
      </a>
    {% endif %}
    {% if section.settings.logo-2 %}
      <a href="/" class="logo-link">
        <img class="logo-secondary" src="{{ section.settings.logo-2 | img_url: 'master' }}" alt="{{ shop.name }}" style="max-width: {{ section.settings.logo_max_width }}px; display: none;">
      </a>
    {% endif %}
  </div>
</header>

3. 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; }

4. Add JavaScript in theme.liquid file before closing of </body>

document.addEventListener('DOMContentLoaded', () => {
  const header = document.querySelector('.site-header');
  window.addEventListener('scroll', () => {
    header.classList.toggle('scrolled', window.scrollY > 100);
  });
});

5. Test

Customize theme, upload logos in Header settings.
Scroll to check logo swap at 100px (adjust threshold in JS if needed).

aidenaiden · ‎06-17-2025

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

<header
    x-ref="header"
    class="relative z-10 border-b-gridline border-gridline-color text-scheme-text {% unless overlay_header %} border-gridline-color bg-scheme-background{% endunless %}"
    data-color-scheme="{%- if overlay_header_without_sticky -%}{{ overlay_text_color_scheme }}{%- else -%}{{ section_color }}{%- endif -%}"
  >
    <nav
      class="relative hidden{% if settings.header_uppercase %} uppercase{% endif %}{% unless layout contains 'menu_drawer' %} lg:block{% endunless %}"
      aria-label="{{ 'general.accessibility.primary' | t }}"
    >
      <div class="flex items-stretch px-section-horizontal-spacing justify-between{% if layout contains 'spread' %} flex-wrap {% endif %}">
        <div class="flex items-stretch{% if layout contains 'center' %} flex-grow w-1/3{% endif %}">
          {% if layout contains 'logo_left' %}
            <div class="flex{% unless layout contains 'spread' %} mr-6{% endunless %}">
              {{ header_logo }}
            </div>
          {% endif %}
          {% if layout contains 'menu_left' %}
            {{ header_menu }}
          {% endif %}
        </div>

        {% if layout contains 'menu_spread' %}
          {{ header_menu }}
        {% elsif layout contains 'center' %}
          <div class="{% unless layout contains 'logo_center' %}flex-grow w-1/3 lg:w-3/4 {% endunless %}flex items-stretch justify-center text-center">
            {% if layout contains 'logo_center' %}
              {{ header_logo }}
            {% endif %}
            {% if layout contains 'menu_center' %}
              {{ header_menu }}
            {% endif %}
          </div>
        {% endif %}

        {%- if shop.customer_accounts_enabled
          and layout == 'logo_left_menu_spread'
          and show_icons == false
        -%}
          <div class="{% unless layout contains 'spread' %}ml-4 flex items-stretch {% endunless %}whitespace-nowrap">
            {{ customer_accounts }}
          </div>
        {%- endif -%}

        {% if section.settings.show_search
          and layout == 'logo_left_menu_spread'
          and show_icons == false
        %}
          <div class="{% unless layout contains 'spread' %}ml-4 flex items-stretch {% endunless %}whitespace-nowrap">
            {% render 'header-search',
              layout: layout,
              header_item_spacing: item_spacing,
              section_color: section_color,
              show_icons: show_icons
            %}
          </div>
        {%- endif -%}

        <div class="flex items-stretch justify-end gap-x-4 text-right {% if layout contains 'center' %} flex-grow flex-wrap w-1/3{% endif %}">
          {%- liquid
            if layout contains 'menu_right'
              echo header_menu
            endif

            if show_localization
              echo '<div class="ml-4 my-auto shrink-0">'
              echo localization_form
              echo '</div>'
            endif

            assign show_extras = false

            if layout != 'logo_left_menu_spread'
              assign show_extras = true
            endif

            if layout == 'logo_left_menu_spread' and show_icons
              assign show_extras = true
            endif
          -%}

          {%- if shop.customer_accounts_enabled and show_extras -%}
            <div class="flex items-stretch whitespace-nowrap">
              {{ customer_accounts }}
            </div>
          {%- endif -%}

          {% if section.settings.show_search and show_extras %}
            <div class="flex items-stretch whitespace-nowrap">
              {% render 'header-search',
                layout: layout,
                header_item_spacing: item_spacing,
                section_color: section_color,
                show_icons: show_icons
              %}
            </div>
          {% endif %}

          <div class="flex items-stretch whitespace-nowrap">
            {{ header_cart }}
          </div>
        </div>
      </div>

      {% if layout contains 'menu_below' %}
        <div class="flex items-center justify-center border-t-gridline border-gridline-color px-section-horizontal-spacing">
          {{ header_menu }}
        </div>
      {% endif %}
    </nav>

    {% comment %}
      Mobile Nav
    {% endcomment %}
    <nav
      aria-label="{{ 'general.accessibility.header' | t }}"
      class="{% unless layout contains 'menu_drawer' %}lg:hidden{% endunless %}{% if settings.header_uppercase %} uppercase{% endif %}"
    >
      <div class="flex items-center justify-between px-section-horizontal-spacing lg:relative">
        <div class="flex gap-2 items-center{% if layout contains 'logo_center' %} flex-grow w-1/3{% endif %}">
          {% if layout contains 'logo_left' %}
            <div>
              {{ header_logo }}
            </div>
          {% endif %}
          {% if layout contains 'logo_center' %}
            {{ header_menu_toggle }}
          {% endif %}
        </div>

        {% if layout contains 'logo_center' %}
          <div class="shrink-0 justify-center text-center">
            {{ header_logo }}
          </div>
        {% endif %}

        <div class="flex justify-end gap-2 text-right{% if layout contains 'logo_center' %} flex-grow flex-wrap w-1/3{% endif %}">
          {% if layout contains 'logo_left' %}
            {{ header_menu_toggle }}
          {% endif %}

          {% if layout contains 'menu_drawer' %}
            {%- if show_localization -%}
              <div class="my-auto hidden shrink-0 lg:block">
                {{ localization_form }}
              </div>
            {%- endif -%}

            {%- if shop.customer_accounts_enabled -%}
              <div class="hidden whitespace-nowrap lg:block">
                {{ customer_accounts }}
              </div>
            {%- endif -%}
          {% endif %}

          {% if section.settings.show_search %}
            <div class="whitespace-nowrap lg:ml-4">
              {% render 'header-search',
                layout: layout,
                header_item_spacing: item_spacing,
                section_color: section_color,
                show_icons: show_icons,
                location: 'mobile'
              %}
            </div>
          {% endif %}
          <div class="whitespace-nowrap lg:ml-4">
            {{ header_cart }}
          </div>
        </div>
      </div>
    </nav>
  </header>

aidenaiden · ‎06-17-2025

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

EDIT: it now worked. Thanks!

tuckerkaide · ‎06-20-2025

Hi Aidenaiden,

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