Unlock Your Horizon Theme's Potential: Create a Dynamic Tabbed Mobile Menu

Okay, folks, let's talk about getting your Shopify store's navigation menu exactly right. We recently had a great discussion in the community, kicked off by EddieJune, a new store owner wrestling with the Horizon theme. Eddie was looking to transform their standard hamburger menu into something more dynamic, specifically eyeing a multi-tabbed drawer like the one Aime Leon Dore uses – think "Shop" and "Explore" tabs, plus an email signup and footer links, all within the same open drawer.

This isn't just a "flip a switch" kind of change, and that's where the community really shone, diving into the nitty-gritty of custom code.

Why Your Horizon Menu Needs a Little Extra Love

The Horizon theme is fantastic, but like many modern themes, it's built with flexibility in mind, sometimes meaning certain advanced layouts require a custom touch. Eddie's request for a tabbed menu that switches content without closing the entire drawer is a prime example. The standard Horizon menu slides out and usually just shows one list of links. To get those distinct "Shop" and "Explore" sections, plus the signup form and footer links, you're looking at some front-end development.

A few members, like Priyasha, Moeed, and gotinker, quickly chimed in to confirm that this is absolutely doable. The key insight? The drawer itself stays open; you're just swapping out what's visible inside it using a bit of JavaScript and CSS. This avoids the jarring experience of the drawer constantly opening and closing as users navigate between sections.

The Community's Consensus: A Step-by-Step Approach to Tabbed Navigation

The most robust solution, beautifully detailed by Ploqo and echoed by others, involves creating custom navigation menus in your Shopify admin and then injecting a chunk of custom Liquid code into your theme. Here's a breakdown:

Step 1: Always Duplicate Your Theme First!

This is non-negotiable, folks. Before you touch a single line of code, head over to your Shopify admin, go to Online Store > Themes, find your Horizon theme, click Actions > Duplicate. Work on this unpublished copy. Seriously, it's your safety net!

Step 2: Create Your Navigation Menus

This is where you set up the content for your new tabs. You'll want to create at least two new menus, possibly three:

• Shop Menu: For all your product categories, collections, etc.
• Explore Menu: For things like About Us, Blog, Lookbooks, Contact, etc.
• Footer Menu: If you want specific links at the bottom of your drawer (e.g., Privacy Policy, Terms), you can point to an existing footer menu or create a new one.

Go to Settings > Navigation in your Shopify admin and create these. This is brilliant because, as Moeed pointed out, once the code is in place, you can edit all your drawer links directly from your admin without ever touching code again!

Step 3: Injecting the Custom Liquid Section

Now for the code! You'll add a new "Custom Liquid" section to your theme. Why this method? Ploqo suggests adding it to the Footer group because it ensures the code loads on every page, making your drawer functional everywhere.

• In your theme editor (on your duplicated theme), navigate to Online Store > Themes > Actions > Edit code.
• Open the theme editor (the visual editor). Scroll down the left panel to the Footer group.
• Click Add section, then choose Custom Liquid.
• Paste the code provided below into this new section and hit Save.

Step 4: The Custom Liquid Code

Before pasting, make sure to adjust the shop_handle, explore_handle, and footer_handle variables at the top of the code to match the exact handles of the menus you created in Step 2. For instance, a menu titled "Shop Menu" will have a handle of shop-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] -%}

Understanding What Just Happened

This code block is a powerful little package. Here's a quick rundown:

• Liquid Variables: At the top, you define the handles for your menus and the text labels for your tabs and signup form.
• Hidden Div (ald-drawer-source): This div contains all the HTML for your new tabbed menu, signup form, and footer links. It's hidden initially, acting as a template.
• Tabs (ald-tabs): These are your "Shop" and "Explore" buttons. They have a data-panel attribute that links them to their respective content panels.
• Panels (ald-panels): These
  elements hold the actual links from your Shopify navigation menus. Only one panel has the is-active class at a time.
  • Signup Form (ald-signup): This uses Shopify's native {% form 'customer' %}. It's great because it creates a customer entry and registers email marketing consent directly in your admin. As several experts noted, you can easily swap this out for a Klaviyo embed later without disrupting the overall drawer structure.
  • Footer Links (ald-footlinks): These pull links from your designated footer menu.
  • CSS (