How To Add Shopify Sidebar Menu? (For All Theme)

The Shopify sidebar menu can be a game changer by providing a clear and concise summary of your categories, collections, and other essential pages. But how can you add this valuable thing to your website?

Don't worry; this detailed tutorial will provide two ways to add a vertical navigation menu to your Shopify store.

What Is A Sidebar Menu In Shopify?

Concept Formation's sidebar menu.

In Shopify, a sidebar menu is a vertical navigation component on the left or right of your online shop's pages. It functions as a UI tool to facilitate simple browsing and selecting items of interest to consumers.

However, not every Shopify theme has a sidebar menu option. To choose a theme that supports vertical menus, scroll down to the "Which Shopify themes have a sidebar menu" section.

How To Add A Sidebar Menu In Your Shopify?

Here, we'll explore two effective methods:

• Option 1: Many Shopify themes offer built-in sidebar menus as part of their design. Store owners experienced with basic themes will find this method fast and easy.
• Option 2: For greater flexibility and control over your sidebar menu, consider using a page builder app like EComposer. This approach lets you alter the menu in the page editor, expanding design options.

Let's look at both of them right away:

Option 1: Using A Theme With A Built-In Sidebar Menu

NOTE: Only themes with built-in sidebar menus can do this. Please refer to the second option below if your theme does not support sidebar menus.

Here is how to use the built-in sidebar menu well:

Step 1: Head to the "Online Store" section on your Shopify admin sidebar. This will display your current online theme and theme library.

Locate your active theme and click the "Customize" button. This opens the theme editor, where you'll modify your store's appearance and functionality.

Step 2: You'll see various theme sections within the theme editor.

Next, click on your "Header" in your template. An edit menu will then appear on the left or right.

Now, look for settings related to "Desktop menu type." Choose the "Drawer" layout to display the sidebar menu options if available.

Step 3: Make sure you save your changes after completing them. Before you put your new sidebar menu on your store, many themes let you see what it will look like by giving you a preview.

Option 2: Add Sidebar Menu With EComposer Page Builder 

Are you confused by customization theme options? Try the EComposer Shopify Page Builder, which makes it easy to create and change pages on your Shopify store. With its simple drag-and-drop interface and real-time preview, you can add a sidebar menu or anything else to your store in minutes.

Here's a step-by-step guide:

Step 1: Get the highly-rated EComposer Page Builder Builder app from the Shopify App Store. It has 5/5 ⭐.

Step 2: After setting it up, go to your Shopify homepage and click "Start building" in the upper right corner.

Choose which page you want to change (Homepage, Product page, etc.) and then pick a template from EComposer's large library.

In this case, we'll pick the "Homepage" page.

Step 3: Navigate to the "Elements" tab on the editing menu on the right.

Next, use the search bar to find the "Menu" element of the "Shopify" section.

Then, drag and drop the "Menu" element to where you want it on the page (in our case, at the top of the home page).

Step 4: There will be a "Menu Editor" window.

To show the menu as a sidebar, select "Vertical" from the "Menu Layout" drop-down menu. That is! You did a great job adding a sidebar menu that works.

Also, you can change how the left menu looks in EComposer. To make the colors, fonts, link icons, and other things fit your store's style, go to the "Design" tab (the drawing board icon).

Step 5: Once you're happy with your creation, click "Publish" to make it live on your store. Alternatively, you can save the draft for further editing.

Which Shopify Themes Have A Sidebar Menu?

The good news is that many popular themes come with sidebar menus, so you can use this helpful navigation tool even if you don't know the code. We'll look at some popular Shopify themes with built-in sidebar choices to help you find the right one.

Free Shopify Themes

Ready to streamline your store's navigation without breaking the bank? The Shopify theme store has everything you need. Built-in sidebar menus are a great way to do this.

1. Head over to the Shopify Theme Store.
2. Simply type "Sidebar Menu" into the search bar to filter themes that offer this functionality.
3. For budget-conscious entrepreneurs, select the "Free" filter to narrow your search to free Shopify themes featuring built-in sidebar menus.

In this list below, we've selected the best free themes with sidebar menus to improve shop navigation:

Spotlight theme.

Sense theme.

Publisher theme.

Studio by Shopify.

These best free Shopify themes are completely free and seamlessly integrated with Shopify.

Paid Shopify Themes

For those seeking even more customization and advanced features, consider exploring premium themes in the Shopify Theme Store. Here are three top-rated themes with powerful built-in sidebar menus to get you started:

