I am a new store owner and have been configuring the horizon theme. I currently have a static hamburger menu on web and mobile.
What I need:
a look similar to ALD (image attached) with “Shop” and “Explore” tabs and email signup/footer.
I am assuming the email sign-up is tied to Klaviyo and have requested an account but I can use shopify’s built-in email capture.
here is how my theme’s menu currently looks
That layout is more than a CSS change. The Shop / Explore behavior needs a custom drawer section with two panel states; the signup area can then use either Shopify’s customer form or a Klaviyo embed.
Before touching the live theme, I would duplicate it and confirm one interaction: should Shop and Explore switch panels inside the open drawer, without closing it? If yes, this can be scoped as one bounded theme customization with desktop/mobile QA rather than a full redesign.
Hey, Eddie
Just came across your community post. Now this is a promotional pitch for my product, but I think it suits extremely well and will help you achieve what you want.
I have made a desktop application called Manager For Shopify. It can connect your existing AI subs with your shopify stores and help you manage your stores easily.
The task which you have i.e. updating your hamburger menu, it will require you to deal with code changes in your theme. Now, what you can do is download my product and connect it with your store. You can just provide it the screenshots and ask it to make the changes. You can preview the changes made by the agent in the application itself. Additionally, you can also ask it to make a copy of the theme first, so that you can rollback to your current theme at any time.
The application could be downloaded via: https://manager.vikasmaur.com/
If you have any paid AI subs like Chatgpt, Claude, Grok etc. then you can use them. If not, then I suppose ChatGPT also provides free limits upto a certain extent, however I don’t know whether they’ll finish up soon, but if not then probably you can try the Terra model in it. Also there are plenty of free models provided by opencode, you can install that and try models in that as well. Currently, you can try “Ox Alpha” which is being provided for free by Opencode. Or you can use grok models. You need to try these though. You can download all the providers via the application itself, so no need to worry about that.
There’s a free trial for 7 days for the application so you can try it out without any issues.
I hope this might sound helpful to you.
Thanks,
Vikas
kai,
thank you for the insight as it is highly appreciated!
I have created a copy of the theme.
going forward, as you pointed out "the shop and explore panels should switch panels without closing the open drawer.
I am leaning towards a one bounded theme customization. I do not want to do a full redesign.
any suggestions on how I can make these changes? or know any freelancer that can assist? (for a fee?)
Yes — I can take this on as a bounded paid theme customization.
Proposed scope:
Before I quote it, I need only the Horizon theme version, a preview link for the duplicate theme, and your choice of Shopify signup or Klaviyo. Please do not post collaborator codes or admin access here; if you want to proceed, email those non-sensitive details to kai@kaixingworks.com and I’ll confirm a fixed scope.
It would probably cost you less time and money to just get a theme that has the features you are looking for…
Hi @EddieJune
Yes, this is definitely possible in the Horizon theme. You can customize the existing hamburger drawer to work more like the ALD example, with Shop / Explore tabs at the top, the relevant navigation links underneath, and an email signup + footer links at the bottom.
For the email signup, you don’t necessarily need Klaviyo. You can use Shopify’s built-in email/customer signup initially, and connect Klaviyo later once your account is ready.
The main customization would be:
So you can achieve a very similar structure without changing the entire theme. Horizon’s existing drawer can be customized rather than building the whole navigation from scratch.
Best regards,
Devcoder 
Hey @EddieJune
Welcome to the community and apologies you had to go through all of those AI generated replies since half of these replies are just restating your request back to you as a bullet list, which isn’t a solution, and one is a straight app pitch.
Here’s how it’s actually done in Horizon. Create two separate menus in Settings, Navigation, one called Shop and one called Explore. Then in the header’s menu drawer, render both menu lists into the drawer at once, wrap each in its own panel div, and put two tab buttons above them. Switching tabs just toggles an attribute or class on the wrapper, and CSS shows or hides the matching panel. That’s the key detail: because you’re only toggling visibility on content that’s already in the DOM, the drawer never re-renders and never closes, which is exactly the behaviour you confirmed you want. No JavaScript beyond a few lines on the tab click, and no fetching or reloading.
For the signup at the bottom, use Shopify’s native {% form 'customer' %} newsletter form inside the drawer now, and swap in a Klaviyo embed later if you want, the surrounding markup doesn’t change. Footer links go underneath as a simple third menu.
The reason I’d set it up with two navigation menus rather than hardcoding the links is that you then edit both tabs from your admin afterwards, no code needed ever again, and adding or removing a link is a 10 second job.
If you’d like it built properly on Horizon, feel free to connect with me and I’ll sort it.
Best,
Moeed
Hey Eddie, Moeed’s outline is the right idea. Horizon just does not put the drawer in header.liquid the way Dawn does, so here are the actual files on the copy you already made.
The hamburger is this chain:
sections/header.liquid asks for the menu block with variant: ‘mobile’.
blocks/_header-menu.liquid is that block. When the variant is mobile it runs {% render ‘header-drawer’, linklist: block_settings.menu %}.
snippets/header-drawer.liquid is the drawer itself (header-drawer, details#Details-menu-drawer-container, the sliding .menu-drawer panel).
assets/header-drawer.js is the custom element that opens and closes it.
The block schema only has one menu setting, link_list id menu, default main-menu. So in Content > Menus make two menus, Shop and Explore. Add a second link_list setting on _header-menu.liquid for Explore, then in header-drawer.liquid render both lists into the already-open .menu-drawer. Wrap each in its own panel, put two tab buttons above nav.menu-drawer__navigation, and have the tabs only toggle a class or attribute.
Do not use the nested details / header-drawer/open/submenu path for Shop vs Explore. That is Horizon’s 3-level submenu, and it slides a new panel. You want both lists sitting in the open drawer so the drawer never re-renders.
Signup belongs in .menu-drawer__utility-links at the bottom of the same snippet, after the nav. Native form:
{% form ‘customer’ %}
Email
Sign up
{% endform %}
That creates the customer and turns on email marketing consent. A Klaviyo embed can replace that block later without touching the tabs. Footer links are a third menu under the form.
Stay on the unpublished copy. If you need another backup, Online Store > Themes > Duplicate.
The following steps will help you reach this (use sidekick/codex/claude to further optimise it)
Juse one Custom Liquid section is needed.
Step 1 - Create the menus
Step 2 - Add one Custom Liquid section
At the top of the code, set the three handles to match your menus (a menu titled “Shop Menu” gets the handle 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] -%}
<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>
Notes
footer_handle at (your existing Footer menu works).Regards,
Ploqo
Yes this is doable but it’s custom code territory, not a quick theme-setting toggle - as others mentioned. Since Horizon uses the newer “theme blocks” setup, the cleanest way is: duplicate your theme first (always, before editing code), then open the header/menu-drawer section and add two tabs (“Shop”/“Explore”) that just toggle which panel is visible via a bit of JS + CSS - the drawer itself stays open, you’re only swapping what’s shown inside it. Then drop in an email signup block and footer links as additional blocks inside that same drawer.
It’s mostly front-end work (HTML/CSS/JS inside the section file), so if you’re comfortable with that you could DIY it by studying how ALD’s drawer behaves in browser dev tools first. Otherwise, hiring someone for a scoped job (just the drawer, not a full theme rebuild) shouldn’t take long since it’s a contained change.