How to Easily Add or Customize the Sidebar in Your Shopify Store

March 16, 2022
by
Sean Flannigan

How to Easily Add or Customize the Sidebar in Your Shopify Store

March 16, 2022
by
Sean Flannigan
Get the latest straight to your inbox
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Share on:

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#<cta-title>Want to add a sidebar to your Shopify pages?<cta-title>With just a few clicks, you can add sidebars, images, videos, accordions, and so much more with Shogun.Start customizing today


What is a sidebar menu in Shopify?

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:

  • Main navigation menu items
  • Calls to action or subscription forms (like on the left side of this blog post, for instance)
  • Links to featured content or content categories (for blogs)
  • Display ads
  • Social media icons
  • Product filters

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.

amazon sidebar product filters
Image: Amazon

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.

Which free Shopify themes come with a sidebar menu?

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.

shopify sense theme product filters above collection
Image: Shopify

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.

Boundless

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.

shopify boundless theme sidebar option

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.

Supply

On the Supply theme, the sidebar menu can be used on collection pages with very limited customization options.

shopify supply theme sidebar option

You can choose to enable the sidebar and use tags or groups for product filtering. It does not have main navigation functionality.

Simple

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.

shopify simple theme sidebar option

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.

How to edit your Shopify sidebar in your theme

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.

Step 1: From your Shopify dashboard, go to Online Store > Themes

First, find your themes by navigating to Online Store > Themes. There you will find your current live theme and your library of saved themes.

shopify online store themes

Step 2: Click Customize on your theme

Find the theme you want to make changes to and click the Customize button. This will bring you to your Shopify theme editor.

shopify themes customize

Step 3: In the theme editor, navigate to your desired page template

You can navigate to various page templates in your theme editor from the dropdown menu at the top of the page.

shopify theme editor navigate to page templates

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.

shopify supply theme sidebar options in collection section
In this theme, the sidebar options are within another page section

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.

shopify boundless theme sidebar section
This theme has a sidebar section included across page templates

Step 4: Start customizing your sidebar section

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.

shopify simple theme sidebar options theme editor

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.

Optional: Change your navigation menus that are included in the sidebar

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).

shopify dashboard navigation menus

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.

update shopify navigation menus to customize sidebar

Once you’ve saved your menu, you can navigate back to the theme editor and see the changes already live in your theme.

use saved navigation menu to show in theme editor

#cta-visual-pb#<cta-title>Add a sidebar the easy way<cta-title>With just a few clicks, you can add sidebars, images, videos, accordions, and so much more with Shogun Page Builder.Get started today


How to add a sidebar in Shopify

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.

Add a sidebar to your Shopify store with Page Builder

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:

shogun page builder add columns element

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.

shogun page builder columns controls
For this, I’m using three columns and making the leftmost column smaller for 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.

shogun page builder create sidebar with columns

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.

shogun page builder sidebar template save

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.

shogun page builder your templates

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.

Create a powerful shopping experience for your customers

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#<cta-title>Quickly add a sidebar in Shopify<cta-title>Create the Shopify store you really want by easily adding sidebars, containers, collections, and more with Shogun Page Builder.Start building today

Sean Flannigan

Sean is one of Shogun's tireless content marketers. When he isn't creating exciting ecommerce content, he's probably biking or at the park.