How to Customize the Shopify Horizon Theme Menu

The problem

A merchant asked this on the Shopify Community. They had just moved to the Horizon theme and their navigation was a plain hamburger menu on both desktop and mobile. They wanted something closer to a fashion brand like Aime Leon Dore: a slide-out drawer with a Shop tab and an Explore tab at the top, an email signup, and a row of footer links at the bottom.

The key detail they cared about was the behaviour. Tapping Shop or Explore should switch the panel inside the open drawer, without the drawer closing and reopening.

This is one of the most common Horizon questions right now. Horizon is Shopify's newest free theme, and its menu drawer is clean but basic. It shows one menu list. There is no built-in setting for tabs, and no setting for a signup form inside the drawer.

This guide shows how to add all of that with two menus and one Custom Liquid section. You do not edit any of Horizon's theme files, so a future theme update cannot overwrite your work.

The finished Horizon drawer with the Shop tab open, showing the menu links, an email signup, and footer links

Why the Horizon menu looks the way it does

Horizon is built on Shopify's newer theme architecture, the one with sections and blocks everywhere. Its header drawer is a single element that renders one navigation menu. That is why, out of the box, you get a plain list of links and nothing else.

The forum answers on this topic usually tell you to edit Horizon's core files. They point you at the header block and the drawer snippet and tell you to hardcode a second menu and some tab markup into them. That works, but it has two real downsides. It spreads your change across several theme files, and a theme update can wipe it out.

There is a cleaner way. Horizon already gives you a Custom Liquid section, which is a box where you can paste your own code. You can use one of those to render the tabs, the second menu, the signup, and the footer, then slot them into the drawer that Horizon already built. Nothing in the theme's own files changes.

The short answer

• Create two menus in your admin, one for Shop and one for Explore.
• Add one Custom Liquid section in the theme editor and paste the code below.
• The section builds the tabs, the signup, and the footer, and drops them into your existing drawer.

The whole thing works on desktop and mobile, because it hooks the same drawer your hamburger already opens.

Before you start: duplicate your theme

Do this first, every time. In your admin, go to Online Store, then Themes. Find your live theme, click the three dots, and choose Duplicate. Work on the copy.

The copy is unpublished, so your customers never see your work in progress. When you are happy with it, you publish the copy. If anything goes wrong, your live theme is untouched.

Step 1: create the two menus

Your two tabs are just two Shopify menus. Building them as menus, rather than hardcoding the links in code, means you can edit them from your admin forever after, with no code.

• In your admin, go to Settings, then Navigation.
• Click Create menu. Name the first one Shop Menu and add the links you want under the Shop tab.
• Create a second menu named Explore Menu and add its links.
• For the row of footer links at the very bottom, you can reuse your existing Footer menu, or make a third menu.

The Navigation page in Shopify admin showing a Shop Menu and an Explore Menu, each with its links

One thing to note. When you name a menu, Shopify creates a handle from that name. A menu called Shop Menu gets the handle shop-menu. A menu called Explore Menu gets explore-menu. You will point the code at those handles in a moment, so keep them in mind.

Step 2: add one Custom Liquid section

Now the code. It goes in a single Custom Liquid section, and you add that section in the theme editor.

• Open the theme editor on your duplicate theme. From Themes, click Customize.
• In the left panel, scroll down to the Footer group.
• Click Add section, and choose Custom Liquid.
• Paste the code below into the Custom Liquid box, then click Save.

Adding it in the Footer area is deliberate. The footer loads on every page of your store, so the drawer works everywhere, not just on the homepage.

Adding a Custom Liquid section inside the Footer group in the Horizon theme editor

At the very top of the code there are three handles. Set them to match the menus you made in Step 1. If you named your menus Shop Menu and Explore Menu, the defaults already fit, and footer points at your existing Footer menu.

{%- assign shop_handle    = 'shop-menu' -%}
{%- assign explore_handle = 'explore-menu' -%}
{%- assign footer_handle  = 'footer' -%}
{%- assign shop_label     = 'Shop' -%}
{%- assign explore_label  = 'Explore' -%}
{%- assign signup_title   = 'Sign up for our newsletter' -%}
{%- assign signup_button  = 'Join' -%}

{%- assign shop_list = linklists[shop_handle] -%}
{%- assign explore_list = linklists[explore_handle] -%}
{%- assign footer_list = linklists[footer_handle] -%}

