Create a Custom Navigation on Shopify

A clear and intuitive navigation menu helps customers find what they need faster, which improves the browsing experience and boosts conversions.

In Shopify, the navigation bar (often located in your store’s header) is built using menus you create in the admin. If you nest menu items under a parent item, they will appear as a dropdown menu in your navigation bar (if supported by your theme).

Create Menu items in Shopify

• Go to your Shopify admin account > Content > Menus > Main me

• Enter the menu name in the name box (i.e., “test main menu”)
• Hit Add menu items in the Menu Items box to add items that display in the navigation menu.

• Enter the label for the item, and choose the destination page from the dropdown under the Link box.

• Click the “tick” icon next to the Link box to save the item, and continue adding others. 
• When you’re done, hit the Save button to save your changes.

You can edit the existing items by hovering over the item and clicking Edit beside the item or hitting the trash icon to delete it. Also, click and drag the ⠿ handle icon beside each item to change its position.

Display the Menu on your storefront

To show your menu on your live store, assign it to your theme’s header or footer:

• Go to Online Store > Themes > click Customize on your active theme.

• In the theme editor, select the Header or Footer section.
• Find the Menu setting and select the desired menu from the dropdown.

• Click Save in the upper right corner.

Can I Use GemPages to Create a Navigation Menu?

GemPages doesn’t currently support building a full navigation menu directly in the Editor. Text and button elements can only scroll to sections within the same page, not link to other pages in your store.

However, you can still display your Shopify navigation menu (including dropdowns) on any GemPages-built page, as long as the Shopify header is enabled.

Follow these steps to show the navigation bar on a GemPages page:

• Access the GemPages app in your Shopify and open the page in the GemPages Editor.
• Click on the Settings tab at the upper right corner of the top bar.

• Toggle on the option to show Shopify theme Header & Footer, then hit Apply Settings.

• Save and publish your page.

Best practices for navigation customization

• Limit top-level items to 5–7 to avoid clutter.
• Use dropdowns to group related content (e.g., product categories).
• Double-check that all links work and lead to active pages.
• Use simple and clear labels like “Shop All”, “About Us”, or “Track Order.”