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.
Connect your main menu
By default, a menu will be automatically connected 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.
Add a mega navigation menu
A dropdown is needed to create a mega navigation menu, so confirm you have created a dropdown.
Click the toggle beside Header to reveal the preloaded Mega nav block.
To identify which menu item the mega navigation will stem from, enter the item name in the Mega navigation trigger field.
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.
Minimum width for image sizing
The width for the images included here reflects the length of the menu items. If you need the images to be uniform in width, use the Promo area minimum 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.
The width of the promotional block column(s) can also 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.