How To add Mega Menu on Shopify 2026 – Without App

Want to give your Shopify store a professional, conversion-optimized mega menu like Zara, H&M, or Gymshark – without paying $20-30/month for an app? This complete tutorial walks you through adding a custom Shopify mega menu using a single section file. No app needed, no monthly fees, full control over every link, image, and product card.

Works with Dawn, Refresh, Sense, Craft, Studio, Horizon and any free Shopify 2.0 theme.

Watch the Mega Menu Tutorial

Prefer to follow along visually? Watch the full walkthrough where I demonstrate every feature on a live Dawn theme:

What You’ll Get With This Shopify Mega Menu

This is not a basic dropdown. It is a complete CRO-optimized navigation system with every feature top brands use to drive clicks from header to product page. Each menu item can be a simple link, a single-column dropdown, or a full multi-column mega menu with promo images and featured products.

Announcement Strip
Marquee or static strip with up to 3 messages.

Mega Menu Columns
Up to 4 columns mixing links, promos, and products.

Featured Product Cards
Auto pulls price, image, and discount %.

Promo Image Tiles
Full-bleed image cards with tag, title, and CTA.

NEW / SALE / HOT Badges
Per menu item and per link inside columns.

Trust Row
Secure checkout, free shipping, returns.

Quick Search Panel
Slide-down search with popular suggestions.

Mobile Drawer
Native slide-out menu with accordion sub-items.

Sticky on Scroll
Header stays visible with smooth shadow.

Account, Cart, Wishlist
Right-side action icons with live cart count.

3 Hover Styles
Underline, pill, or color-only on links.

Full Color Control
Customize every color from the editor.

Step 1: Create a New Section File

Open Your Theme Code

From your Shopify admin, go to Online Store > Themes.
Click the three dots on your current theme > “Edit code”.
In the left sidebar, scroll to the Sections folder.
Click “Add a new section”.
Name it: mega-menu-ecomranks
Delete any default code Shopify puts in the file.

Step 2: Copy & Paste the Mega Menu Code

Click the Copy Code button below, then paste it into your new mega-menu-ecomranks.liquid file and click Save.

mega-menu-ecomranks.liquid

{% comment %}
  MEGA MENU -- by EcomRanks
  Fiverr: https://fvrr.co/3BsbtyA
{% endcomment %}

{%- assign s = section.settings -%}

<style>
  /* Full CSS with 50+ customizable properties */
  /* Announcement strip with marquee animation */
  /* Multi-column mega menu grid */
  /* Promo cards, product cards, link lists */
  /* Hover effects, sticky scroll, mobile drawer */
  /* All driven by Customizer settings */
</style>

<section class="ecr-mm-section">
  <!-- Announcement strip -->
  <!-- Main nav with logo, menu, actions -->
  <!-- Dynamic dropdowns: simple OR mega -->
  <!-- Mobile drawer with accordion -->
  <!-- Search panel with suggestions -->
</section>

<script>
  /* Sticky scroll detection */
  /* Mobile drawer open/close */
  /* Search panel toggle */
  /* Click-outside to close dropdowns */
</script>

{% schema %}
  /* 50+ settings: strip, logo, nav style,    */
  /* dropdowns, search, actions, trust row,   */
  /* mobile, colors, layout, branding         */
  /* Per-block: 4 columns x 4 types each      */
{% endschema %}

Important: The code block above is a preview. Click Copy Code to get the complete working file with all 1,890+ lines of code.

Step 3: Add the Mega Menu in the Customizer

Open Customize and Add the Section

Go to Online Store > Themes > Customize.
On the home page, click “Add section” at the very top of the page.
Search for “Mega Menu”.
The section appears with 5 default menu items pre-configured.
Drag it above your existing theme header (or hide your theme header if you want to fully replace it).
Click Save.

Step 4: Configure Your Mega Menu Settings

The section comes with 50+ settings split into clear groups. Each menu item block has its own setup for dropdown type, columns, and content. Here is the full breakdown:

Announcement Strip	Up to 3 rotating messages, marquee animation, custom colors and speed.
Logo	Image picker or text fallback, max width control.
Navigation Style	Nav height, alignment, gap, font size, weight, letter spacing, text case, hover style.
Dropdown Style	5 widths (auto, 400, 600, 800, full), padding, corner radius, column gap.
Sticky & Search	Sticky on scroll toggle, search icon, placeholder, popular suggestions.
Right-Side Actions	Account, wishlist, cart with live item count.
Trust Row	4 trust items shown at the bottom of every mega menu dropdown.
Mobile Drawer	Slide-in side (left/right), full search, accordion sub-items.
Colors	Nav bg, text, accent, sale color, dropdown bg, dropdown text, border, hover.
Per Menu Item Block	Label, link, badge (NEW/SALE/HOT), highlight, dropdown type, 4 columns each with type, links, view-all, promo, or product.

Need Custom Shopify Development?

I build custom Shopify sections, full theme customizations, and conversion-optimized stores. If you need something beyond this free code – I am here to help.

Hire Me on Fiverr

Free Website Audit

Don’t Have a Shopify Store Yet?

Start your Shopify store for just $1/month – 3-day free trial + $1/month for 3 months (90 days total).

Start Your Shopify Store

Mega Menu FAQ & Troubleshooting

Does this Shopify mega menu work on mobile?

Yes. The mega menu automatically switches to a slide-in mobile drawer below 990px viewport width. The drawer includes a search bar, accordion-style expandable sub-menus, and an account link in the footer. You can choose whether the drawer slides in from the left or right.

Can I use this mega menu on product pages and collection pages?

Yes, the section is enabled on all templates. Add it once at the top of your home page and it will appear globally if you place it above your theme header in the layout, or you can add it page-by-page in the customizer.

Does it work with all Shopify themes?

It works with Dawn and all free Shopify 2.0 themes including Refresh, Sense, Craft, Studio, Origin, Colorblock, Crave, Spotlight, and Horizon. For paid themes or heavily customized themes, minor CSS adjustments may be needed – hire me on Fiverr if you want it integrated cleanly with your theme.

Can I add multiple mega menus on one page?

Yes. Each instance of the section uses a unique ID, so you can add it multiple times without CSS or JavaScript conflicts. Most stores only need one navigation, but you can use a second instance for a category landing page if needed.

How do I add featured products inside the mega menu?

Inside any menu item block, change a column type to “Featured Product” and pick a product. The mega menu auto-pulls the product image, title, current price, and shows the discount percentage if a compare-at price is set. Great for surfacing best sellers right inside the navigation.

How do I add the NEW or SALE badges?

Two ways: at the top-level menu item, use the “Badge” dropdown to add NEW, SALE, or HOT badges next to labels like “Shop”. For individual links inside a column, add the badge after the URL using a pipe: New Arrivals | /collections/new | new.

Will this slow down my Shopify store?

No. The section uses zero external dependencies, no jQuery, no app SDK, and the JavaScript is under 3KB minified. CSS is scoped per section so it does not bloat global styles. It will be faster than any third-party mega menu app.

I need help or want more custom features.

Happy to help. Send me a message on WhatsApp or hire me on Fiverr for custom mega menu integrations, theme-specific adjustments, or full store builds. I have built mega menus for stores doing 6 and 7 figures monthly.

Let’s Build Your Dream Shopify Store

I’m a Shopify developer specializing in theme customization, CRO, and custom sections. Small tweak or full store build – I’m here to help.

Built by EcomRanks – Shopify Development & CRO