The header often serves as a table of contents for the storefront, featuring key navigation links set up in the Navigation settings of the Shopify admin.
Select a Menu
By default, the theme will include your Main menu. To switch to another menu, click Change.
Menu position (Basic header)
If you're using the Basic header layout (Theme settings > Layout), choose an option for the Navigation layout portion. Display the menu items aligned horizontally with the logo (Inside header) or below the logo (Below header).
Add Dropdowns
Check out Shopify's guide for setting up drop-down menus.
Add a Mega Navigation Menu
Click the toggle beside Header to reveal the blocks. Click the preloaded Mega navigation block to set up a mega navigation menu. This task requires at least one dropdown menu, so create one in the Navigation admin if absent.
Connect a menu item
The menu item you'd like the mega navigation to stem from is assigned in the Mega navigation trigger. For example, to connect with the 'Catalog' menu item, enter Catalog in the Mega navigation trigger.
Add image
The mega navigation also includes promotional Custom image blocks to highlight certain sales.
Click Select Image, then add the desired Text and Link.
Position
Using the Position dropdown, specify how this custom image will display with your mega navigation links. There are two options, positioning the Custom image before or after the menu columns:
- First column
- Last column
Size
Customize the Size of the Custom image block by using the dropdown. There are three options:
- Small
- Medium
- Large
Add a Small Promo
Include a Small promo for your header to promote a particular perk, offer, etc. for your store.
Heading
Start by adding a Heading using the provided field.
Text
Use the Text field to add the message’s text. The text will show in both desktop and mobile, but the mobile text can be modified separately using the Text (mobile) field.
Link
You can direct your customers to a relevant page by using the Link field.
Icon
Pair this promo with an Icon by using the dropdown, or an Image by clicking Select image.
The following icons are available:
- No icon [default]
- Cell phone
- Chat
- Chat alternate
- Credit card
- Delivery
- Delivery alternate
- Envelope
- Gift card
- Heart
- Label tag
- Lock
- People
- People alternate
- Pin
- Question mark
- Smile
- Store
- Transfer
- Wallet
Align or contrast with your color scheme by specifying the Text color and Icon color.