Navigation refers to the links used by customers to move from one page to the next. Since storefront URLs are largely managed by the Shopify platform, most of the navigation setup takes place in the Shopify admin.
Mega navigation (also known as a 'mega-menu' or 'mega-nav') refers to the multi-column, wide dropdown that contains many navigation links—and in Pacific's case, optional images and messaging.
Use the Navigation portion of your Online Store to manage menus and build a mega navigation menu.
Use the theme editor to set the header menu, connect the mega navigation, and add promotional blocks.
Prepared menus and adding new menus
When Pacific is first added to your store, a menu will be automatically added to the Header settings. To replace this menu, select Change and choose from the menus displayed.
You can also Remove the menu feature by selecting that option.
By default, the Main menu and Footer menu are here, but these can be modified or removed.
Add a mega navigation menu
Navigation admin setup
Before enabling and configuring the Mega navigation in the theme editor, the frame of this menu type must be constructed in the Navigation admin.
This mega navigation structure requires that each 2nd-tier item nested in the menu be paired with at least one 3rd-tier item. For more information on this setup, take a look at the mega navigation portion of this article: What nested navigation means for your Shopify store
Connect the mega navigation through the theme editor
With this menu structure in place, return to the theme editor and open the Header section. Scroll down to the Mega navigation portion of these settings and select Add mega nav.
To identify which menu item the mega navigation will stem from, enter the item name in the Mega navigation trigger field. In the Pacific Cool Demo, for example, the 'Shop' menu item has been added to this field to connect the mega navigation to that menu item.
Display images for included collections
If collections are included among these menu items, you can enable Show images for top level collections. This setting draws in the Collection image (assigned in the Collections admin) to display in the Mega navigation.
The appearance of these images can be fine-tuned through the Image aspect ratio selector. This select this dropdown to view the following options:
Uncropped:
- Natural (original image proportions)
- Short (4:3)
- Square (1:1)
- Tall (2:3)
Cropped:
- Short (4:3)
- Square (1:1)
- Tall (2:3)
Using an Uncropped setting will generate white space around the image to create a uniform grid without cropping your image. The background in the editor indicates the applied white space, but will not appear on your storefront.
You can see how it will appear by selecting the Theme actions button on the bottom left corner, then clicking Preview theme.
Minimum width for image sizing
The width for the images included here reflect the length of the menu items. If you need the images to be uniform in width, use the Promo area minumum width to increase the text space and image width together.
Add promotional blocks
Mega navigation menus occupy a substantial area of the browser window when activated, so consider adding a Promotional block to highlight something special.
There are two options for Position: Last column or First column. You can configure the promotion block to appear to the right side of the menu (Last column) or the left side (First column).
By default, the promo block will be limited to a single column, but this can be expanded using the Promo block columns selector. Use this to feature up to 3 columns of promotional content.
There will be placeholder content here by default, but you can scroll down to the Promo blocks to add your own image(s) and text before configuring these settings.
Just as the width of the menu items can be customized, the width of the promotional block column(s) can be controlled using the Promo area minimum width selector.
Just like the collection images, the appearance of the promotional block images can be fine-tuned through the Image aspect ratio selector. This select this dropdown to view the following options:
Uncropped:
- Natural (original image proportions)
- Short (4:3)
- Square (1:1)
- Tall (2:3)
Cropped:
- Short (4:3)
- Square (1:1)
- Tall (2:3)
Using an Uncropped setting will generate white space around the image to create a uniform grid without cropping your image. The background in the editor indicates the applied white space, but will not appear on your storefront.
How the text content and image are positioned can be customized using the Promo text layout to select one of the following options:
- Above left
- Above center
- Above right
- Below left
- Below center
- Below right
The Overlay feature offers an alternative approach for displaying text with your image. When enabled, this combines the image and text and adds a semi-transparent color overlay to contrast.
Select Show overlay to enable, then choose how the text is positioned and aligned by using the Overlay text layout selector.
You can also customize the Color by clicking on the black rectangle, then the Opacity by selecting the slider below it. The Text color can be customized here, too.
Promo blocks
Upload an image or select one from your library to feature in the promo block. Then add copy for the Heading and Text fields, and add a Link for the block to direct customers to the relevant page.
Repeat for up to three promo blocks.