<div id="ald-drawer-source" hidden>
  <div class="ald-tabs" role="tablist">
    <button type="button" class="ald-tab is-active" data-panel="shop" aria-selected="true">{{ shop_label }}</button>
    <button type="button" class="ald-tab" data-panel="explore" aria-selected="false">{{ explore_label }}</button>
  </div>
  <div class="ald-panels">
    <ul class="ald-panel is-active" data-panel="shop">
      {%- for link in shop_list.links -%}<li><a href="{{ link.url }}">{{ link.title | escape }}</a></li>{%- endfor -%}
    </ul>
    <ul class="ald-panel" data-panel="explore">
      {%- for link in explore_list.links -%}<li><a href="{{ link.url }}">{{ link.title | escape }}</a></li>{%- endfor -%}
    </ul>
  </div>
  <div class="ald-foot">
    <div class="ald-signup">
      <p class="ald-signup__title">{{ signup_title }}</p>
      {%- form 'customer' -%}
        <input type="hidden" name="contact[tags]" value="newsletter">
        <div class="ald-signup__row">
          <input type="email" name="contact[email]" placeholder="Email address" aria-label="Email" required>
          <button type="submit">{{ signup_button }}</button>
        </div>
        {%- if form.posted_successfully? -%}<p class="ald-signup__ok">Thanks for subscribing.</p>{%- endif -%}
      {%- endform -%}
    </div>
    {%- if footer_list.links.size > 0 -%}
      <ul class="ald-footlinks">
        {%- for link in footer_list.links -%}<li><a href="{{ link.url }}">{{ link.title | escape }}</a></li>{%- endfor -%}
      </ul>
    {%- endif -%}
  </div>
</div>

