If your Shopify store has a large product catalog or deep nested collections, the default mobile menu can become cluttered, slow, or confusing for your customers.

This tutorial shows you how to optimize your mobile menu with a clean accordion structure, nested levels, and smooth navigation—without using any apps.

---

🔥 What You'll Achieve

• A mobile-friendly accordion menu
• Support for large catalogs and nested collections
• Collapsible groups for parent → child → sub-child categories
• Cleaner UI and better user experience

Perfect for fashion, electronics, accessories, or any store with many categories.

---

📌 Step 1: Create a New Snippet for the Mobile Menu

Go to:

Online Store → Themes → Edit Code

Under Snippets, click:

→ Add a new snippet  
Name it: mobile-menu-accordion

Paste the following code inside:

• {% for link in linklists.main-menu.links %}
• {{ link.title }} {% if link.links.size > 0 %} + {% endif %}
  {% if link.links.size > 0 %}
  • {% for child in link.links %}
  • {{ child.title }} {% if child.links.size > 0 %}
    • {% for subchild in child.links %}
    • {{ subchild.title }}
    • {% endfor %}
    {% endif %}
  • {% endfor %}
  {% endif %}
• {% endfor %}

This structure supports unlimited nesting levels.

---

📌 Step 2: Add JavaScript Toggle Functionality

Open:

theme.liquid

Right before </body>, add:

This adds expandable sections for child links.

---

📌 Step 3: Add CSS for Mobile-Friendly Styling

Open:

assets/base.css or assets/custom.css

Add the following:

.mobile-menu { list-style: none; padding: 0; }
.mobile-menu .menu-item { border-bottom: 1px solid #eee; }

.menu-title {
  display: flex;
  justify-content: space-between;
  padding: 12px 15px;
  font-size: 16px;
}

.toggle-submenu {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}

.submenu, .nested-menu {
  display: none;
  padding-left: 20px;
  background: #fafafa;
}

.submenu.open { display: block; }

.submenu a, .nested-menu a {
  display: block;
  padding: 8px 10px;
  font-size: 15px;
}

This makes the menu clean, simple, and touch-friendly.

---

📌 Step 4: Insert the New Menu Snippet into Your Mobile Drawer

Open:

snippets/header-drawer.liquid

Find the mobile menu area and replace the default code with:

{% render 'mobile-menu-accordion' %}

Now your theme uses your new optimized menu.

---

📌 Optional Enhancements

✔ Add smooth transitions

.submenu, .nested-menu {
  transition: all 0.25s ease;
}

✔ Auto-close other menus when one is opened

I can provide this if you want a more advanced UX.

✔ Add icons or category images

Perfect for fashion or electronics stores.

---

🎉 Final Result

• Clean, collapsible mobile menu
• Supports large catalogs and deep nested structures
• Easy for non-technical store owners to manage
• Works with all Shopify free & paid themes