How can I switch to a secondary logo in my sticky header on scroll?

[Clarko]

Can someone assist me in changing my main logo on header to a secondary logo upon scrolling? 

I am using a sticky header. 

[devmont-digital]

Hi @Clarko ,

Here are the steps for scrolling on the secondary logo:

Step 1: Navigate to Online Store -> Themes -> Edit code.

Step 2: Search for the settings_schema.json file. On line 17, paste the following code:

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

Save the file and close it.

Step 3: Search for the header.liquid file. Find the class header__heading-logo-wrapper on line 174. Add the new class logo-1 and insert the code after the closing of this div, after line 192:

{%- if settings.logo-2 != blank -%}

            <div class="header__heading-logo-wrapper logo-2" style="display:none;">
                {%- assign logo_alt = settings.logo.alt | default: shop.name | escape -%}
                {%- assign logo_height = settings.logo_width | divided_by: settings.logo.aspect_ratio -%}
                {% capture sizes %}(max-width: {{ settings.logo_width | times: 2 }}px) 50vw, {{ settings.logo_width }}px{% endcapture %}
                {% capture widths %}{{ settings.logo_width }}, {{ settings.logo_width | times: 1.5 | round }}, {{ settings.logo_width | times: 2 }}{% endcapture %}
                {{ settings.logo-2 | image_url: width: 600 | image_tag:
                  class: 'header__heading-logo motion-reduce logo',
                  widths: widths,
                  height: logo_height,
                  width: settings.logo_width,
                  alt: logo_alt,
                  sizes: sizes,
                  preload: true
                }}
              </div>
            
             {%- else -%}
              <span class="h2">{{ shop.name }}</span>
            {%- endif -%}

Step 4: Find {% schema %} then paste the following script above it:

<script>
    // Function to handle scroll event
    function handleScroll() {
      // Get the current scroll position
      var scrollPosition = window.pageYOffset || document.documentElement.scrollTop;

      // Example threshold for changing the logo display
      var threshold = 200;

      // Get logo elements
      var logo1 = document.querySelector('.logo-1');
      var logo2 = document.querySelector('.logo-2');

      // Check if the scroll position has reached the threshold
      if (scrollPosition > threshold) {
        // Hide logo-1 and display logo-2
        logo1.style.display = 'none';
        logo2.style.display = 'block';
      } else {
        // Show logo-1 and hide logo-2
        logo1.style.display = 'block';
        logo2.style.display = 'none';
      }
    }

    // Add scroll event listener to window
    window.addEventListener('scroll', handleScroll);
  </script>

The last step is as follows:

Navigate to Online Store -> Themes -> Customize. Then, go to theme settings, navigate to the logo tab, and upload the secondary logo.

[GolfCavegn]

great tutorial, thank you for sharing!

Does this also work for the "Dawn" Theme? 

I tried it and it did not work 😕

Thank you and cheers

[devmont-digital]

can you share the screenshot or URL or your store 

[GolfCavegn]

hi, thanks for answering

https://hji00nv6m3nxdr16-82158485836.shopifypreview.com

[GolfCavegn]

step1 worked

but it will not change on scroll

[GolfCavegn]

new link,

https://vhf5ebg0bzcd6p48-82158485836.shopifypreview.com

[HouseOfPlains]

i have same issue. its not changing on scroll bu the first step worked beautifully. can you help @devmont-digital 

[GolfCavegn]

Great Tutorial!

And Thank you again for reaching out to me. you helped me within 24hours to correct the code!

Amazing!

[devmont-digital]

Thank you for your kind words. Please feel free to reach out to us anytime if you need any assistance in the future.

Best regards,
Team Devmont Digital

[pablolinares]

Hi, I have the same issue, I´m using a dawn theme and it's not showing the logo when scrolling down, what do I need to do? This is the URL: https://ce1cb1-c3.myshopify.com/

[badassbaba]

Hi this method is not working in DAWN theme, can you please check and reply?

[WittleJR]

Hi Devmont-Digital. 

Can you please assist me? I have modified my site code as you suggested and was able to select the secondary logo - however it isn't showing on my site. I am also using the Dawn theme. 

[Ramith]

---

How to Add a Second Logo in Craft Theme

To add a second logo to your header in the Craft theme, follow these steps:

Step 1: Add the Second Logo in settings_schema.json

In your settings_schema.json, add the following code to create a new setting for the secondary logo:

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

This will add an option in the theme settings to upload a second logo.

Step 2: Modify header.liquid to Display the Logos

1. For the First Logo (logo-1):

   • Non-Middle Center Logo Position: In the section of the code for the non-middle-center logo position, you need to add logo-1 to the class name in the header__heading-logo-wrapper. Here’s how the updated code should look:

