Here we'll cover the fundamentals of building custom and mobile-responsive navigation for your Shopify store. This includes creating headers and footers, adding navigation elements like dropdowns, and customizing them to fit your store’s needs.
Access the Navigation Layout Type
Go to the Layout panel in your Shopify editor.
You’ll see a new layout type called Navigations.
Here, you can create either a Header or a Footer. For this tutorial, we’ll focus on creating a Header, but the process for both is the same.
Use Navigation Elements
In the Insert panel, look for a new group of elements called Navigation.
This group contains everything you need to build navigation from scratch:
Basic Navigation bar
Dropdown Element
Card Button
Country Select
Language Select
Getting started with a Template (Optional)
If you prefer a quicker start, head over to the Template Library.
In the Templates section, find a variety of pre-made navigation templates for both headers and footers.
For example, choose the Mega Menu for Nutrition and Food template.
After selecting it, you’ll notice the layout panel now shows a new header layout.
You can fully customize this template—change the text, reorder elements, upload logos, or adjust calls-to-action (CTAs).
Dropdown Customization: You can add, delete, or change the dropdown content, including adding videos or other elements.
Build a navigation header from scratch
Start with a base row that has three columns:
Left: For the logo.
Center: For dropdowns and text.
Right: For ecommerce-related elements like the cart counter or language select.
Add a Dropdown:
Under the Navigation Elements, drag the Dropdown Element into the right place.
You'll see a default dropdown with hover effects, which is functional right away.
Customize Dropdown:
The dropdown consists of two parts: the Trigger (the text and icon that trigger the dropdown) and the Dropdown (which holds the content like columns and text).
In the Interactions panel, you can set the trigger to open on hover or click.
Dropdown Styling:
Under Dropdown, you can customize the following:
Anchor: Choose where the dropdown will open (below, above, left, or right of the trigger).
Align: Align the dropdown to the left, center, or right of the trigger.
Offset: Adjust the space between the trigger and the dropdown.
Width: Set the dropdown’s width relative to the parent layer that contains the dropdown element (e.g., 100%).
Creating a Mega Menu (Optional)
To create a Mega Menu, drag the dropdown outside its current column and into the base row (this allows it to span the full width of the screen).
Once in the base row, you can add more content, such as text, images, or videos, and adjust it as needed.
Change Layout: You can make the dropdown’s direction horizontal or vertical by changing the layout settings in the dropdown container.
Add More Dropdown Elements
Duplicate the dropdown container to create multiple dropdowns (e.g., one for men’s products and another for women’s products).
Rename Layers: To keep things organized, rename the dropdown containers in the Layers panel (e.g., Dropdown Men, Dropdown Women).
Set Interactions: Assign actions to each dropdown trigger, ensuring the right dropdown is triggered when clicked or hovered.
Link Elements in the Navigation
To make the navigation functional, select a text element or a column and add a Go to Link action in the Interactions panel.
Paste the URL you want to link to and choose whether the link should open in a new tab or the same tab.
Logo Link: Don’t forget to add a Go to Link action to your logo so that it links back to your homepage.
Cart button & counter
Drag the Cart Button into your canvas. It displays the cart icon and the item count.
You can modify the icon, count display, and other styling settings.
Under the Interactions tab, you can customize the Cart button actions, by default it redirect to the cart page.
Country Select
Drag the Country Select element next to the cart button.
This element allows users to choose their country and currency. You can modify the country names and currency symbols.
The countries and currencies available are based on the markets you’ve set in Shopify (e.g., US, Netherlands).
Language select
Add the Language Select element next to the country select.
This lets users switch languages, based on the languages set in Shopify.
Final Steps: Review and Publish Once your navigation is built and customized, preview it to ensure everything works as expected. Then, when you're satisfied, you can publish your changes to your Shopify store.
By following these steps, you'll be able to create a fully functional and customizable navigation menu for your Shopify store, whether you start from scratch or use a template!