How do I set up Atlantic’s mega-navigation?

Our Shopify theme Atlantic includes a special feature called Mega-navigation. It allows you to add up to three columns of links to any pages, collections, or products you want. Using this feature can improve user experience and help your customers find products faster.

Before setting up Atlantic's mega-navigation, consider how customers might browse your store and how certain categories might be more harmful than helpful. If you need some help, we recommend An E-Commerce Study: Guidelines For Better Navigation And Categories, a fantastic article from Smashing Magazine.

Once you're logged in as your Shopify admin, we can start setting up mega-navigation.

Enable mega-navigation in your theme settings

The mega-navigation settings are found in Atlantic's theme settings under the heading Mega-navigation. There are a lot of theme settings in Atlantic, so if you are having trouble finding them, you can press ⌘+F (or CTRL+F for Windows and Linux users) and type "mega-navigation" into the search box that appears. You won't need all of these settings just yet, but you should click the Enable the mega-navigation checkbox now so you can preview your work as you build it.

Create a Catalog link in your main menu for your mega-navigation

In your admin sidebar, click on the Navigation menu and view your link lists.

In your Main Menu link list, you will need to create a new link called Catalog that will function as the entrance to your mega-navigation menu.

You can change the the name of this link later, but when setting up mega-navigation for the first time it must be called Catalog.

Click Edit Link list to add the link. You can drag and drop the main menu links in any order you want. Just make sure that your Catalog links to a Web Address. We recommend that you link to

/collections/all

but you can link to any page you want and the mega-navigation will still work.

Just remember that if a customer clicks on your Catalog link rather than following the mega-navigation that appears on hover, they will be directed to the page that you link to.

Creating your mega-navigational items

Now that you have a Catalog link, you need to create the links that will appear in the mega-navigation. You can have up to three columns appear at once, and each one will require its own link list. You can create these lists in the Navigation area by clicking Add a link list. Your new list name can be anything you want. The list's handle will be generated automatically based on its name.

The same way that you added the Catalog link, you can now add links that will be displayed in your mega-navigation. Give each of your links a good name, and make sure that they link to the content you want them to. You can choose from collections, product pages, blog posts, and even external web addresses. Just remember not to confuse your customers.

Do this with up to three lists, and each one can be displayed in your mega-navigation as its own column.

Change your mega-navigation settings

After you've set up all of the lists you want to appear in your mega-navigation, go back to your theme settings and find the Mega-navigation section. In order to make your newly created lists appear, you will have to assign them to Column 1, Column 2, and Column 3.

What do all of the mega-navigation settings do?

Here is a list of all of the mega-navigation options and a brief explanation of how they function.

  • Enable the mega=navigation: Enable or disable the mega-navigation entirely.
  • Override "Catalog" label: Change the text in the main menu that takes users to the mega-navigation menu.
  • Top level columns layout: Toggle whether the items in Column 1, Column 2, and Column 3 appear in one column or two columns of their own.
  • Trunicate list after how many items?: Choose a maximum number of items Column 1, Column 2, and Column 3 before a "More…" link that leads to a a sub-navigation menu with all of the links.
  • Column 1: Choose the first link list to display in your mega-navigation.
  • Column 2: Choose the second link list to display in your mega-navigation.
  • Column 3: Choose the third link list to display in your mega-navigation.

Still having trouble?

If this article didn't answer your question or you need some extra information. Don't hesitate to contact our customer support.