Mega Menu Images
Broadcast includes a feature to to add custom images with links to your existing Shopify Navigation menus.
Example with one image and nested menu items under Shop:
Example with two images under Body which has no other menu items, simply image button links to collections:
Example with three images under Jewelry and no additional menu items (maximum of four images):
How to setup:
Let's first look at how to add one image to an existing top-level navigation item like Shop which already has nested menus created. In this example, we have a three-level nested menu which automatically creates a mega menu in Broadcast. The first level or top level is "Shop", the second level has "Earrings", "Necklaces" and "Rings". The second level menus become your column headings. Finally, the third level menu items are displayed in each column they are nested under.
Here's a breakdown of all three levels in our example mega menu:
In our Shopify navigation editor, the nested menus look like this:
Example: Before adding mega menu image:
In the Theme Editor (Customize theme), choose the Header section settings:
Towards the bottom under Navigation, you'll find a section for content:
Choose Add mega menu.
The Submenu item is the key to setting up which top-level menu the image or images are displayed in. This must match your top-level navigation menu name. In our example, the name is Shop. Tip: Both Shop or shop are both acceptable, as long as it matches your top-level menu item name.
Example (Shop):
Then add the Button label and Link which are both required. The Heading is optional, we've included a heading in this version.
Save your changes:
Next, let's explore a different style menu which doesn't have any menu items. This is a top-level menu in your Shopify navigation that does not have any menu items nested. The result is this style, mega menu images with buttons only:
To achieve this style menu, we start with a top-level navigation menu that has no menu items nested within. Example:
Note: The other top-level menus can have nested menus, our example just happens to have no nested menu items.
Check: Make sure Jewelry has no nested items as we are going to build an image and button only version.
In the Theme Editor, Header section settings, add a content block and configure the Submenu item to match your top-level menu item "Jewelry":
Next, add your first image and button information.
Tip: Leave the heading blank to only display a button with button label:
Add the second image and button label/link, repeat for the third image:
Once completed, save your settings:
The new Jewelry mega menu will look like this:
Final tip: Improve mobile experience
On a mobile device there are two different touch points for Jewelry:
If the customer taps on the word Jewelry (1), they will be directed to the destination of that link. They won't see the drop-down mega menu options. Choosing the down-arrow (2) will expand the menu and display the mega menu options.
Some stores might want tapping on (1) Jewelry to expand and open the mega menu. To achieve that, there is a trick you can use:
In the Shopify navigation editor, remove the current link for Jewelry:
Next, for the Link, enter a hashtag "#" (without quotes):
(1) Enter # in the Link
(2) When the No Results pop-up appears, choose the highlighted option on top to accept
(3) Make sure the Link has the hashtag/hashmark, then Apply changes:
Now, when a mobile user taps on Jewelry or the right-side arrow, the mega menu will expand and show the image with buttons menu items:
