Generate Collapsible Mega Menu

Build a multi-column mega menu dropdown with featured images, collection links, promotional banners, and mobile accordion fallback.

View as Markdown

Sidekick writes it — you put it live

Sidekick produces the content or code for this, but doesn't apply it to your store itself. You'll paste or publish the result yourself — the prompt tells Sidekick to explain exactly where it goes.

📋 Prompt

Run in Sidekick

Create a mega menu navigation block:

Desktop layout:

  Full-width dropdown on hover
  Multi-column layout (2-4 columns)
  Featured image/banner in one column
  Collection/page links in other columns
  Column headings
  Promotional text or badge


Mobile layout:

  Accordion-style expandable menus
  Tap to expand/collapse
  Back button for sub-levels
  Full-screen overlay


Settings:

  Menu items (from Shopify navigation)
  Number of columns per dropdown
  Featured image per menu item
  Promotional banner (image + link)
  Dropdown background color
  Animation style (fade/slide)
  Column heading style


Requirements:

  Smooth open/close animations
  Keyboard accessible (Tab, Enter, Escape)
  Click-outside to close
  Works with Shopify’s navigation system
  Mobile-first responsive design


Please generate the Liquid, CSS, and JavaScript for this mega menu as code I can paste into my own theme myself.

Where to add it: In the Shopify admin, go to Online Store > Themes > Edit code. Mega menus live in the header — open sections/header.liquid (or the header section inside your header-group.json) and add the generated Liquid/CSS/JS there, wiring it to your existing navigation menu handle. Save and check the theme editor to confirm the dropdown renders correctly.

How to Use

Copy the prompt above
Open Shopify Sidekick in your Shopify admin
Paste the prompt and replace the bracketed placeholders with your details
Review Sidekick's response and apply the suggestions