Basel by The4

Basel theme.

Rating in 2024: 5/5 ⭐ (267+)

Sales in 2024: 3.700+

Basel theme is suitable for anyone creating an e-commerce website on Shopify, especially those who:

• Prioritize a sidebar menu: This built-in feature enhances navigation for store owners and customers.
• Value customization: With drag-and-drop functionality and a wide range of options, Basel empowers users to create a unique online store experience.
• Appreciate pre-built options: Over 30 demos cater to various industries, offering a head start on design.
• Desire a feature-rich theme: AJAX functionality, responsive design, and extensive customization options ensure a well-rounded online store.

Pricing: $59.

Read more: Basel Theme Review: Features, Pros, Cons & Ratings.

Molla by The4

Molla theme on ThemeForest.

Rating in 2024: 5/5 ⭐ (177+)

Sales in 2024: 1,712+

Molla is suitable for a wide range of businesses due to its:

• Mega Menu is included in the feature list. Although technically not a sidebar menu itself, mega menus are often accompanied by sidebar menus in themes that offer extensive navigation options.
• Versatility: Over 25 pre-built demos cater to various industries, from fashion to electronics.
• Ease of use: A user-friendly interface with drag-and-drop functionality for customization.
• Mobile-friendliness: Responsive design ensures a seamless look and function across all devices.
• Conversion-oriented features: Includes elements like product countdowns and social sharing to encourage purchases.
• Ecommerce functionality: Supports features like wishlist, product variants, and various payment options.

Pricing: $99.

Elessi by The4

Rating in 2024: 5/5 ⭐ (209+)

Sales in 2024: 2,046+

Elessi is suitable for a variety of businesses, particularly those that:

• Left Sidebar & Right Sidebar layouts: The Elessi theme offers layout options with sidebars on the left or right side.
• Many Ajax off-canvas Wishlist & Cart Sidebar: The theme supports sidebars for wishlist and cart functionality.
• Sell fashion products: The theme is designed for fashion stores and includes features like a lookbook and product image zoom.
• Focus on mobile responsiveness: The theme ensures a good look and function on all devices.
• Easy-to-use interface: Drag-and-drop functionality and a powerful theme options panel simplify customization. Elessi also offers a variety of pre-designed layouts to get you started quickly.

Pricing: $99.

But it's important to remember that Elessi is more tailored to fashion shops because it has features like a lookbook feature that is already made. If you're in a different industry, you may want to consider other themes alongside Elessi.

Read more:

• 20 Shopify Responsive Themes for eCommerce Stores.
• 12 The Most Customizable Shopify Themes.

Home Market by Tadatheme

Home Market theme on ThemeForest.

Rating in 2024: 4.7/5 ⭐ (22+)

Sales in 2024: 659+

Home Market theme is a Shopify theme for supermarkets with large product catalogs. Its following salient characteristics make it perfect for these kinds of businesses:

• The mega menu with horizontal and vertical styles.
• Full Responsive Design: Make sure your shop works and looks great on all platforms (desktops, tablets, mobiles).
• Unlimited Colors and Multi-Currency Support allow you to change the theme's look to fit your brand and offer multiple payment choices to serve customers worldwide.
• Ajax Quick Buy, Wishlist, and Compare. This feature enables customers to add items to their cart or wishlist or compare them quickly and seamlessly without page reloading.

• Extensive Google Font Library: This library gives you a lot of fonts to pick from, so you can make the look of your store unique.

Pricing: $59.

Tips For Edit Sidebar Menu With Conversion In Shopify

Great to see your Shopify business has a sidebar menu! Now, release its full potential. We'll provide conversion-focused Shopify sidebar menu editing strategies in this section.

Highlight Conversion-Oriented Links

We'll give you two ideas to use vertical menu to draw attention to conversion-focused links in your Shopify store.

Feature Top-Selling Products Or Collections

According to a study from the Nielsen Norman Group, 80% of a user's attention is on the left half of the screen. That means the left side of your online page is like great real estate in that it sells.

Your Shopify sidebar menu is a quiet salesman that leads people invisibly to crucial pages and goods that work well. You can use heatmaps and analytics data to see your best-selling products or most-wanted groups and then use the tab to show them off smartly.

Haywoodgolf is a master of this strategy. When users click "Golf Bags" in the vertical menu, they are immediately taken to the product page. This reduces clicks and increases the chance that they will buy.

Haywoodgolf's website.

Showcase Special Offers Or Promotions

