We have already created the main navigation section of your store. All you will need to do is populate each of the menus with the main navigation area (mega and dropdown) with your own menus, collections or links.
Please do not edit or remove the menu start or end wrapper as this will break your navigation menu.
Add A Dropdown Menu
Access your theme customizer from your Shopify Dashboard:
- Click Sales Channels
- Click Online Store
- Click Themes
- Click Customize (black button on the right hand side of the screen)
Once inside the customizer:
- Click the Header Lower Navbar Dropdown (menu options will appear)
- Scroll down to Menu Item Details
- Rename Menu Item Name (custom link only)
- Click on one of the dropdowns menus provided
- Click in the box Menu Item URL
- Choose a menu link from the options provided if you want this to link to a page, or collection etc.
- Enter # and save if you wish this to be a custom link (doesn’t link anywhere)
- Underneath Dropdown Menu to Use, click Select menu to use.
- If you do not have an existing navigation menu to choose from, you will need to Create new menu using Shopify’s standard navigation feature.
https://help.shopify.com/en/manual/online-store/menus-and-links/editing-menus
Adding a Mega Menu #
Access Navigation from your Shopify Dashboard:
- Click Sales Channels
- Click Online Store
- Click Navigation
- Click Add Menu (right hand side of your page)
- Name your Mega Menu (this will appear in your navigation bar)
- Click + Add menu item (you can add up to 4 menu items – these will be your main headers in your mega menu)
- Select a collection or page
- Add other items as required
- Drag menu items to the right to nest under main mega menu headings by clicking and holding the 6 dots on the left of the menu item name and dragging them to the right to create sub level mega menus
Return to the theme customizer:
- Click Sales Channels
- Click Online Store
- Click Themes
- Click Customize (black button on the right hand side of the screen)
- Click the Header Lower Navbar dropdown
- Click on Mega Menu
- Scroll down to Choose a menu under Menu Settings
- Select newly created mega menu from select menu options
- Click Save
Adding An Image To Your Mega Menu #
If you wish to add an image to the left or right of your mega menu you can do so easily:
- Click on the mega menu title in under the Header Lower Navbar Dropdown
- Scroll down to either Left Banner or Right Banner
- Click Select image
- Select image from Store library or Upload image
- Click Save
There is no right or wrong image size here but the image depth should be as deep as the menu structure.
Adding a Label To Your Navigation Titles #
You can add menu title labels in your main navigation if you wish to do so:
- Click on the mega menu title in under the Header Lower Navbar Dropdown that you wish to label
- Scroll down to Label text
- Enter text required e.g. SALE, HOT, TOP PICK, FEATURED
- Click Save
The label color can also be edited by changing the colour from within the same section at the top of the page under:
> Colours > Label Background
To add another menu in the main navigation is simple:
- Click Header – Lower Navbar
- Click + Add block
- Choose a Mega Menu or Dropdown Menu
- Drag either to the required order – somewhere in between the Start Wrapper and End Wrapper
- Repeat mega menu or dropdown steps above
- Click Save