Many Shopify merchants love using a transparent header because it makes their store design look modern and stylish. We actually shared a tutorial before on how to create a transparent header in the Dawn theme, and it turned out to be very popular among our readers.

However, one common issue quickly came up: the store logo. When the header background becomes transparent, the default logo often doesn’t stand out well against the background image or color. For example, if your logo is dark and your hero banner is also dark, it may become almost invisible.

That’s why many merchants asked us if it’s possible to upload a different logo specifically for the transparent header. Unfortunately, the Dawn theme doesn’t provide this feature by default — it only allows you to upload one logo for all header states. But the good news is, with a little bit of theme code customization, you can enable this functionality.

Why You Need a Separate Logo for Transparent Header

Think of it this way:

• On a white background, a black or dark logo usually works perfectly.

• On a transparent header over a dark banner, a white or light version of your logo will be much more visible.

By setting up two logos — one for the standard header and another for the transparent version — you can make sure your branding always looks sharp, no matter what background your visitors see.

Steps to Add a Different Logo for Transparent Header

Here’s the process to make it happen:

1. Edit Your Theme Code

   • In your Shopify admin, go to Online Store > Themes > Dawn > Edit Code.

   • Open the file: sections/header.liquid.

     

2. Replace the Header Code

   • You’ll need to replace the existing header.liquid file with updated code that supports an additional logo field.

   • Once replaced, save the changes.

     <link rel="stylesheet" href="{{ 'component-list-menu.css' | asset_url }}" media="print" onload="this.media='all'">
     <link rel="stylesheet" href="{{ 'component-search.css' | asset_url }}" media="print" onload="this.media='all'">
     <link rel="stylesheet" href="{{ 'component-menu-drawer.css' | asset_url }}" media="print" onload="this.media='all'">
     <link rel="stylesheet" href="{{ 'component-cart-notification.css' | asset_url }}" media="print" onload="this.media='all'">
     <link rel="stylesheet" href="{{ 'component-cart-items.css' | asset_url }}" media="print" onload="this.media='all'">
     {%- if settings.predictive_search_enabled -%}
       <link rel="stylesheet" href="{{ 'component-price.css' | asset_url }}" media="print" onload="this.media='all'">
     {%- endif -%}
     {%- if section.settings.menu_type_desktop == 'mega' -%}
       <link rel="stylesheet" href="{{ 'component-mega-menu.css' | asset_url }}" media="print" onload="this.media='all'">
     {%- endif -%}
     
     {%- if settings.cart_type == "drawer" -%}
       {{ 'component-cart-drawer.css' | asset_url | stylesheet_tag }}
       {{ 'component-cart.css' | asset_url | stylesheet_tag }}
       {{ 'component-totals.css' | asset_url | stylesheet_tag }}
       {{ 'component-price.css' | asset_url | stylesheet_tag }}
       {{ 'component-discounts.css' | asset_url | stylesheet_tag }}
     {%- endif -%}
     
     <style>
       header-drawer {
         justify-self: start;
         margin-left: -1.2rem;
       }
     
       {%- if section.settings.sticky_header_type == 'reduce-logo-size' -%}
         .scrolled-past-header .header__heading-logo-wrapper {
           width: 75%;
         }
       {%- endif -%}
     
       {%- if section.settings.menu_type_desktop != "drawer" -%}
         @media screen and (min-width: 990px) {
           header-drawer {
             display: none;
           }
         }
       {%- endif -%}
     
       .menu-drawer-container {
         display: flex;
       }
     
       .list-menu {
         list-style: none;
         padding: 0;
         margin: 0;
       }
     
       .list-menu--inline {
         display: inline-flex;
         flex-wrap: wrap;
       }
     
       summary.list-menu__item {
         padding-right: 2.7rem;
       }
     
       .list-menu__item {
         display: flex;
         align-items: center;
         line-height: calc(1 + 0.3 / var(--font-body-scale));
       }
     
       .list-menu__item--link {
         text-decoration: none;
         padding-bottom: 1rem;
         padding-top: 1rem;
         line-height: calc(1 + 0.8 / var(--font-body-scale));
       }
     
       @media screen and (min-width: 750px) {
         .list-menu__item--link {
           padding-bottom: 0.5rem;
           padding-top: 0.5rem;
         }
       }
     </style>
     
     {%- style -%}
       .header {
         padding: {{ section.settings.padding_top | times: 0.5 | round: 0 }}px 3rem {{ section.settings.padding_bottom | times: 0.5 | round: 0 }}px 3rem;
       }
     
       .section-header {
         position: sticky; /* This is for fixing a Safari z-index issue. PR #2147 */
         margin-bottom: {{ section.settings.margin_bottom | times: 0.75 | round: 0 }}px;
       }
     
       @media screen and (min-width: 750px) {
         .section-header {
           margin-bottom: {{ section.settings.margin_bottom }}px;
         }
       }
     
       @media screen and (min-width: 990px) {
         .header {
           padding-top: {{ section.settings.padding_top }}px;
           padding-bottom: {{ section.settings.padding_bottom }}px;
         }
       }
     {%- endstyle -%}
     
     <script src="{{ 'details-disclosure.js' | asset_url }}" defer="defer"></script>
     <script src="{{ 'details-modal.js' | asset_url }}" defer="defer"></script>
     <script src="{{ 'cart-notification.js' | asset_url }}" defer="defer"></script>
     <script src="{{ 'search-form.js' | asset_url }}" defer="defer"></script>
     {%- if settings.cart_type == "drawer" -%}
       <script src="{{ 'cart-drawer.js' | asset_url }}" defer="defer"></script>
     {%- endif -%}
     
     <svg xmlns="http://www.w3.org/2000/svg" class="hidden">
       <symbol id="icon-search" viewbox="0 0 18 19" fill="none">
         <path fill-rule="evenodd" clip-rule="evenodd" d="M11.03 11.68A5.784 5.784 0 112.85 3.5a5.784 5.784 0 018.18 8.18zm.26 1.12a6.78 6.78 0 11.72-.7l5.4 5.4a.5.5 0 11-.71.7l-5.41-5.4z" fill="currentColor"/>
       </symbol>
     
       <symbol id="icon-reset" class="icon icon-close"  fill="none" viewBox="0 0 18 18" stroke="currentColor">
         <circle r="8.5" cy="9" cx="9" stroke-opacity="0.2"/>
         <path d="M6.82972 6.82915L1.17193 1.17097" stroke-linecap="round" stroke-linejoin="round" transform="translate(5 5)"/>
         <path d="M1.22896 6.88502L6.77288 1.11523" stroke-linecap="round" stroke-linejoin="round" transform="translate(5 5)"/>
       </symbol>
     
       <symbol id="icon-close" class="icon icon-close" fill="none" viewBox="0 0 18 17">
         <path d="M.865 15.978a.5.5 0 00.707.707l7.433-7.431 7.579 7.282a.501.501 0 00.846-.37.5.5 0 00-.153-.351L9.712 8.546l7.417-7.416a.5.5 0 10-.707-.708L8.991 7.853 1.413.573a.5.5 0 10-.693.72l7.563 7.268-7.418 7.417z" fill="currentColor">
       </symbol>
     </svg>
     
     {%- liquid
       for block in section.blocks
         if block.type == '@app'
           assign has_app_block = true
         endif
       endfor
     -%}
     
     <{% if section.settings.sticky_header_type != 'none' %}sticky-header data-sticky-type="{{ section.settings.sticky_header_type }}"{% else %}div{% endif %} class="header-wrapper color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator %} header-wrapper--border-bottom{% endif %}">
       {%- liquid
         assign social_links = false
         assign localization_forms = false
     
         if settings.social_twitter_link != blank or settings.social_facebook_link != blank or settings.social_pinterest_link != blank or settings.social_instagram_link != blank or settings.social_youtube_link != blank or settings.social_vimeo_link != blank or settings.social_tiktok_link != blank or settings.social_tumblr_link != blank or settings.social_snapchat_link != blank
           assign social_links = true
         endif
     
         if localization.available_countries.size > 1 and section.settings.enable_country_selector or section.settings.enable_language_selector and localization.available_languages.size > 1
           assign localization_forms = true
         endif
       -%}
       <header class="header header--{{ section.settings.logo_position }} header--mobile-{{ section.settings.mobile_logo_position }} page-width{% if section.settings.menu_type_desktop == 'drawer' %} drawer-menu{% endif %}{% if section.settings.menu != blank %} header--has-menu{% endif %}{% if has_app_block %} header--has-app{% endif %}{% if social_links %} header--has-social{% endif %}{% if shop.customer_accounts_enabled %} header--has-account{% endif %}{% if localization_forms %} header--has-localizations{% endif %}">
         {%- liquid
           if section.settings.menu != blank
             render 'header-drawer'
           endif
     
           if section.settings.logo_position == 'top-center' or section.settings.menu == blank
             render 'header-search', input_id: 'Search-In-Modal-1'
           endif
         -%}
     
         {%- 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">
                  {%- assign logo_transparent = section.settings.logo_transparent -%}
                  {%- 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 %}
                  {%- if logo_transparent != blank -%}
                      <div class="header__heading-logo-wrapper logo-transparent">
                       {{ logo_transparent | 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>
                   {%- if settings.logo != blank -%}
                     <div class="header__heading-logo-wrapper hidden-logo">
                       {{ 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>
                     {% endif %}
                 {%- else -%}
                   <span class="h2">{{ shop.name }}</span>
                 {%- endif -%}
               </a>
           {%- if request.page_type == 'index' -%}
             </h1>
           {%- endif -%}
         {%- endif -%}
     
         {%- liquid
           if section.settings.menu != blank
             if section.settings.menu_type_desktop == 'dropdown'
               render 'header-dropdown-menu'
             elsif section.settings.menu_type_desktop != 'drawer'
               render 'header-mega-menu'
             endif
           endif
         %}
     
         {%- 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">
                {%- assign logo_transparent = section.settings.logo_transparent -%}
                  {%- 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 %}
                  {%- if logo_transparent != blank -%}
                      <div class="header__heading-logo-wrapper logo-transparent">
                       {{ logo_transparent | 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>
                   {%- if settings.logo != blank -%}
                     <div class="header__heading-logo-wrapper hidden-logo">
                       {{ 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>
                     {% endif %}
                 {%- else -%}
                   <span class="h2">{{ shop.name }}</span>
                 {%- endif -%}
               </a>
           {%- if request.page_type == 'index' -%}
             </h1>
           {%- endif -%}
         {%- endif -%}
     
         <div class="header__icons{% if section.settings.enable_country_selector or section.settings.enable_language_selector %} header__icons--localization header-localization{% endif %}">
           <div class="desktop-localization-wrapper">
             {%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%}
               <localization-form class="small-hide medium-hide" data-prevent-hide>
                 {%- form 'localization', id: 'HeaderCountryForm', class: 'localization-form' -%}
                   <div>
                     <h2 class="visually-hidden" id="HeaderCountryLabel">{{ 'localization.country_label' | t }}</h2>
                     {%- render 'country-localization', localPosition: 'HeaderCountry' -%}
                   </div>
                 {%- endform -%}
               </localization-form>
             {% endif %}
     
             {%- if section.settings.enable_language_selector and localization.available_languages.size > 1 -%}
               <localization-form class="small-hide medium-hide" data-prevent-hide>
                 {%- form 'localization', id: 'HeaderLanguageForm', class: 'localization-form' -%}
                   <div>
                     <h2 class="visually-hidden" id="HeaderLanguageLabel">{{ 'localization.language_label' | t }}</h2>
                     {%- render 'language-localization', localPosition: 'HeaderLanguage' -%}
                   </div>
                 {%- endform -%}
               </localization-form>
             {%- endif -%}
           </div>
           
           {% render 'header-search', input_id: 'Search-In-Modal' %}
     
           {%- if shop.customer_accounts_enabled -%}
             <a href="{%- if customer -%}{{ routes.account_url }}{%- else -%}{{ routes.account_login_url }}{%- endif -%}" class="header__icon header__icon--account link focus-inset{% if section.settings.menu != blank %} small-hide{% endif %}">
               <account-icon>
                 {%- if customer and customer.has_avatar? -%}
                   {{ customer | avatar }}
                 {%- else -%}
                   <span class="svg-wrapper">
                     {{- 'icon-account.svg' | inline_asset_content -}}
                   </span>
                 {%- endif -%}
               </account-icon>
               <span class="visually-hidden">
                 {%- liquid
                   if customer
                     echo 'customer.account_fallback' | t
                   else
                     echo 'customer.log_in' | t
                   endif
                 -%}
               </span>
             </a>
           {%- endif -%}
     
           {%- for block in section.blocks -%}
             {%- case block.type -%}
               {%- when '@app' -%}
                 {% render block %}
             {%- endcase -%}
           {%- endfor -%}
           
           <a href="{{ routes.cart_url }}" class="header__icon header__icon--cart link focus-inset" id="cart-icon-bubble">
             {% if cart == empty %}
               <span class="svg-wrapper">{{ 'icon-cart-empty.svg' | inline_asset_content }}</span>
             {% else %}
               <span class="svg-wrapper">{{ 'icon-cart.svg' | inline_asset_content }}</span>
             {% endif %}
             <span class="visually-hidden">{{ 'templates.cart.cart' | t }}</span>
             {%- if cart != empty -%}
               <div class="cart-count-bubble">
                 {%- if cart.item_count < 100 -%}
                   <span aria-hidden="true">{{ cart.item_count }}</span>
                 {%- endif -%}
                 <span class="visually-hidden">{{ 'sections.header.cart_count' | t: count: cart.item_count }}</span>
               </div>
             {%- endif -%}
           </a>
         </div>
      
       <style>
         .section-header{margin-bottom:0}.header-wrapper--border-bottom{border-bottom:.1rem solid rgba(255,255,255,.08)}.overflow-hidden-desktop .header-wrapper,.overflow-hidden-tablet .header-wrapper{position:initial;width:initial;background:initial;color:initial;background:var(--gradient-background)}.header-wrapper summary.header__menu-item+ul span,.header-wrapper summary.header__menu-item+ul svg,.overflow-hidden-desktop .header-wrapper .disclosure__button svg,.overflow-hidden-desktop .header-wrapper .disclosure__button>span,.overflow-hidden-desktop .header-wrapper .list-menu span,.overflow-hidden-desktop .header-wrapper a svg,.overflow-hidden-desktop .header-wrapper details>span,.overflow-hidden-desktop .header-wrapper h1.header__heading span.h2,.overflow-hidden-desktop .header-wrapper summary svg,.overflow-hidden-desktop details[open]>.header__menu-item,.overflow-hidden-tablet .header-wrapper .disclosure__button svg,.overflow-hidden-tablet .header-wrapper .disclosure__button>span,.overflow-hidden-tablet .header-wrapper .list-menu span,.overflow-hidden-tablet .header-wrapper a svg,.overflow-hidden-tablet .header-wrapper details>span,.overflow-hidden-tablet .header-wrapper h1.header__heading span.h2,.overflow-hidden-tablet .header-wrapper summary svg,.overflow-hidden-tablet details[open]>.header__menu-item,.scrolled-past-header .header-wrapper .disclosure__button svg,.scrolled-past-header .header-wrapper .disclosure__button>span,.scrolled-past-header .header-wrapper .list-menu span,.scrolled-past-header .header-wrapper a svg,.scrolled-past-header .header-wrapper details>span,.scrolled-past-header .header-wrapper h1.header__heading span.h2,.scrolled-past-header .header-wrapper summary svg,.scrolled-past-header details[open]>.header__menu-item{color:rgba(var(--color-foreground),.75)!important} .header-wrapper .disclosure__button svg,.header-wrapper .disclosure__button>span,.header-wrapper .list-menu span,.header-wrapper a svg,.header-wrapper details>span,.header-wrapper h1.header__heading span.h2,.header-wrapper summary svg,details[open]>.header__menu-item{color:#000!important}.header-localization .disclosure .localization-form__select:hover{text-decoration-color:white}
         .hidden-logo{
           display: none;
         }
         .scrolled-past-header .hidden-logo{
           display: block;
         }
          .scrolled-past-header .logo-transparent{
           display: none;
         }
         .shopify-section-header-sticky {
           position: absolute;
           width: 100%;
           padding: 30px 0;
           background: transparent;
         }
         .shopify-section-header-sticky sticky-header{
           background: transparent;
           border-bottom: none;
         }
         .scrolled-past-header {
           position: sticky;
           top: 0;
           padding: 0;
           background-color: #fff;
         }
       </style> 
       </header>
     </{% if section.settings.sticky_header_type != 'none' %}sticky-header{% else %}div{% endif %}>
     
     {%- if settings.cart_type == "notification" -%}
       {%- render 'cart-notification', color_scheme: section.settings.color_scheme, desktop_menu_type: section.settings.menu_type_desktop -%}
     {%- endif -%}
     
     {% javascript %}
       class StickyHeader extends HTMLElement {
         constructor() {
           super();
         }
     
         connectedCallback() {
           this.header = document.querySelector('.section-header');
           this.headerIsAlwaysSticky = this.getAttribute('data-sticky-type') === 'always' || this.getAttribute('data-sticky-type') === 'reduce-logo-size';
           this.headerBounds = {};
     
           this.setHeaderHeight();
     
           window.matchMedia('(max-width: 990px)').addEventListener('change', this.setHeaderHeight.bind(this));
     
           if (this.headerIsAlwaysSticky) {
             this.header.classList.add('shopify-section-header-sticky');
           };
     
           this.currentScrollTop = 0;
           this.preventReveal = false;
           this.predictiveSearch = this.querySelector('predictive-search');
     
           this.onScrollHandler = this.onScroll.bind(this);
           this.hideHeaderOnScrollUp = () => this.preventReveal = true;
     
           this.addEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp);
           window.addEventListener('scroll', this.onScrollHandler, false);
     
           this.createObserver();
         }
     
         setHeaderHeight() {
           document.documentElement.style.setProperty('--header-height', `${this.header.offsetHeight}px`);
         }
     
         disconnectedCallback() {
           this.removeEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp);
           window.removeEventListener('scroll', this.onScrollHandler);
         }
     
         createObserver() {
           let observer = new IntersectionObserver((entries, observer) => {
             this.headerBounds = entries[0].intersectionRect;
             observer.disconnect();
           });
     
           observer.observe(this.header);
         }
     
         onScroll() {
           const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
     
           if (this.predictiveSearch && this.predictiveSearch.isOpen) return;
     
           if (scrollTop > this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
             this.header.classList.add('scrolled-past-header');
             if (this.preventHide) return;
             requestAnimationFrame(this.hide.bind(this));
           } else if (scrollTop < this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
             this.header.classList.add('scrolled-past-header');
             if (!this.preventReveal) {
               requestAnimationFrame(this.reveal.bind(this));
             } else {
               window.clearTimeout(this.isScrolling);
     
               this.isScrolling = setTimeout(() => {
                 this.preventReveal = false;
               }, 66);
     
               requestAnimationFrame(this.hide.bind(this));
             }
           } else if (scrollTop <= this.headerBounds.top) {
             this.header.classList.remove('scrolled-past-header');
             requestAnimationFrame(this.reset.bind(this));
           }
     
           this.currentScrollTop = scrollTop;
         }
     
         hide() {
           if (this.headerIsAlwaysSticky) return;
           this.header.classList.add('shopify-section-header-hidden', 'shopify-section-header-sticky');
           this.closeMenuDisclosure();
           this.closeSearchModal();
         }
     
         reveal() {
           if (this.headerIsAlwaysSticky) return;
           this.header.classList.add('shopify-section-header-sticky', 'animate');
           this.header.classList.remove('shopify-section-header-hidden');
         }
     
         reset() {
           if (this.headerIsAlwaysSticky) return;
           this.header.classList.remove('shopify-section-header-hidden', 'shopify-section-header-sticky', 'animate');
         }
     
         closeMenuDisclosure() {
           this.disclosures = this.disclosures || this.header.querySelectorAll('header-menu');
           this.disclosures.forEach(disclosure => disclosure.close());
         }
     
         closeSearchModal() {
           this.searchModal = this.searchModal || this.header.querySelector('details-modal');
           this.searchModal.close(false);
         }
       }
     
       customElements.define('sticky-header', StickyHeader);
     {% endjavascript %}
     
     <script type="application/ld+json">
       {
         "@context": "http://schema.org",
         "@type": "Organization",
         "name": {{ shop.name | json }},
         {% if settings.logo %}
           "logo": {{ settings.logo | image_url: width: 500 | prepend: "https:" | json }},
         {% endif %}
         "sameAs": [
           {{ settings.social_twitter_link | json }},
           {{ settings.social_facebook_link | json }},
           {{ settings.social_pinterest_link | json }},
           {{ settings.social_instagram_link | json }},
           {{ settings.social_tiktok_link | json }},
           {{ settings.social_tumblr_link | json }},
           {{ settings.social_snapchat_link | json }},
           {{ settings.social_youtube_link | json }},
           {{ settings.social_vimeo_link | json }}
         ],
         "url": {{ request.origin | append: page.url | json }}
       }
     </script>
     
     {%- if request.page_type == 'index' -%}
       {% assign potential_action_target = request.origin | append: routes.search_url | append: "?q={search_term_string}" %}
       <script type="application/ld+json">
         {
           "@context": "http://schema.org",
           "@type": "WebSite",
           "name": {{ shop.name | json }},
           "potentialAction": {
             "@type": "SearchAction",
             "target": {{ potential_action_target | json }},
             "query-input": "required name=search_term_string"
           },
           "url": {{ request.origin | append: page.url | json }}
         }
       </script>
     {%- endif -%}
     
     {% schema %}
     {
       "name": "t:sections.header.name",
       "class": "section-header",
       "max_blocks": 3,
       "settings": [
         {
           "type": "select",
           "id": "logo_position",
           "options": [
             {
               "value": "top-left",
               "label": "t:sections.header.settings.logo_position.options__2.label"
             },
             {
               "value": "top-center",
               "label": "t:sections.header.settings.logo_position.options__3.label"
             },
             {
               "value": "middle-left",
               "label": "t:sections.header.settings.logo_position.options__1.label"
             },
             {
               "value": "middle-center",
               "label": "t:sections.header.settings.logo_position.options__4.label"
             }
           ],
           "default": "middle-left",
           "label": "t:sections.header.settings.logo_position.label",
           "info": "t:sections.header.settings.logo_help.content"
         },
          {
           "type": "image_picker",
           "id": "logo_transparent",
           "label": "Transparent logo image",
           "info": "Logo images should have a transparent background"
         },
         {
           "type": "link_list",
           "id": "menu",
           "default": "main-menu",
           "label": "t:sections.header.settings.menu.label"
         },
         {
           "type": "select",
           "id": "menu_type_desktop",
           "options": [
             {
               "value": "dropdown",
               "label": "t:sections.header.settings.menu_type_desktop.options__1.label"
             },
             {
               "value": "mega",
               "label": "t:sections.header.settings.menu_type_desktop.options__2.label"
             },
             {
               "value": "drawer",
               "label": "t:sections.header.settings.menu_type_desktop.options__3.label"
             }
           ],
           "default": "dropdown",
           "label": "t:sections.header.settings.menu_type_desktop.label",
           "info": "t:sections.header.settings.menu_type_desktop.info"
         },
         {
           "type": "select",
           "id": "sticky_header_type",
           "options": [
             {
               "value": "none",
               "label": "t:sections.header.settings.sticky_header_type.options__1.label"
             },
             {
               "value": "on-scroll-up",
               "label": "t:sections.header.settings.sticky_header_type.options__2.label"
             },
             {
               "value": "always",
               "label": "t:sections.header.settings.sticky_header_type.options__3.label"
             },
             {
               "value": "reduce-logo-size",
               "label": "t:sections.header.settings.sticky_header_type.options__4.label"
             }
           ],
           "default": "on-scroll-up",
           "label": "t:sections.header.settings.sticky_header_type.label"
         },
         {
           "type": "checkbox",
           "id": "show_line_separator",
           "default": true,
           "label": "t:sections.header.settings.show_line_separator.label"
         },
         {
           "type": "header",
           "content": "t:sections.header.settings.header__1.content"
         },
         {
           "type": "color_scheme",
           "id": "color_scheme",
           "label": "t:sections.all.colors.label",
           "default": "scheme-1"
         },
         {
           "type": "color_scheme",
           "id": "menu_color_scheme",
           "label": "t:sections.header.settings.menu_color_scheme.label",
           "default": "scheme-1"
         },
         {
           "type": "header",
           "content": "t:sections.header.settings.header__3.content",
           "info": "t:sections.header.settings.header__4.info"
         },
         {
           "type": "checkbox",
           "id": "enable_country_selector",
           "default": false,
           "label": "t:sections.header.settings.enable_country_selector.label"
         },
         {
           "type": "header",
           "content": "t:sections.header.settings.header__5.content",
           "info": "t:sections.header.settings.header__6.info"
         },
         {
           "type": "checkbox",
           "id": "enable_language_selector",
           "default": false,
           "label": "t:sections.header.settings.enable_language_selector.label"
         },
         {
           "type": "header",
           "content": "t:sections.header.settings.mobile_layout.content"
         },
         {
           "type": "select",
           "id": "mobile_logo_position",
           "options": [
             {
               "value": "center",
               "label": "t:sections.header.settings.mobile_logo_position.options__1.label"
             },
             {
               "value": "left",
               "label": "t:sections.header.settings.mobile_logo_position.options__2.label"
             }
           ],
           "default": "center",
           "label": "t:sections.header.settings.mobile_logo_position.label"
         },
         {
           "type": "header",
           "content": "t:sections.all.spacing"
         },
         {
           "type": "range",
           "id": "margin_bottom",
           "min": 0,
           "max": 100,
           "step": 4,
           "unit": "px",
           "label": "t:sections.header.settings.margin_bottom.label",
           "default": 0
         },
         {
           "type": "header",
           "content": "t:sections.all.padding.section_padding_heading"
         },
         {
           "type": "range",
           "id": "padding_top",
           "min": 0,
           "max": 36,
           "step": 4,
           "unit": "px",
           "label": "t:sections.all.padding.padding_top",
           "default": 20
         },
         {
           "type": "range",
           "id": "padding_bottom",
           "min": 0,
           "max": 36,
           "step": 4,
           "unit": "px",
           "label": "t:sections.all.padding.padding_bottom",
           "default": 20
         }
       ],
       "blocks": [
         {
           "type": "@app"
         }
       ]
     }
     {% endschema %}
     Copy

3. Upload the Transparent Header Logo

   • After the update, you’ll see a new option in the theme editor where you can upload a second logo specifically for the transparent header.

   • Upload your alternative version (for example, a white logo), and you’re all set.

With this setup, your Dawn theme will automatically swap between the regular logo and the transparent header logo, depending on the header background. This gives your store a more polished and professional look, ensuring your brand is always visible.