Skip to content
English - United States
  • There are no suggestions because the search field is empty.

Site Designer : Mega Menu Block

Site Designer : Mega Menu Block

The Mega Menu block provides additional customization options compared to the standard "Additional Nav Menu" block. This article will show you how to add the Mega Menu block , and how to configure it within Site Designer, so you can provide your shoppers with a beautiful looking Navigation menu so they can find those products easily!��

Adding the Mega Menu Block Within Site Designer:

1. Log into your Admin Dashboard, and hover over the 'Design' menu and then click Site Designer.�

2. Hover your cursor over your current navigation menu and click the purple 'plus' button to add a new block.


image.png




3. On the left there will be a search bar where you can search for various blocks,� type "Mega Menu" and you will see a block called� 'Mega Menu Header'. Click the blue 'Add Block' button to start customizing!�


image.png



4. Within the Site Designer screen, you'll notice that the Mega Menu includes a 'Top Section' which you can customize further or choose to disable entirely if you like.�

image.png




5. Like many of the Site Designer Blocks, there is array of various customizations you can make on the left side. Customize these and design the mega menu for your store.�




Configuring Your Mega Menu Dropdown:

Important: You must configure the 'Setup Mega Menu' section so that you can specify which categories in your navigation menu will display the Mega Menu Drop down. By default the menu items will not display the mega menu drop down.��

In the Screenshot below, lets assume we want the 'Men's Shoes' category to have the mega menu drop down, but we would like the other categories to remain on the original 'list of sub-categories' drop down.�

1. We will want to click the 'Setup Mega Menu' setting on the left to drop down it's settings, and we will want to click the blue 'Add' button next to 'Add Mega Menu'.�

image.png



2. You'll notice after you clicked 'add' it provided 'item 1' underneath it. Click on Item 1 and it will allow you to specify which category we want to have a Mega Menu drop down by typing in the name of the category in the 'Menu Item Name to apply mega menu to' field. Make sure to include any punctuation marks and to use exact spelling.��


image.png




3. Repeat this process for every category that you would like to provide the Mega Menu drop down. You can do all of your category menu items or just certain category menu items.�


4. Once you have finished with all of your customizations and adding the Mega Menu items, click the 'Done' button at the bottom of the block settings menu.�




image.png



5. If you would like to delete your original menu block, which is called the 'Additional Nav Menu', you can do so by clicking on the original navigation menu within Site Designer, which will open the Block settings for the Additional Nav Menu, and then click the 'trash' can button in the Block Menu Settings to remove it.

image.png



6. Click the Preview Button in Site Designer to see how the new Mega Menu looks before publishing. In the example below the 'Men's Shoes' Category is being hovered over and displaying the Mega Menu Drop down with the additional content.



image.png



7. Once you have finished designing your Mega Menu, click "Publish' so that the changes appear on your live site!��