Description:

The Web Header: Mega Menu component brings a responsive desktop header to your project. It pulls in your Shopify main-menu structure using the menu handle and is a true representation of your store’s live data.

Desktop

• L1 collections are shown in the main header, while hovering an L1 link opens a mega menu overlay—displaying the related L2 and L3 links. 
• Each nav link in the desktop mega menu links to a product listing page (PLP). 

Mobile 

• Mobile is handled via a hamburger menu icon that opens a mobile nav menu.
• Categories drill down to nested collections and then link to a PLP with the additional link option to shop all for an L1 or L2 link.

The menu requires two components to work. The Web Header Component which displays as a page’s primary navigation and the Mega Menu Modal which acts as the overlay for nested layers of navigation.

Shopify Prerequisites

• The carousel pulls its sub-collections from a Shopify menu. You’ll need to configure a menu specifically for your carousel within Shopify.   
• • Go to Content → Navigation 
  • Click Add menu
  • Add your relevant collections as menu items
  • • L2 menu items must be nested under an L1 menu items for this collection to work
    • After saving, note the menu handle
    • • It appears just below the menu title once saved

Shipcode Configuration

• Adding your components
• • Go to the Libraries tab in the components panel
  • Drag in Web Header Component on to one layout
  • Drag the Mega Menu Modal component into a new layout that is horizontal in size
• Setting your menu handles
• • In the layout structure, navigate to “Mega Menu” component layer 
  • Navigate to the “Interactions” panel in the right sidebar
  • Locate the “Menu Handle” field
  • Replace the default main-menu handle with your Shopify menu handle
  • Repeat this process with the “Mega Menu Modal”
• Linking your components
• • Select the layout that contains the “Mega Menu Modal” component in the Structure panel
  • • Right click and select “Copy ID”
  • Navigate back to the layout that has your “Web Header” component
  • • Select the L1 Collection Menu layer
    • Navigate to the Interactions panel
    • Locate the “Layout ID” field
    • Paste the layout ID
• Previewing/styling the data
• • Remember, this is a simulation of your menu  experience so that it can be styled. To preview and style additional levels of navigation:
  • • In the layout structure, navigate to “Mega Menu Modal” layer 
    • Navigate to the “Interactions” panel in the right sidebar
    • Locate the “Simulate Menu Item Number” field
    • Enter a level of navigation to preview and style specific menu groupings (0 = first item, 1 = second, etc.)