Opulent - OS2.0
  • What is Opulent theme?
  • Support Policy
  • Getting Started
    • Install Opulent Theme
  • Add Custom code/CSS correctly
  • Integrate Shopify Review apps
  • Mega Menu
  • Update Opulent theme
  • GLOBAL SECTION
    • Announcement Bar
  • Age verifier pop-up
  • Header
  • Footer
  • Mobile sticky bar
  • Scaling logo
  • THEME SECTIONS
    • Before/ After image slider
  • Blog Posts
  • Countdown timer
  • Custom content
  • THEME SETTINGS
    • General settings
  • Advanced
  • Animations
  • Badges
  • Article Card
  • Cart settings
  • Checkout
  • Color & Color schemes
  • Currency format
  • Drawer & pop-up
  • GDPR settings
  • Integrated apps
  • Integration
  • Product card
  • Product inventory
  • Product options desgin
  • Production option swatches
  • Social sharing
  • Search
  • Section
  • Typography
  • COLLECTIONS & PRODUCTS
    • Product page
      • Custom product templates
      • Product template
      • Page sections
        • Breadcrumb
        • Product information
        • Product information tabs
        • Product recommendations
  • Product description
  • Collection page
    • Collection template
    • Collection sections
  • OTHER PAGES
    • 404 page
    • Blogs
    • Cart & Checkout
    • Password
  • ❓FAQs
    • Add a gift wrap option to my cart
    • Add custom badges to my product card
    • Add recipient fields to my gift card product
    • Add/ Remove Social icons in footer
    • Customize search results
    • Hide sections on mobile/ desktop view
    • Install demos
    • Remove the tax-included information in product page
    • Set up Filters for the collection pages
    • Set up local pickup
    • Why did I check the show account icon option but don’t see it appear?
Powered by GitBook
On this page
  • 1. How to create a Mega menu
  • Add a Menu to theme
  • Add a top bar to the menu
  • Add a banner to the mega menu

Mega Menu

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

PreviousIntegrate Shopify Review appsNextUpdate Opulent theme

Last updated 1 year ago

"A mega menu is an expansive dropdown menu featuring multiple levels of nested items, typically starting from a top-level category.

Implementing a mega menu enhances the browsing experience for shoppers by facilitating easy navigation through your product offerings and additional information. It's an ideal design solution, especially for websites with numerous categories and subcategories. Additionally, its design allows ample space for incorporating images (banners) and other engaging content.

Given the unique characteristics and goals of individual stores, the type of menu required may vary based on factors such as store size, nature of products, and business objectives."

1. How to create a Mega menu

1. Go to Shopify Navigation 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 theme

1. Go to Themes > Customize

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

To activate the mega menu, navigate to the Header section, then select "Add block" > choose the desired Mega menu block, and enter the precise menu item name.

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.

  1. Toggle the divider, transparent effect, and addons by checking or unchecking the respective boxes.

You can input a message or leave it empty if you prefer not to display one.

Add a banner to the mega menu

To achieve the aforementioned outcome, please follow these steps:

  1. Navigate to Themes > Customize.

  2. Within the Header section, select Add block > opt for 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).

The newly created menu is now shown on your storefront.