MINIMOG theme
Try Minimog freeResourcesOther solutions
  • What is Minimog theme?
  • Changelog
  • Refund policy
  • Support policy
  • Terms of Service
  • Getting started
    • Install Minimog theme
      • Install Minimog in 1-click fast way
      • Install Minimog manually
    • Add Custom code/ CSS correctly
    • Integrate Shopify Review apps
    • Mega menu
    • Theme license
      • Activate license
      • Extend/ Renew Theme Support
      • Transfer license
    • Update Minimog theme
    • FoxHome
  • Build for success series
    • Home page for Fashion stores like SKIMS 🔥
  • Page's global sections
    • Announcement bar
    • Age verifier pop-up
    • Header
    • Footer
    • Mobile sticky bar
    • Scaling logo
  • Theme sections
    • Before/ After image slider
    • Blog posts
    • Brand list
    • Cascading collection
    • Cascading product
    • Collapsible tabs
    • Collection image showcase
    • Collection showcase
    • Collage tab
    • Collection list
    • Collection tab
    • Countdown timer
    • Custom content
    • Favorite product slider
    • Featured collection
    • Featured product
    • Featured promotion
    • Featured products slider
    • Gallery images 🔥
    • Google Maps
    • Hotspot image
    • Instagram
    • Image with slider
    • Image cards
    • Image with text overlay
    • Image with text
    • Lookbook
    • Multiple image with text 🔥
    • Newsletter
    • Press
    • Product bundles
    • Product tabs
    • Product list banner
    • Promotion banner
    • Promotion countdown timer 🔥
    • Recently viewed products
    • Rich text
    • Scrolling promotion
    • Slideshow
    • Testimonials
    • Video
    • Video hero
  • Theme settings
    • General settings
    • Layout settings
    • Additional pages
    • Advanced
    • Animations
    • Article card
    • Badges
    • Cart settings
    • Checkout
    • Colors & Color schemes
    • Currency format
    • Drawer & pop-up
    • GDPR settings
    • Intergrated apps
    • Integration
    • Product card
    • Product inventory
    • Product options design
    • Product options swatches
    • Social sharing
    • Search
    • Section
    • Store contact
    • Typography
  • Collections & Products
    • Product page
      • Custom product templates
      • Product template
      • Page sections
        • Breadcrumb
        • Product information
        • Product information tabs
        • Product recommedations
      • Product description
    • Collection page
      • Collection template
      • Collection sections
        • Collection banner
        • Product listing
  • Other pages
    • 404 page
    • Blogs
    • Blog posts
    • Cart & Checkout
    • Password
    • Customize password page
  • FAQS
    • Generic
      • Add a Cookie Banner
      • Add a gift wrap option to my cart
      • Add/ Remove Social icons on footer
      • Customize search results
      • Hide sections on mobile/ desktop view
      • JavaScript events for developers
      • Set up an Age Verifier Pop-up
      • Show Payment icons on the Footer
      • Sticky header when scrolling
    • Collection page
      • Add custom badges to my product card
      • Change the default product order in collection
      • Move the collection description to under the product listing
      • Set up Filters for the collection pages
    • Product page
      • Add recipient fields to my gift card product
      • Remove the tax-included information in product page
      • Set up Local Pickup option
    • Shopify functions
      • Does Minimog support Section groups?
      • Migrate data in the Section groups supported version
    • Foxify freebie code - All you need to know
  • TROUBLESHOOTING
    • Can't upload my Minimog theme to Shopify
    • Contact form submissions not found
    • Currency format display
    • FoxKit features are duplicated
    • FoxKit stops working
    • Missing images when installing demos
    • Translation missing issue
    • Translation apps incompatibility
    • Why is my activated Show Account Icon option not showing?
    • I can't install FoxKit on March 2023
Powered by GitBook
On this page
  • How to create a Mega menu
  • Add a Menu to the theme
  • Customize the Mega menu
  • Add a top bar to the menu
  • Add a banner to the mega menu
  • Add a product list to the menu
  • Add blog post to the menu
  • Add collections to the menu
  • Add custom HTML to the menu
  1. Getting started

Mega menu

Learn how to add menus to build your store's navigation

PreviousIntegrate Shopify Review appsNextTheme license

Last updated 4 days ago

A mega menu is a drop-down menu in which the top-level item has two levels of nested drop-down menus.

A mega menu impacts how shoppers discover your product offerings and other information, which lets them browse easily and seamlessly. It is a perfect design choice when building a website with multiple categories and subcategories. The design also provides sufficient space for images (banners) and other rich content.

Different websites require different kinds of menus, depending on the size, nature, and objectives of your store.

How to create a Mega menu

1. Go to Shopify Content > Menus to create a menu.

2. Click Add menu to add new or choose any items below the menu to edit.

3. Write the menu's name, then choose Add menu item.

4. Write the menu item's name and choose the item in the dropdown box > click Add.

5. To add an item to a child menu, drag it under the main item.

Menu items can also be added to create the same level as a child menu.

If you want to create a mega menu, you need to add third-level items.

Add a Menu to the theme

1. Go to Themes > Customize

2. Click on the Header section > Menu to add the menu you have created.

The newly created menu is now shown on your storefront.

To enable the mega menu, in the Header section, click Add block > add any Mega menu block you want and fill in the exact menu item name.

Customize the Mega menu

Add a top bar to the menu

To achieve the result above, kindly follow the steps:

1. Go to Themes > Customize.

2. In the Header section, select Add block > choose Top bar.

3. Enable/ disable a divider, transparent effect, and addons by checking the boxes.

You can add a message or leave it blank if you do not want to show it.

Add a banner to the mega menu

To achieve the result above, kindly follow the steps:

1. Go to Themes > Customize.

2. In the Header section, Add block > choose Banner (Mega menu).

3. Match the text in For item element with the corresponding menu item you want to add a banner.

Select container wrapper width: use header' container, default, full width, or use container box.

4. In Settings, add an image and insert a link, title, subtitle and button label (optional).

Add a product list to the menu

To achieve the result above, kindly follow the steps:

1. Go to Themes > Customize.

2. In the Header section, Add block > Choose Product list (Mega menu).

3. Match the text in For item element with the corresponding menu item you want to add products list.

Select a collection for this section, set the number of products and columns to show.

Select container wrapper: use header' container, default, full width, and use container box.

Add blog post to the menu

To achieve the result above, kindly follow the steps:

1. Go to Themes > Customize.

2. In the Header section, Add block > Choose Blog posts (Mega menu).

3. Match the text in For item element with the corresponding menu item.

Select a Blog for this section and select container wrapper width: use header' container, default, full width, or use container box.

Add collections to the menu

To achieve the result above, kindly follow the steps:

1. Go to Themes > Customize.

2. In the Header section, Add block > Choose Collections (Mega menu).

3. Match the text in For item element with the corresponding menu item you want to display collections.

Select container wrapper width: use header' container, default, full width, or use container box.

4. In the Collections list, choose the collection and add its featured image.

Add custom HTML to the menu

1. Go to Themes > Customize.

2. In the Header section, Add block > Choose Custom HTML (Mega menu)

3. Match the text in For item element with the corresponding menu item you want to add custom HTML.

Select container wrapper width: use header' container, default, full width, or use container box.

🎁 ⚡
Install FoxTransfer Chrome Extension FREE here
Get Free plugin + 1-month Free Enterprise. Try now!