Customizing Shopify's Mobile Drawer Menu in Dawn Theme

Ah, the early days of our Shopify adventures, do you remember that? I was hunched over my laptop one evening, drowning in a sea of menus and themes, feeling like a watchmaker tearing apart a clock I'm not entirely sure how to put back together. The clock in question? Dawn—a Shopify theme as beautiful as it is mystifying.

The quest was simple—or so we thought: customize the mobile drawer menu to show something completely different from the desktop's header menu. You're probably aware, out of the box, Dawn isn't too accommodating for differentiation across platforms. Brandon—and many others of us—came to the same realization.

So how do we do it? Let's tackle this together.

Setting up the Groundwork

Think back to our first little victory—setting up different menus. We start there. First, we need to have two menus set up in our Shopify admin. Luckily, it's straightforward (even if Shopify's admin panel feels like an old friend's attic—full of treasures, but dark and cluttered).

Head over to your Shopify dashboard. Click on Online Store and then Navigation. Here you should have already two pre-created menus, or you can create new ones.
- Your existing Header-menu for the desktop.
- Create a sidebar-menu for the mobile drawer.

With menus in place, it's like having pots and pans laid out but now needing that secret recipe to tie it all together.

Dare to Tweak the Dawn Theme

We didn't come all this way just to have matching menus. So let's dive into the Dawn theme's nitty-gritty. Remember, changes in code require a gentle hand, lest we devastate the delicate layer of aesthetics we've cultivated. Ready? Grab that cup of coffee; we're going in.

In your Shopify admin, go to the Online Store and then Themes.
Next to your Dawn theme, click Actions > Edit code.

Time to Code

The heart is pounding! Get into the Sections folder and open the header.liquid. This file is our canvas. We're about to paint it with vital code—but delicately, like old-school calligraphy.

Look for something like this:

{% if template == 'index' %}
  {%- assign header_menu = 'header-menu' -%}
{% else %}
  {%- assign header_menu = 'header-menu' -%}
{% endif %}

STOP—before editing, make a duplicate of your theme. Always have a backup because, let's be honest, gremlins and typos lurk everywhere.

Then, let’s tailor the mobile experience. Add this instead:

{% if template == 'index' %}
  {%- assign header_menu = 'header-menu' -%}
{% else %}
  {%- if request.device_type == 'desktop' %}
    {%- assign header_menu = 'header-menu' -%}
  {%- else %}
    {%- assign header_menu = 'sidebar-menu' -%}
  {%- endif -%}
{% endif %}

What just happened? We've segmented the experience by device type—like giving separate party snacks to adults and children. The desktop gets wine and cheese (the header-menu), while the mobile grabs chips and dip (the sidebar-menu).

Test and Refine

We learned from that one "oops" moment—testing on a live site without a preview, stress-ridden heartbeats, moments away from potential disaster. Thank Brandon for sharing a preview link! Tap it (safely, in preview mode) and observe the transformation. Does the mobile drawer differ delightfully? Snowflakes aren’t the only things that stand out.

If not, retrace your steps. Code errors can sneak as cunningly as sandwich thieves in a shared fridge. Refresh the page, clear the cache. Have a victory sip of coffee when it finally clicks.

Reflect and Master

Our conquest over the menu duel reminded me of the first time we coded unawares of the storm ahead—but we weathered it! This wasn’t just a technical puzzle; it was a shared experience, the kind that makes us lean back and wonder why we ever doubted ourselves.

Now, equipped with our freshly minted, device-aware menus, we ponder: what’s next? The possibilities tease the imagination. Custom footers? Embedded animations? Whatever it may be, let's tackle it together, as the ever-persistent problem solvers we've proved to be.

Ah, but alas, one solved mystery so often opens a door to three more puzzles. And isn’t that the beauty of it? The highs and lows, the small triumphs we turn into legends—and maybe a blog post or two shared with friends sitting together, recounting these digital adventures. Cheers to what's next! 🥂