• Skip to main content
  • Skip to primary sidebar

How to Setup Navigation (Menu) in Shopify?

Reading Time: 4 mins. Posted on August 21, 2019 .

Navigation menu in Shopify varies with the theme. The selection of theme for the Shopify store should be based on how well they use the menu on mobile devices.

How to Setup Navigation (Menu) in Shopify?

Understanding the working of navigation menu in Shopify is essential to be able to get the customers to find products while browsing the store. The navigation menu remains the same, but each theme may use it differently or different devices. So it is essential to set up the navigation menu right once and for all. 

How to Set Header and Footer Navigation Menu in Shopify?

Click navigation under online store on the left panel. The navigation screen will appear. Here sellers can view and edit both header and footer menu items.

Setting navigation in shopify account

In the image above, I have already set both of them. The different store pages I created have pinned them in the footer menu.

Whereas, the main menu has four items viz Home, About Us, Products, and Contact.

How to Add/Edit Items in Main Menu (Header)?

Among the essential features of online store design, navigation is one of them. One must integrate categories or pages in the main menu, whereas less critical links into the store footer.

To add or edit items in the main menu aka header, click the add menu item. Instantly, a window will pop-up asking the seller to fill in the menu item details.

add menu item in header for shopify account

After inserting name and link click add button. Doing this will add a new page or item.

main header menu in shopify account

Additionally, I have created a nested menu to fit sub-categories under the main category. For example, Products >> Women’s Fashion >> Kurti & Dress Materials.

Sellers can create a drop-down menu by simply drag and drop method. Hold the item with small dots on the far left and drop it under the desired one.

How to Add/Edit Items in Footer Menu?

Footer menu in shopify account

Adding menu items in the footer works the same way as we discussed above for the header. Shopify offers an easy drag and drop interface to create intuitive menus.

One can apply changes using the edit buttons or delete an item using the bin button.

Preview

preview mode of shopify account

In the above image, the Navigation Menu for my Shopify store is visible. The nested items will show up once customer clicks on the plus sign. Hence, this is how one can add, edit, or delete menu items in the navigation.

Depending on the store theme the main menu is either visible as header menu, or an item list in the sidebar. The same is with the footer menu. It usually displays as items across the width of the footer.

How Does Navigation Change with Themes?

Setting up a menu isn’t difficult in Shopify, but one has to understand how the navigational menu can impact the Shopify store.

The Simple theme in Shopify has the main menu on the left side on the desktop. However, on mobile, it takes a considerate space in the header.

Simple theme mobile version

While browsing the store on a mobile device, the collapsed menu along with tagline covers a large part of the screen.

Supply, another Shopify theme displays the main menu horizontally on desktop.

supply shopify theme

Whereas, on the mobile device, the main menu collapses and shifts on the left. Besides, the cart button aligns with the collapsed main menu. Refer to the image below.

supply shopify theme mobile version

Slight better user experience.

But, when the main menu is open, it covers the whole screen.

Now, let us see a remarkable example of easy navigation using Porto Shopify theme.

The main menu is on the left side, just like our Simple theme.

porto multipurpose business and woocommerce theme

However, on the mobile screen, it becomes more enticing. The main menu collapses beside the logo. The menu, logo, search, and cart icons placed in a single line gives more space to content.

porto multipurpose business and woocommerce theme mobile version

Moreover, the main menu is like the Google Play App Store Menu sliding from the left.

collapsed menu on the left side of the porto theme

The navigational menu doesn’t hinder the view.

The bottom line is – choose navigation wisely that is not only responsive but also user-friendly.

You are Here: Home / eCommerce / Shopify / How to Setup Navigation (Menu) in Shopify?

About Shabbir Bhimani

Blogging Since 2009. If I can leave my high paying C# job in an MNC in the midst of global financial crisis of 2008, anybody can do it. @BizTips I guide programmers and developers to Start and Grow an Online Business. Read more about me here.

May I help You With ...

Upwork Proposal
Finding Clients
Start a Store
Start a Blog
 

Or Help Yourself ..

Primary Sidebar

About Shabbir Bhimani

Blogging Since 2009. If I can leave my high paying C# job in an MNC in the midst of global financial crisis of 2008, anybody can do it. @BizTips I guide programmers and developers to Start and Grow an Online Business.

Get in touch with me on LinkedIn or read more about me here.

Let me Guide You to Start and Grow your Online Business

Download my
FREE eBook NOW
to win more clients.
And it is not an annoying pop-up either

Additional menu

  • Twitter
  • Linkedin

BizTips

Shabbir Bhimani: Start and Grow an Online Business

  • Freelancers Start Here
  • Start An eCommerce Store
  • Start A Blog
  • About
  • Archive
  • Disclaimer
  • Contact
  • Glossary

2009 - 2023 All my content & images are licensed as Creative Commons.

WebTurtles LLP. LLPIN: AAL-5288. Hosted with Linode.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Cookie settingsACCEPT
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
SAVE & ACCEPT