Shopify Mobile Menu and Header: A Layout for Phones
A Shopify mobile menu that works on phones keeps search and the cart visible in the header, puts product categories at the top of the menu drawer and company pages below them, and keeps the header short enough that products stay on screen. You build the menu itself under Content > Menus and set how the header behaves in the theme editor’s header section; what cannot be done there, such as a separate mobile-only menu in many themes, needs code or an app.
The blueprint
Shopify’s guide to the hamburger menu, updated on October 27, 2026, gives most of the rules below.
| Part | What goes there | Why |
|---|---|---|
| Header bar | Menu button, logo, search, cart, and the account icon if your theme has room | Shopify’s guide says to keep search and cart access visible |
| Menu button | The standard three-line icon, top left, with a visible “Menu” label if space allows | Shoppers recognize it there; the label helps less experienced users |
| Drawer, first block | Product categories, each with a “View all” link under any heading that opens a submenu | Shopify’s guide puts categories before company and policy pages |
| Drawer, second block | About, contact, shipping and returns, FAQ | Useful, but not what most visits are for |
| Submenus | No more than about 10 subcategories per group | Baymard research cited by Shopify found more than about 10 overwhelmed shoppers |
| Sticky header | Menu button, search and cart stay visible as the shopper scrolls | Keep it short so it does not cover the products |
A clothing store’s drawer might read: New in, Women, Men, Accessories, Sale, then a divider, then Shipping and returns, Size guide, Contact, About. “Women” opens a submenu with View all women, Dresses, Tops, Pants, Shoes, and nothing more than that list needs.
The guide’s accessibility checks are worth applying as written. WCAG 2.2 sets a minimum tap target of 24 by 24 CSS pixels, and the guide recommends 44 by 44 for easier tapping. The menu icon needs at least 3:1 contrast against its background, the button needs an accessible name for screen readers that says whether the menu is open, and a keyboard user must be able to open, move through and close the menu.
Set it in the theme editor
- Build the menu under Content > Menus. Many themes use the same main menu for desktop and the mobile drawer, so the order you set here is the drawer’s order. Nest subcategories under their parent by dragging them in.
- Open the theme editor from Online Store > Themes > Customize and select the header section. Shopify’s theme editor shows the theme in a preview window, so you can see each change as you make it; switch the preview to mobile.
- Pick the menu the header uses, and the sticky behavior, if your theme offers a setting such as “sticky header”. Settings and their names differ by theme, so check your theme’s documentation for the exact options.
- Check search and cart icons in the header settings, and the logo size on mobile, which some themes set separately so the header stays short.
- Save, then open the store on a real phone.
Shopify’s theme editor page, read on October 23, 2026, describes the editor as the place to change content, layout, typography and colors without code, through each theme’s sections and settings. If your store uses Canvas, Shopify’s new editor in early access, themes marked with the Canvas badge open only there.
What needs code or an app
In many themes, these are outside the theme editor:
- A mobile menu with different items from the desktop menu.
- A bottom tab bar, the app-style row of icons at the foot of the screen.
- Images or icons inside the menu drawer, beyond what your theme’s settings allow.
- A mega menu on desktop and a simple drawer on mobile, if the theme does not already have both.
Navigation apps in the App Store add tab bars and mega menus without code. Install one only after you have tried the theme’s own menu with a short, well-ordered list; cut the top-level list first, and add an app only if a short, well-ordered menu still does not work.
Test it
On a real phone, not only in the editor’s preview:
- Open and close the menu with one thumb, and find a product three levels deep.
- Check that search opens from the header on every page, and that the cart count updates.
- Scroll a collection page and see how much of the screen the sticky header takes.
- Rotate to landscape; headers that fit in portrait sometimes wrap.
We test our own sites at every width from 320 to 1920 pixels before a change goes live, because a header that works on one phone can wrap on a tablet. How to test across devices is in responsive design testing, the page-by-page mobile fixes in Shopify mobile optimization, the full checklist in the mobile audit, and other store design guides in the running a store hub.
Frequently asked questions
How do I change the mobile menu on Shopify? Edit the menu’s items and order under Content > Menus, then choose which menu the header uses in the theme editor’s header section. In many themes the mobile drawer shows the same main menu as desktop.
Should the header be sticky? A sticky header keeps the menu, search and cart in reach while shoppers scroll, which Shopify’s guide recommends, as long as it stays short enough not to cover the products. Check it on your smallest test phone.
Can mobile and desktop menus differ? Some themes let you assign a separate mobile menu; others use one menu for both. Where the theme has no setting, a different mobile menu needs theme code or a navigation app.