Can someone assist me in changing my main logo on header to a secondary logo upon scrolling?
I am using a sticky header.
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 -%}
{%- 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
}}
{%- else -%}
{{ shop.name }}
{%- endif -%}
Step 4: Find {% schema %} then paste the following script above it:
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.
1 Like
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
can you share the screenshot or URL or your store
1 Like
hi, thanks for answering
Great Tutorial!
And Thank you again for reaching out to me. you helped me within 24hours to correct the code!
Amazing!
1 Like
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
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/
Hi this method is not working in DAWN theme, can you please check and reply?
i have same issue. its not changing on scroll bu the first step worked beautifully. can you help @devmont-digital
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.
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 Logos1. 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 -%}
-
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.