How do I use a different logo variation for mobile devices? DAWN 15.4.0

Technical Q&A
, ,
1

Hi, I’m just wondering how to make it so that a more simplified logo shows on mobile devices for Dawn 15.4.0? Any help is appreciated, thank you

2

The Dawn theme doesn’t have a built-in setting for uploading two different logos (desktop vs. mobile), but you can achieve it with a little Liquid + CSS tweak.

Add a second logo in code

  1. Go to your theme editor → Edit code.

  2. Open header.liquid.

  3. Where your current logo image is rendered (inside the header logo block), duplicate it and give each one its own CSS class, e.g.:

<a href="{{ routes.root_url }}" class="site-logo">
  <img src="{{ settings.logo | image_url }}" alt="{{ shop.name }}" class="logo-desktop">
  <img src="{{ settings.logo_mobile | image_url }}" alt="{{ shop.name }}" class="logo-mobile">
</a>
  1. Then in your settings_schema.json, add a new setting for logo_mobile so you can upload a different file.
{
  "type": "image_picker",
  "id": "logo_mobile",
  "label": "Mobile Logo"
}
  1. Finally, hide/show with CSS:
.logo-desktop { display: block; }
.logo-mobile { display: none; }

@media screen and (max-width: 749px) {
  .logo-desktop { display: none; }
  .logo-mobile { display: block; }
}
3

This would require theme code edit. While not very complex, its still not 3 lines of code; and it will break your ability to update theme to it’s newer versions.

Maybe try another theme which has this functionality built-in?

You’d need to edit:

Make it

      {
        "type": "image_picker",
        "id": "logo",
        "label": "t:settings_schema.logo.settings.logo_image.label"
      },
      {
        "type": "image_picker",
        "id": "logo_m",
        "label": "Mobile logo"
      },

Then this location:

Make it:

  <div class="header__heading-logo-wrapper">
    {%- 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 logo-desktop',
      widths: widths,
      height: logo_height,
      width: settings.logo_width,
      alt: logo_alt,
      sizes: sizes,
      preload: true
    }}

   {%# below is the added code %}

   {% if settings.logo_m %}
     {{ settings.logo_m | image_url: width: 600 | image_tag:
        class: 'header__heading-logo motion-reduce logo-mobile',
        widths: widths,
        height: logo_height,
        width: settings.logo_width,
        alt: logo_alt,
        sizes: sizes,
        preload: true
      }}
    <style>
        .header__heading-logo-wrapper {
            position: relative;
        }
        .logo-desktop {
            visibility: hidden;
        }
        .logo-mobile {
            position: absolute;
            top:0;
            left: 0;
            width:100%;
            height: 100%;
            object-fit: contain;
       }
       @media (min-width: 750px) {
            .logo-desktop {
                visibility: visible;
            }
            .logo-mobile {
                visibility: hidden;
            }
       }
    </style>
   {% endif %}
  </div>

Then do the same thing for this code location:

Depending on your logo position, may skip one or another.

if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it
4

You absolute unit. Thank you so much I spent so long trying to work this out with ChatGPT hahah