Many brands go to great lengths to ensure the user experience and buyer’s journey are unique for their online stores. Still, it’s common for retailers to take inspiration from other sites when a feature or design element catches their eye. You’ve likely seen elements you wanted to replicate on your own site.
One popular element that can be difficult to manipulate is the sidebar.
If you want to edit the sidebar in your Shopify store, you’ll have to dig into some of the theme editing menus. There might even be some code editing required, depending on what you want to accomplish.
In this article, we’ll look at how to edit the sidebar in Shopify, some customization ideas for the sidebar, and how to add a sidebar to your Shopify theme.
Using Sidebars in Shopify
Sidebars have a number of uses on a website, be it an eCommerce Shopify store or a standard website. They’re most commonly seen alongside articles and blog content and contain a variety of widgets or modules with content like:
- Social media badges
- Links to recent and popular content
- Content categories
- Calls to action and opt-ins
- Ad blocks
In eCommerce, the sidebar is less commonly used as a content section.
Some stores choose to edit the sidebar in Shopify so that site navigation is removed from the header and instead placed on the left or right side of the site.
Others edit the sidebar in Shopify to spotlight product and store information, provide quick links to collections, and provide a space for granular filters customer can use to narrow down their product search.
Regardless of what you want to put in the sidebar it’s important to note that the sidebar may not be included in your Shopify store.
At least not yet.
This is due to themes being individually coded to fit a specific layout and style. Some themes simply don’t support or offer any kind of a sidebar menu or pane.
For example, the Debut Shopify theme that comes with every new store doesn’t offer this as a native feature.
Also, older themes developed before Shopify added the new sections feature likely won’t have the sidebar functionality either.
If you can’t find an option to edit the sidebar in Shopify when customizing your theme, it’s likely the sidebar functionality wasn’t coded into it.
Thankfully, just because your theme lacks a sidebar option doesn’t mean you can’t add one to your site. We’ll touch on that a little deeper into the article.
Because some of the most popular Shopify themes do include sidebar functionality, we’ll first go into how to edit the sidebar in Shopify.
How to Edit the Sidebar in Shopify
Before showing an example, know that themes in the Shopify store are likely to be coded differently so the option to add or edit the sidebar may function differently. For most themes with sidebar functionality you’ll follow a relatively similar path to edit the sidebar of your theme’s pages.
In this example, we’ll be working with the Parallax theme from Out of the Sandbox.
Step 1: Log into your Shopify and navigate to your Themes section
You can reach this page by clicking “Online Store”, then clicking on “Themes” in the left menu.
Step 2: Click the blue Customize button
Find your currently active theme in the main window and click on “Customize” to open the customization window.
Step 3: Choose your page
In the upper left side of your window you should see a downward arrow to select the page you want to customize. This typically defaults to the Home page.
Click here to choose the page on which you want to edit your sidebar.
Step 4: Find your sidebar options
Your sidebar options may be visible in the “sections” area to the left once you select your page, however the options may be coded into one of the sections.
In the following example using Parallax, there’s no sidebar visible in the options. However, if we click on into the Collection section we’ll find the option to edit the Sidebar in Shopify at the bottom of the section’s options.
In Parallax, there’s an option to toggle sidebar content. If you turn on the sidebar, you can use the “Add content” option below to add a number of different content modules to the sidebar. This includes a list of collections, pages, tags, vendors, product types, text, and a designated navigation menu.
If you compare the above image to the same Collections page section settings in the Debut theme, you’ll see a marked difference in options and the lack of any sidebar option.
Shopify does offer a free theme, known as Simple, that uses sidebar navigation.
If you follow the same customization steps above you’ll find the sidebar option visible among the sections for some pages.
In the above image for the Collections page template, there’s a “Sidebar” section that can be customized.
Unfortunately, customization is limited. Because the site only uses the sidebar for navigation the only options for this sidebar is the selection of a menu. There’s no way to add other sections to the sidebar through Shopify.
When Your Shopify Theme Has No Sidebar Option
Want to edit the sidebar in Shopify but your theme doesn’t offer any options for a sidebar?
Well, adding one can be tricky depending on the route you choose.
The easiest option that involves virtually no code is to find and purchase a prebuilt Shopify theme that includes a customizable sidebar.
If you don’t want to potentially redesign your entire layout and just want to add a sidebar, then you can do this through a few steps that involve editing and adding code to the template files of your Shopify theme.
The steps involve editing the individual template section file for the page that needs a sidebar, 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.
Because the code varies from one theme to another, and from page template to page template, there’s no way to provide example code that would work across the board.
Instead, you’ll need to familiarize yourself with code used in Shopify templates including HTML, CSS and Liquid.
Here are some great resources and tutorials to help get you started if you want to manage editing the code on your own:
- Shopify Partners Developer Resource Articles
- Shopify Theme Code Customization Tutorials
- Shopify Liquid Cheat Sheet
How to Edit the Sidebar in Shopify with Shogun
Not only does Shogun’s landing page builder for Shopify let you create and customize landing pages with sections, you can also add sidebar elements to existing pages or new pages you create.
This can be done with the Columns element, which can divide the content of a page and create a vertical space for adding in the content you’d like to feature in a sidebar.
The benefit to this approach is it allows you keep your header navigation in place while splitting the body of a page into multiple columns. One of those columns can then be customized to contain the sidebar content you’d like customers to see.
This could include a variety of content in your store that wouldn’t normally be available in Shopify’s drag-and-drop interface including:
- Featured products
- Promotions and special offers
- Opt-in and call to action boxes and more
With the Shogun app, you can even manage multiple columns in a single page.
This allows you to create a single vertical column you could use for sidebar elements with the remaining columns structured to present content in a grid. Shogun allows you control individual column sizes so each column can be configured to your liking.
With this feature, you'll be able to make the exact layout you want for your store, right down to the pixel.