Your Shopify vertical menu isn't just for navigation-it's a prime location to create a sense of urgency and drive conversions. By putting them in a visible place, you may use FOMO (Fear of Missing Out) marketing to increase the likelihood of a purchase.

Pura Vida Bracelets are a great example of this. "Today's Offers" is a separate area in their left menu, with calls to action like "Shop Now" and "Don't Miss Out!" This approach makes people feel they must act quickly and purchase before the deals end.

Pura Vida Bracelets's website.

Don't Repeat Both Menu Vertically And Horizontally

Like most cases of duplicate UI features, duplicate global navigation menus are pointless and could be confusing. It makes things look crowded and can confuse people about which choice to use. This is an example:

For example, if your Shopify website has two navigation UIs for the same thing. Along the top of the screen, a horizontal bar shows the groups. On the right, there is a hamburger menu. However, the hamburger menu has things from the site's helpful navigation, such as news, events, locations, etc.

Users may ask why some products are on both menus and others are limited to the hamburger menu, further complicating their matters.

Utilize Visual Cues

Visuals are the language of the web. Research by 3M Corporation highlights this, demonstrating that our brains process images a staggering 60,000 times faster than text.

You can easily customize the icon on the sidebar menu using the EComposer Page Builder (Which we have shown in the 2nd option).

Take inspiration from SheSapiens. Their website utilizes a white background to create a clean, contemporary look that complements the icon design aesthetic. The hover effect on the menu adds a touch of interactivity and further enhances visual appeal.

SheSapiens's website.

By strategically incorporating icons and compelling product images, you can transform your Shopify sidebar menu from a simple navigation tool into a visually engaging conversion champion.

Maintain Consistency With Your Overall Design

The vertical menu should match the style and attitude of your brand. Follow the same color scheme, font style, and layout for the rest of your website. Consistency will help visitors unconsciously know your brand and feel at ease as they browse your shop.

Take a look at Irini Konstantinidi's press page for an example of a well-designed sidebar menu. Their menu has a logo for brand identification and well-organized connections to popular topics.

Also, the vertical rectangular block format stands out against the white backdrop with its drop shadow, clarifying and simplifying navigation for visitors.

Irini Konstantinidi's press website.

FAQs

1. What Are Some Drawbacks Of Using Shopify Vertical Menu?

While Shopify sidebar menus provide benefits, there are also possible downsides to consider:

• Limited Space: Too many categories or links might clutter the area, making it hard for consumers to discover what they need. Frustration and poor user experience might result.
• Mobile responsiveness: Cramped displays and narrow buttons make smartphone navigation difficult and discourage browsing.
• Potential for Information Overload: Avoid overwhelming consumers with sidebars highlighting specials or best-selling goods. Too many advertising or links might distract visitors from your brand's messaging.

You can get the most out of Shopify vertical menu while reducing any bad effects on user experience or sales by being aware of these possible problems and taking steps to fix them.

2. My Sidebar Menu Isn't Showing Up On All Pages. How Can I Fix That?

Here are some things you can do to figure out what's wrong and fix it:

Theme Settings:

First, check your theme settings. Many themes allow you to control where the sidebar menu appears.

Look for options related to "Sidebar Visibility" or "Menu Placement." Ensure the sidebar is enabled for all relevant page types (homepage, product pages, collection pages, etc.).

Theme Update Issues:

These changes could bring bugs or problems with how things work together. If the problem happened after a recent change to the theme, you might want to return to an older version or get help from the theme creator.

If these steps don't help and your sidebar menu still doesn't show up regularly, you might want to contact Shopify Support for more help. They can help you fix problems more precisely if they know more about your theme and shop.

3. Are There Any Analytics Tools To Track Shopify's Sidebar Menu Performance?

Yes, you can use Google Analytics to set up custom click event tracking within your sidebar menu. Create unique event names for menu links to check user interactions and identify the most clicked sidebar items.

Read more: How to Install Google Analytics on Shopify?

Key Takeaways

A simple navigation tool with a good sidebar menu may boost conversions. To find the proper mix, emphasize clarity, highlight significant items or offers, and maintain a visually consistent design that matches your company identity.

For a primary sidebar menu, choose a theme with built-in sidebar functionality. Explore the theme's customization options to configure the menu and add links.

Consider using a page builder app like EComposer for more advanced customization and control. This allows you to edit the menu directly within the page editor, offering greater flexibility and design options.

We often post instruction guides and advice on our blog to assist you in building a visually appealing and highly successful Shopify shop. Stay tuned!