Koto Documentation
  • Webibazaar Support
  • Koto Shopify
  • Header
    • Announcement bar
    • Header section
    • Mega menu
    • Collection icons
    • Secondary menu
  • Overlay Group
    • Newsletter Popup
    • Promotional Popup
  • Sections
    • Slideshow
    • Promotion card
    • Gallery with text overlay
    • Featured collection
    • Image with text
    • Rich text
    • Logo list
    • Featured product
    • Multiple video with products
    • Blog posts
    • Social media
    • Text with icons
    • Map
    • Collection list
    • Multicolumn
    • Collapsible content with image
    • Newsletter
    • Contact form
    • Video
    • Notice
    • Scrolling promotion
    • Single banner
    • Promotion code
    • Category products
    • Testimonial
  • Footer
  • Theme Settings
    • Logo
    • Colors
    • Typography
    • Layout
    • Advanced
    • Sticky bottom bar
    • Inputs and buttons
    • Carousels
    • Corner radius
    • Product cards
    • Badges
    • Social media
    • Search
    • Currency format
    • Cart
    • Custom CSS
  • Product page
    • Quick order list
  • Collection Page
    • Collection banner
  • Color swatches
  • Page
    • How to create page template?
  • Languages and Currency
  • Additional Settings
  • Combine listing
  • Dynamic source of color swatch variant image
  • how can reset all the changes I made?
  • Turning your website layout from right to left
  • Use of 'Translate & Adapt' App
  • Continue selling when out of stock
  • Collection filter color swatch from metaobject
  • Quick Links
  • Change Log
    • Version 1.0.3
    • Version 1.0.2
    • Version 1.0.1
    • Version 1.0.0
  • Importing our demos
Powered by GitBook
On this page
  • Mega menu with products
  • Mega menu with banner
  • Mega menu collection with info
  • Mega menu with tab collections
  • Highlighted link
  • Secondary menu
  • Click "Add section" and use some sections.
  1. Header

Mega menu

PreviousHeader sectionNextCollection icons

Last updated 3 months ago

Shopify allows you to nest menus and menu items in the Online Store Navigation Editor. You can build dropdown menus by creating or moving menu items so that they are “Nested” below a top-level item. Follow these steps to add Navigation:

  • From your Shopify admin, go to Online Store > Content > Menus > Create menu.

  • Click the name of your Main menu.

  • Choose one of the menu items to be the header for your dropdown menu, or add a new menu item to be the header. If you don't want the header to link to anything, then you can enter '#' in the Link field when you add the menu item.

  • Add menu items to include in the new dropdown menu. Click Add menu item enter the name of the menu item, and enter or select a destination for the link.

  • Click and drag the menu items to nest below the header item.

  • Click the Save menu.

There are multiple types of Mega menus you can add to your store

  1. Select the Header from the theme editor.

  2. Click on "Add block.", user can create three types of blocks: Mega menu products, Mega menu submenu/gallery, Mega menu blog, Secondary menu.

Mega menu with products

Click on "Add block" and add the Menu with products block.

Mega menu with the product allows you to add products with a submenu. Please follow the screenshot.

Typing the same menu name in the Menu label will connect this menu to the Mega menu that is built through the theme editor. Check the below screenshot.

Mega menu with banner

Click on "Add block" and add the Menu with banner block.

This Mega menu allows you to add banner. Please follow the below screenshot.

Mega menu collection with info

Click on "Add block" and add the Menu with collections block.

This Mega menu allows you to add collections. Please follow the below screenshot.

Mega menu with tab collections

Click on "Add block" and add the Mega menu with tab collections block.

This Mega menu allows you to add tab-collections. Please follow the below screenshot.

Highlighted link

Click on "Add block" and add the Highlighted link block.

This Mega menu block allows you to highlight main menu link. Please follow the below screenshot.

Secondary menu

Click on "Add block" and add the Secondary menu block.

Click "Add section" and use some sections.

We are providing one special feature, You can add multiple additional sections in the header.

Live Chat Support | Webibazaar Template
Logo