{%- if section.settings.logo_position != 'middle-center' -%}
    {%- if request.page_type == 'index' -%}
        <h1 class="header__heading">
    {%- endif -%}
        <a href="{{ routes.root_url }}" class="header__heading-link link link--text focus-inset">
            {%- if settings.logo != blank -%}
                <div class="header__heading-logo-wrapper logo-1">
                    {%- assign logo_alt = settings.logo.alt | default: shop.name | escape -%}
                    {%- assign logo_height = settings.logo_width | divided_by: settings.logo.aspect_ratio -%}
                    {% capture sizes %}(max-width: {{ settings.logo_width | times: 2 }}px) 50vw, {{ settings.logo_width }}px{% endcapture %}
                    {% capture widths %}{{ settings.logo_width }}, {{ settings.logo_width | times: 1.5 | round }}, {{ settings.logo_width | times: 2 }}{% endcapture %}
                    {{ settings.logo | image_url: width: 600 | image_tag:
                      class: 'header__heading-logo motion-reduce',
                      widths: widths,
                      height: logo_height,
                      width: settings.logo_width,
                      alt: logo_alt,
                      sizes: sizes,
                      preload: true
                    }}
                </div>
            {%- else -%}
                <span class="h2">{{ shop.name }}</span>
            {%- endif -%}
        </a>
    {%- if request.page_type == 'index' -%}
        </h1>
    {%- endif -%}
{%- endif -%}

• Middle Center Logo Position: For the middle-center logo position, you’ll do the same. Just add logo-1 to the class name in the header__heading-logo-wrapper:

{%- if section.settings.logo_position == 'middle-center' -%}
    {%- if request.page_type == 'index' -%}
        <h1 class="header__heading">
    {%- endif -%}
        <a href="{{ routes.root_url }}" class="header__heading-link link link--text focus-inset">
            {%- if settings.logo != blank -%}
                <div class="header__heading-logo-wrapper logo-1">
                    {%- assign logo_alt = settings.logo.alt | default: shop.name | escape -%}
                    {%- assign logo_height = settings.logo_width | divided_by: settings.logo.aspect_ratio -%}
                    {% capture sizes %}(min-width: 750px) {{ settings.logo_width }}px, 50vw{% endcapture %}
                    {% capture widths %}{{ settings.logo_width }}, {{ settings.logo_width | times: 1.5 | round }}, {{ settings.logo_width | times: 2 }}{% endcapture %}
                    {{ settings.logo | image_url: width: 600 | image_tag:
                      class: 'header__heading-logo',
                      widths: widths,
                      height: logo_height,
                      width: settings.logo_width,
                      alt: logo_alt,
                      sizes: sizes,
                      preload: true
                    }}
                </div>
            {%- else -%}
                <span class="h2">{{ shop.name }}</span>
            {%- endif -%}
        </a>
    {%- if request.page_type == 'index' -%}
        </h1>
    {%- endif -%}
{%- endif -%}

1. For the Second Logo (logo-2):

   After adding logo-1 for both positions, add the new code block for the second logo. Here’s how the code should look for the second logo:

{%- if settings.logo-2 != blank -%}
    <div class="header__heading-logo-wrapper logo-2" style="display:none;">
        {%- assign logo_alt = settings.logo-2.alt | default: shop.name | escape -%}
        {%- assign logo_height = settings.logo_width | divided_by: settings.logo.aspect_ratio -%}
        {% capture sizes %}(max-width: {{ settings.logo_width | times: 2 }}px) 50vw, {{ settings.logo_width }}px{% endcapture %}
        {% capture widths %}{{ settings.logo_width }}, {{ settings.logo_width | times: 1.5 | round }}, {{ settings.logo_width | times: 2 }}{% endcapture %}
        {{ settings.logo-2 | image_url: width: 600 | image_tag:
          class: 'header__heading-logo motion-reduce logo',
          widths: widths,
          height: logo_height,
          width: settings.logo_width,
          alt: logo_alt,
          sizes: sizes,
          preload: true
        }}
    </div>
{%- else -%}
    <span class="h2">{{ shop.name }}</span>
{%- endif -%}

This block will display the second logo (logo-2) if it’s set in the theme settings. If no second logo is uploaded, it will show the shop name.

---

Special Thanks to devmont-digital

As suggested by devmont-digital, you should also add a script for this functionality. Follow their approach to ensure the correct display of logos, and thank you to devmont-digital for the helpful insights!

By following these steps, you will have both logos in place—logo-1 for both middle-center and non-middle-center positions, and logo-2 for the second logo.