Shopify navigation & menu setup after WooCommerce (2026)
How to set up navigation menus in Shopify after migrating from WooCommerce — main menus, mega menus, footer navigation, breadcrumbs, replacing WooCommerce menu plugins, and navigation best practices.
WooCommerce navigation was built on WordPress's flexible menu system — you could add any mix of pages, categories, custom links, and posts to menus, with unlimited nesting and plugin-based enhancements (UberMenu for mega menus, Max Mega Menu, WP Nav Menus). Shopify has a simpler native menu system (nested menus up to 2 levels, basic link types) that covers most store needs, with theme-level mega menu support for more complex stores. This guide covers the full navigation migration from WooCommerce menus to Shopify's menu system.
Shopify menu system overview
- Online Store → Navigation — all menus managed here
- Default menus: "Main menu" and "Footer menu" — most themes use these by default
- Custom menus: create additional menus for footers, sidebars, or custom navigation areas
- Menu items: link to Collections, Products, Pages, Blog, Blogs, or custom URL
- Nesting: menus support up to 2 levels of nesting (main item → dropdown items). No deeper nesting natively.
- Mega menus: require theme support. Most premium themes (Dawn sections-based, Prestige, etc.) support mega menus via theme customization settings or sections.
Menu item link types
| Link type | Example | Notes |
|---|---|---|
| Collections | /collections/clothing | Most used — maps to WooCommerce categories |
| Products | /products/product-handle | Direct product link — use sparingly in navigation |
| Pages | /pages/about-us | Static content pages |
| Blog | /blogs/news | Blog index page |
| Blog posts | /blogs/news/post-handle | Specific blog post — rarely in nav |
| Custom URL | /collections/all?sort_by=price-ascending | Any URL including filtered collections |
| Homepage | / | Home link |
Migrating WooCommerce menu structure
WooCommerce menu → Shopify menu mapping
- WordPress pages → Shopify Pages: About, Contact, FAQ, etc. Create equivalent Shopify pages first, then add to menu.
- WooCommerce product categories → Shopify Collections: Map each WooCommerce category to its Shopify collection. Menu item links to /collections/handle.
- WooCommerce product tags → Shopify tag collections: Use
/collections/all?tag=your-tagas a custom URL menu item for tag-based navigation. - WooCommerce blog categories → Shopify Blog: Shopify has one blog with tagged posts. Use custom URL
/blogs/news/tagged/blog-category-slugfor category-specific blog navigation. - External links: Recreate as Custom URL items in Shopify navigation.
Menu audit process
- Screenshot or export your WooCommerce menu structure (Appearance → Menus in WordPress admin)
- Map each item to its Shopify equivalent URL
- Rebuild in Shopify Navigation in the same hierarchy
- Test navigation on desktop and mobile — compare to WooCommerce screenshots
Mega menus
Complex fashion, homeware, and large-catalogue stores often need mega menus (multi-column dropdown with featured images, grouped links, promotional blocks):
- Theme-based mega menus: Many premium themes (Prestige, Expanse, Symmetry) include mega menu functionality in their theme customization. Set up via Online Store → Customize → Header → Menu settings.
- Dawn (free theme): Dawn supports 2-level dropdowns but not mega menus natively. For mega menus with Dawn, either: (a) upgrade to a premium theme, or (b) add a mega menu app.
- Mega menu apps: Buddha Mega Menu, qikify Mega Menu — add mega menu overlay to any Shopify theme. Include image blocks, promotional banners, and multi-column link groups.
- WooCommerce UberMenu → Shopify: there's no direct equivalent; recreate mega menu structure using your chosen theme or app.
Footer navigation
- Most Shopify themes use a "Footer menu" for the bottom navigation links
- Standard footer links: About Us, Contact, FAQ, Returns Policy, Privacy Policy, Terms of Service, Shipping Information
- Policy links: Online Store → Navigation → Footer menu. Add links to /policies/refund-policy, /policies/privacy-policy, /policies/shipping-policy.
- Multi-column footer: some themes support multiple footer menus — create separate menus for each column (Customer Service, About, Social)
- Social links: add social media links to footer menu as Custom URL items. Or use theme's built-in social icon settings (Settings → Social media links)
Breadcrumb navigation
- Most Shopify themes include breadcrumb navigation on product and collection pages by default
- Breadcrumb structure: Home → Collection → Product name
- WooCommerce breadcrumbs often showed the full category hierarchy (Home → Women → Dresses → Casual Dresses). Shopify breadcrumbs show the collection the customer navigated from — if a product is in multiple collections, the breadcrumb reflects the last-clicked collection path.
- SEO: add BreadcrumbList schema to your theme for Google breadcrumb rich results
- Verify breadcrumbs are working post-migration and correctly show the navigation path
Mobile navigation
- Shopify themes automatically create a slide-out or bottom-drawer mobile menu from your main menu
- Mobile menu includes: all main navigation items, account link, cart link, search
- Deep menus on mobile: 3+ level menus become unwieldy on mobile. Consider flatter navigation for mobile — feature top-level categories, not every sub-category.
- Mobile navigation testing: browse your Shopify store on iPhone and Android after setting up navigation. The mobile menu experience is often where navigation issues are discovered.
Navigation migration checklist
- Screenshot all WooCommerce menus (main, footer, any additional)
- Map each WooCommerce menu item to Shopify equivalent URL
- Create all referenced Collections and Pages in Shopify first (before building menus)
- Build Main menu in Shopify Navigation matching WooCommerce structure
- Build Footer menu with policy links and support pages
- If using mega menus: configure via theme settings or install mega menu app
- Add social media links to footer (via theme social settings or footer menu)
- Test main navigation: click every top-level item and dropdown item
- Test mobile navigation: all items accessible on mobile screen sizes
- Verify breadcrumbs display correctly on product and collection pages
- Check that 301 redirects are in place for any WooCommerce category URLs used in external links or bookmarks
The navigation migration is often underestimated because it seems trivial — it's "just menus." But navigation structure directly affects conversion rates and SEO. WooCommerce stores with deeply-nested category menus (5+ levels) have almost always tracked that 80% of traffic goes through the top 3–4 navigation paths. Use the migration as an opportunity to audit your WooCommerce navigation analytics (what pages are accessed from which menu items) and simplify — fewer top-level items, clearer collection naming, less nesting. A WooCommerce store that had "Women → Tops → Casual → Summer → Sale" now has "Tops → New Arrivals / Sale / All Tops." Simpler navigation improves mobile experience, reduces decision fatigue, and makes the menu work better on Shopify's 2-level nesting constraint.
Migrate your store with k-sync
Connect your WooCommerce store, validate your products, and push to Shopify in minutes. Free for up to 50 products.
Get started freeRelated reading
Migrating a luggage and travel accessories store from WooCommerce to Shopify (2026)
How to migrate a luggage, travel bags, or travel accessories WooCommerce store to Shopify — luggage specifications, airline compliance, TSA lock, warranty and durability claims, and luggage retail Shopify setup.
Migrating a motorcycle accessories store from WooCommerce to Shopify (2026)
How to migrate a motorcycle accessories, biker gear, or motorbike parts WooCommerce store to Shopify — helmet safety standards, CE-rated protective clothing, type approval for parts, fitment compatibility, and motorcycle retail Shopify setup.