<style>
.menu-drawer .ald-tabs{display:flex;gap:28px;padding:6px 0 14px;margin-bottom:8px;border-bottom:1px solid rgb(var(--color-foreground-rgb,18 18 18)/.14)}
.menu-drawer .ald-tab{-webkit-appearance:none;appearance:none;background:none;border:0;padding:6px 0;cursor:pointer;font:inherit;font-size:1.8rem;letter-spacing:.02em;color:rgb(var(--color-foreground-rgb,18 18 18)/.5);position:relative}
.menu-drawer .ald-tab.is-active{color:rgb(var(--color-foreground-rgb,18 18 18)/1);font-weight:600}
.menu-drawer .ald-tab.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-15px;height:2px;background:currentColor}
.menu-drawer .ald-panel{list-style:none;margin:0;padding:0;display:none}
.menu-drawer .ald-panel.is-active{display:block}
.menu-drawer .ald-panel a{display:block;padding:11px 0;text-decoration:none;color:inherit;font-size:1.6rem}
.menu-drawer .ald-foot{margin-top:22px;padding-top:20px;border-top:1px solid rgb(var(--color-foreground-rgb,18 18 18)/.14)}
.menu-drawer .ald-signup__title{margin:0 0 10px;font-size:1.25rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.menu-drawer .ald-signup__row{display:flex;border:1px solid rgb(var(--color-foreground-rgb,18 18 18)/.4)}
.menu-drawer .ald-signup__row input{flex:1;min-width:0;border:0;background:none;padding:12px;font:inherit;color:inherit}
.menu-drawer .ald-signup__row input:focus{outline:none}
.menu-drawer .ald-signup__row button{-webkit-appearance:none;appearance:none;border:0;background:rgb(var(--color-foreground-rgb,18 18 18));color:rgb(var(--color-background-rgb,255 255 255));padding:0 18px;cursor:pointer;font:inherit;letter-spacing:.02em}
.menu-drawer .ald-footlinks{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.menu-drawer .ald-footlinks a{text-decoration:none;color:rgb(var(--color-foreground-rgb,18 18 18)/.6);font-size:1.3rem}
.menu-drawer .ald-native-hidden{display:none!important}
</style>

<script>
(function(){
  var SRC='ald-drawer-source';
  function inject(drawer){
    if(!drawer||drawer.querySelector('.ald-tabs'))return;
    var src=document.getElementById(SRC);if(!src)return;
    var nav=drawer.querySelector('.menu-drawer__navigation');if(!nav)return;
    var tabs=src.querySelector('.ald-tabs').cloneNode(true);
    var panels=src.querySelector('.ald-panels').cloneNode(true);
    var nativeList=nav.querySelector('.menu-drawer__menu');
    if(nativeList)nativeList.classList.add('ald-native-hidden');
    nav.insertBefore(panels,nav.firstChild);
    nav.insertBefore(tabs,nav.firstChild);
    var util=drawer.querySelector('.menu-drawer__utility-links');
    var foot=src.querySelector('.ald-foot');
    if(util&&foot){util.insertBefore(foot.cloneNode(true),util.firstChild);}
    tabs.addEventListener('click',function(e){
      var b=e.target.closest('.ald-tab');if(!b)return;
      var key=b.getAttribute('data-panel');
      tabs.querySelectorAll('.ald-tab').forEach(function(t){var on=t===b;t.classList.toggle('is-active',on);t.setAttribute('aria-selected',on);});
      panels.querySelectorAll('.ald-panel').forEach(function(p){p.classList.toggle('is-active',p.getAttribute('data-panel')===key);});
    });
  }
  function run(){document.querySelectorAll('.menu-drawer').forEach(inject);}
  run();
  var host=document.querySelector('#Details-menu-drawer-container')||document.body;
  new MutationObserver(function(){run();}).observe(host,{childList:true,subtree:true});
  document.addEventListener('click',function(e){if(e.target.closest('.header__icon--menu, .menu-drawer-container summary'))setTimeout(run,50);});
})();
</script>

That is the whole thing. Save the section, then open your storefront preview and click the hamburger. You should see the Shop tab open by default.

The result

Tapping Explore swaps to the second panel, and the drawer stays open the whole time. The signup and the footer links stay pinned at the bottom on both tabs. That switch-without-closing behaviour is the part the merchant wanted, and it is the part a plain menu cannot do.

The same Horizon drawer with the Explore tab active, showing the second set of links while the signup and footer stay in place

I tested this on a Horizon store on both desktop and mobile. The Shop tab shows by default, the Explore tab swaps panels without closing the drawer, and the signup and footer stay at the bottom.

How to edit the menu in Horizon later

This is the main reason to use menus rather than hardcoded links. Once the section is in, you never touch the code again to change a link.

• To add, remove, or rename a link in either tab, go to Settings, then Navigation, and edit the Shop Menu or Explore Menu.
• To change the footer links, edit whichever menu the footer_handle points at.
• The change shows up in the drawer straight away.

That is also the plain answer to "how do I edit the menu in the Horizon theme?" for anyone who just wants to change links. Your menus live in Settings, then Navigation, and the theme reads them. You rarely need to touch theme code for menu changes at all.

Can I add a mega menu or drop-down in Horizon instead?

Yes, and it depends on what you mean.

A drop-down, where a parent link reveals child links, is native. In Settings, then Navigation, drag a link underneath another link to nest it. Horizon renders nested links as an expandable submenu with no code.

A mega menu, the big multi-column panel with images, is a bigger job. Horizon's header block has some of this built in on desktop. For a full custom mega menu, you are either extending the theme or using an app. The tabbed drawer in this guide is a different pattern, aimed at the slide-out menu rather than a desktop hover panel.

Can I put a newsletter signup in the menu?

The code above already does. It uses Shopify's own customer form, so a signup creates the customer and turns on their email marketing consent. No app needed to capture the email.

If you use Klaviyo or another email tool, you can swap their embed code in place of that signup block later. The tabs and the rest of the drawer are not affected, because the signup is just one part of the section.

What to check if it did not work

If you saved the section and the drawer still looks plain, run through these.

• Handles do not match. The most common cause. The handle in the code has to match the menu handle exactly. Check Settings, then Navigation, and confirm your menu handles are shop-menu and explore-menu, or edit the handles at the top of the code to match.
• You added it to the wrong place. The section must load site-wide. The Footer group is the safe spot. If you added it inside a single template, it will only load on that page.
• You did not Save. The theme editor needs an explicit Save. If the button stayed greyed out, click into the box, add a space, delete it, then Save.
• Browser cache. You saved, but your phone still shows the old drawer. Reload, or check in a private window.

Custom Liquid vs editing theme code

People often ask whether they should just edit Horizon's files instead. For this, Custom Liquid is the better tool.

Editing theme code means opening the code editor and changing the drawer snippet and the header block. It works, but a theme update can overwrite those files, and a typo can break the header on every page. The Custom Liquid section is self-contained. It cannot be overwritten by a Horizon update, and if you ever want it gone, you delete the one section.

Reach for theme code only when you need something Custom Liquid genuinely cannot express. For a tabbed drawer, it can.

The no-code alternative

If you would rather not paste any code, a menu or drawer app can build a tabbed navigation visually. Meteor Mega Menu, qikify Smart Menu, and Buddha Mega Menu are all popular for this. They cost more over time than a free section, but they give you a visual editor and support.

For a store that wants exactly the Shop and Explore drawer, though, the two menus plus one section is hard to beat. It is free, it is fast, and everything after setup is editable from your admin.

The short version

• Horizon's drawer shows one plain menu and has no built-in tabs or signup.
• Create two menus, Shop Menu and Explore Menu, in Settings, then Navigation.
• Add one Custom Liquid section in the Footer group and paste the code, matching the three handles to your menus.
• The section injects the tabs, signup, and footer into your existing drawer, on desktop and mobile.
• Tabs switch panels without closing the drawer, and every link stays editable from your admin with no code.

That is how to customize the Shopify Horizon theme menu into a proper tabbed drawer, without touching a single theme file.