Ecommerce brands go to great lengths to make sure their shopping experience is unique to their brand. Your buyer’s journey can make or break a sale, after all.
But, brands still look to each other for inspiration on what to include in their store for a powerful customer experience—whether it’s for CTA placement, product page tricks, or navigation upgrades.
One particular component stores can use to improve navigation throughout their site, or within their product collections, is the sidebar menu.
In Shopify, the sidebar menu feature isn’t always an option. Some themes have it, many do not.
Whether or not your theme includes this feature, you can still add it to your store. If your theme is equipped, you can edit it to fit your navigational needs.
In this post, we’ll cover:
First, let’s talk about what a sidebar menu can be used for in your store.
#cta-visual-pb#
Sidebar menus have a variety of purposes on websites, both ecommerce and otherwise.
For many sites, it’s a way to take advantage of unused space and help visitors navigate through a site more easily.
Often, you’ll see features such as:
For a Shopify store, you are most likely to find navigation menu links, social media icons, and product filters.
The definition of a sidebar, as you can see, isn’t set in stone. The thing they all have in common is that it is a bar on the side of the page.
Amazon uses a sidebar for just about every product filter you can think of—with delivery features, star ratings, brands, departments, pricing, styles, and more. They even get an ad or two in there too.
As far as creating a helpful shopping experience, Amazon isn’t a bad one to emulate (for functionality, not for visuals).
So, depending on what you want a sidebar for, you’ll need to take different approaches for your Shopify store and theme.
Certain themes have sidebars, but only for navigation. Others have sidebars for product filtering. Many don’t have sidebars at all.
For those with sidebars, we’ll go into how to edit it to your liking. For those without, we’ll explore ways of creating sidebars where you need them.
Not all themes come with sidebar functionality. Two of the most common themes, Debut and Dawn, do not have a sidebar option.
In fact, none of the free Online Store 2.0 themes have sidebar functionality, opting instead to use a simple product filtering system that sits at the top of the collection page, as you’ll see below from the Sense theme.
There are good reasons for themes to not include a sidebar, as it may not fit into the overall aesthetics and functionality they are going for.
Here are a few free themes that do have the sidebar feature, if you must have it included in your theme.
Shopify’s Boundless theme comes with a sidebar for navigation purposes. The sidebar menu will pop out when a visitor clicks on the hamburger button in the upper left corner.
You can specify two menus you want to use in the sidebar and add any of your social media links.
The sidebar menu can be customized from any page in your theme editor since it shows up across the whole site.
On the Supply theme, the sidebar menu can be used on collection pages with very limited customization options.
You can choose to enable the sidebar and use tags or groups for product filtering. It does not have main navigation functionality.
The Simple theme is true to its name. The reason it has a sidebar menu is that it is replacing a traditional header menu, bringing products right up to the top of the page.
You can customize this menu from any page in the theme editor since it stays there for every page. If all you need a sidebar theme for is navigation, this might work fine for you.
Customizing your Shopify theme’s sidebar feature will differ from theme to theme. As I mentioned earlier, many themes do not include the sidebar and those that do utilize it in different ways.
Nevertheless, the process for editing your sidebar is fairly similar no matter what theme you use.
First, find your themes by navigating to Online Store > Themes. There you will find your current live theme and your library of saved themes.
Find the theme you want to make changes to and click the Customize button. This will bring you to your Shopify theme editor.
You can navigate to various page templates in your theme editor from the dropdown menu at the top of the page.
For some themes, the sidebar is a function of the collection page, allowing shoppers to filter by product tags within a collection. This is the case for the Supply theme.
If that describes your sidebar situation, you’ll navigate to “Collections” and choose the “Default collection” page template to edit.
Other themes use the sidebar as a navigational menu, as in the Simple and Boundless themes.
For these themes, you can edit the sidebar within any page template since the feature is used across the whole store.
Once in the page template, you can click the Sidebar (or Sidebar menu) section along the left side of the page (itself a sidebar too!).
Note: Some themes, like Supply, may have sidebar settings within a different section, like Collection.
On the right side of the page, you’ll see the customization options for your sidebar menu.
There you can choose which navigation menus to include and what social media icons you want added to your sidebar. As you can see, customization options are very limited within the theme editor.
The menus you add to your sidebar in the theme editor cannot be edited within the theme editor.
To update your navigation menus, go to Online Store > Navigation and click into the menu you want to edit (or add a new menu like I did).
You can name your menu whatever you want. For this, I called it “Sidebar.”
Add menu items here with links to the related pages. My sidebar menu is being built around collections, so I’m including a Furniture collection with Chairs and Tables sub-collections nested beneath it.
Nesting your menu items is as simple as grabbing the item and dragging it into place. You can nest down to three levels in.
Once you’ve saved your menu, you can navigate back to the theme editor and see the changes already live in your theme.
#cta-visual-pb#
As was mentioned earlier, your theme may not have a sidebar feature available, so you won’t find it in your theme editor like in the examples above.
Obviously, the easiest way to add a sidebar to your Shopify store is by using a theme with that functionality.
If you’d rather keep your layout but add a sidebar, you could add to and edit your theme’s template files to make it happen. This is a rather technical process.
The steps involve editing the individual template section file for the page in question, editing existing code and adding multiple lines of new code, and adding Liquid code to assign sections to your sidebar so they can be added and customized through your Shopify dashboard.
Since the code varies from theme to theme and template to template, we’re unable to provide any example code here that would be applicable for everyone.
Instead, you’ll need to familiarize yourself with code used in Shopify themes such as HTML, CSS, and Liquid.
Here are some great resources and tutorials to help get you started:
If you don’t want to deal with code, we’ve got an excellent fix for you.
Another way to add a sidebar to your Shopify store is with a visual tool like Shogun Page Builder.
Not only can you drag and drop sections into place to create store pages, but you can also integrate a sidebar into new and existing pages.
This is done with the Columns element, which divides a page into vertical sections. You just drag it onto the page like so:
With this approach, you can keep your header navigation intact while splitting the body of your page into multiple columns.
One of these columns can be turned into a sidebar menu that can be used for sitewide navigation or for linking to products by tags.
But, that’s not all. With Page Builder, you can drag whatever elements you want into that extra column. Your imagination is your guide.
It defaults to two columns, but you can add columns to fit your needs. In this instance, we’ll go with three columns and shrink the width of the rightmost column to be used as the sidebar.
Then, within that right column, we can add in headings to be our navigation items. For my example here, I’m cloning what the Supply theme (mentioned earlier) does with their collection pages, linking out to product tag groupings.
You could also create a quicklinks navigation menu with your most important links, social media icons, a newsletter signup form, and more.
While the page you create in Page Builder won’t be a Shopify template, you can save it as a template to be used for any new page you create in Page Builder.
If you only need to replicate the structure of the page once or twice, you could also duplicate it.
Once you have saved a page template, you are able to make changes to the template and use it when adding new pages, like any other template on Shogun.
As every store’s customization needs are unique, how you go about building out your sidebar in Shogun will differ.
I created the above page example in a matter of minutes, so it’s super easy to noodle around to find what works best for you.
We encourage you to have fun with it.
Being able to customize your store to include the elements you envision is super important—both for you and your customers.
A sidebar menu can provide that extra boost to the user experience, making it simpler to navigate through your store.
While unavailable on many themes these days, you can add this feature without having to mess with code. Not only that, but with Shogun Page Builder, you can also customize every other aspect of your store pages.
#cta-visual-pb#