How to add the Sidebar Menu to any Shopify Theme easily

Is your Shopify store navigation feeling a bit cramped? A well-placed sidebar can unlock a world of organizational possibilities, improving user experience and showcasing key information.  

In this article, we will discover how to effortlessly add a Shopify sidebar menu to your online store, which can provide a clean and intuitive way for customers to navigate your products, filter their search, or access important details. Let’s dig in!

What is a sidebar menu?

A sidebar menu is a vertical navigation panel, typically located on the left or right side of a webpage, providing access to various sections or pages within a website. It’s a popular design element for organizing content and improving user experience, especially on larger websites or those with extensive product catalogs.  

How to add or edit a sidebar menu to your Shopify store

There are two main options to help you add a sidebar menu to your Shopify store, including:

• Choosing a Shopify theme that supports the sidebar functionality
• Edit the current Shopify theme code

Here, I will choose to edit the theme code for reference since there are not many theme options that provide sidebar-adding functionality.

Let’s look in detail at the process of how to add the Shopify sidebar menu to your store using the additional code below:

Step 1: Access the Code editing area

• Log in to your Shopify admin.
• Go to Online Store > Themes.
• Next to your active theme, click the Actions (…) button. Then choose the Edit code option to proceed.

Step 2: Create and edit a sidebar.liquid section

• Go to the sections folder, then click Add a new section to create a new sidebar.liquid section.

• Then, choose the section in .liquid form and add the file name to your sidebar. You can set the name as sidebar.liquid. Click Done to finish.

• After creating the sidebar.liquid section, you need to input this CSS to the file to create the base for your sidebar:

<div class="sideBar_container">
  <input type="checkbox" class="menu_btn" id="menu_toggle">
 
    <label for="menu_toggle"  class="menu_icon">
          <span class="menu"></span>
    </label>
 
  <div class="sideBar_overlay" id="sideBar_overlay">
 
    <div class="sideBar" id="sideBar">
 
      <h4 class="sideBar_title">{{section.settings.sideBar_title}}</h4>
 
      <input type="checkbox" class="menu_btn" id="menu_toggle" checked>
 
          <label for="menu_toggle"  class="inside_menu_icon menu_icon">
 
                <span class="menu inside_menu"></span>
 
          </label>
 
      <div class="sideBar_inner">
 
        <div class="top_menu">
 
           {% assign link = linklists[section.settings.sidebar_top_link_list].link %}
 
            <ul>   {% for link in linklists[section.settings.sidebar_top_link_list].links%}
 
                <div class="link_details">
 
                 <li><a class="link_title" href="/%7B%7B%20link.url%20%7D%7D">{{ link.title }}</a>
 
                      {% assign child_list_handle = link.title | handleize %}
 
                      {% assign child_list = linklists[child_list_handle] %}
 
                        {% if child_list != blank %}
 
                                {% assign child_link  = child_list.links %}
 
                          <input type="checkbox" class="dropDown_btn" id= {{ link.title }} >
 
                            <label for= {{ link.title }} class="dropDown_icon">
 
                                  <span class="dropDown" ></span>
 
                            </label>
 
                                         {% for child_link in child_list.links %}
 
                                  <ul class="dropDown_container">                                 
 
                                       <li><a class="child_title" href="/%7B%7B%20child_link.url%20%7D%7D">{{ child_link.title }}</a></li>   
 
 
 
                                    {% assign grandchild_list_handle = child_link.title | handleize %}
 
                                        {% assign grandchild_list = linklists[grandchild_list_handle] %}
 
                                          {% if grandchild_list != blank %}
 
                                              {% assign grandchild_link  = grandchild_list.links %}
 
                                            <input type="checkbox" class="dropDown_btn" id= {{ child_link.title }} >
 
                                              <label for= {{ child_link.title }} class="gCdropDown_icon dropDown_icon">
 
                                                    <span class="dropDown" ></span>
 
                                              </label>
 
                                                  {% for grandchild_link in grandchild_list.links %}
 
                                                   <ul class="dropDown_container">                                
 
                                                       <li><a class="grandchild_title" href="/%7B%7B%20grandchild_link.url%20%7D%7D">{{ grandchild_link.title }}</a></li>                             
 
                                                      </ul>
 
                                             {% endfor %}
 
                                           {% endif %}
 
                                    </ul>
 
                           {% endfor %}
 
                                    {% endif %}
 
                   </li>
 
                               </div>
 
             {% endfor %}
 
          </ul>
 
        </div>
 
              <div class="bottom_menu">
 
           {% assign link = linklists[section.settings.sidebar_bottom_link_list].link %}
 
            <ul>   {% for link in linklists[section.settings.sidebar_bottom_link_list].links%}
 
<div class="link_details">
 
                 <li><a class="link_title" href="/%7B%7B%20link.url%20%7D%7D">{{ link.title }}</a>
 
                      {% assign child_list_handle = link.title | handleize %}
 
 
 
                      {% assign child_list = linklists[child_list_handle] %}
 
 
 
 
 
                        {% if child_list != blank %}
 
                                {% assign child_link  = child_list.links %}
 
 
 
                          <input type="checkbox" class="dropDown_btn" id= {{ link.title }} >
 
 
 
                            <label for= {{ link.title }} class="dropDown_icon">
 
 
 
                                  <span class="dropDown" ></span>
 
 
 
                            </label>
 
 
 
                                         {% for child_link in child_list.links %}
 
                                  <ul class="dropDown_container">                                
 
                                       <li><a class="child_title" href="/%7B%7B%20child_link.url%20%7D%7D">{{ child_link.title }}</a></li>   
 
 
 
                                    {% assign grandchild_list_handle = child_link.title | handleize %}
 
                                        {% assign grandchild_list = linklists[grandchild_list_handle] %}
 
                                          {% if grandchild_list != blank %}
 
                                              {% assign grandchild_link  = grandchild_list.links %}
 
                                            <input type="checkbox" class="dropDown_btn" id= {{ child_link.title }} >
 
                                              <label for= {{ child_link.title }} class="gCdropDown_icon dropDown_icon">
 
                                                    <span class="dropDown" ></span>
 
                                              </label>
 
                                                  {% for grandchild_link in grandchild_list.links %}
 
                                                   <ul class="dropDown_container">                                
 
                                                       <li><a class="grandchild_title" href="/%7B%7B%20grandchild_link.url%20%7D%7D">{{ grandchild_link.title }}</a></li>                             
 
                                                      </ul>
 
                                             {% endfor %}
 
                                           {% endif %}
 
                                    </ul>
 
                           {% endfor %}
 
                                                                 {% endif %}
 
                   </li>
 
 
 
 
 
                               </div>
 
               {% endfor %}
 
          </ul>
 
        </div>
 
          {%- assign socials = "Facebook Twitter Pinterest Instagram Tumblr Snapchat YouTube Vimeo" | split: ' ' -%}
 
         {%- if  settings.social_twitter_link != blank
 
                or settings.social_facebook_link != blank
 
                or settings.social_pinterest_link != blank
 
                or settings.social_instagram_link != blank
 
                or settings.social_tumblr_link != blank
 
                or settings.social_snapchat_link != blank
 
                or settings.social_youtube_link != blank
 
                or settings.social_vimeo_link != blank
 
                or request.page_type == 'article'
 
                or request.page_type == 'blog'
 
                -%}
 
           {%- assign social_icons = true -%}
 
             <ul class="social_icon">
 
              {%- for social in socials -%}
 
                {%- assign social_link = social | prepend: 'social_' | append: '_link' | downcase -%}
 
                {%- assign icon_link = social | prepend: 'icon-' | downcase -%}
 
                {%- if settings[social_link] != blank -%}
 
                  <li class="social-icons__item">
 
                    <a class="social-icons__link" href="/%7B%7B%20settings%5Bsocial_link%5D%20%7C%20escape%20%7D%7D">
 
                      {%- include icon_link -%}
 
                      <span class="icon_-text">{{ social }}</span>
 
                    </a>
 
                  </li>
 
               {%- endif -%}
 
               {% endfor %}
 
          </ul>

               {%- endif -%}
 
      </div>
    </div>
  </div>
</div>
<style>
 
  /*======== Menu Icon =========*/
 
  /* hide the input checkbox */
 
  .menu_btn {
 
    display: none;
 
  }
 
  .menu_icon {
 
    height: 50px;
 
    width: 50px;
 
    background-color: rgba(0,0,0,0.2);
 
    position: relative;
 
    margin: 20px 30px;                                         /* adjust placement as needed */
 
    cursor: pointer;
 
    z-index: 9;
 
    }
 
  .menu_icon:hover {
 
    background-color: {{section.settings.sideBar_bg}};
 
  }
 
  .menu {
 
    top: 50%;
 
    left: 50%;
 
    transform: translate(-50%, -50%);
 
   }
 
  /* need to mention content */
 
  .menu, .menu::before, .menu::after {
 
    content:'';
 
    height: 5px;
 
    width: 30px;
 
    position: absolute;
 
    transform-origin: center;
 
    background-color: {{section.settings.link_color}};
 
   }
 
  .menu::before {
 
              top: -10px;  
 
   }
 
 .menu::after {
 
              bottom: -10px;
 
   }
 
  /* have to name the children .menu_icon to display since span is a grandchild */
 
  .menu_btn:checked ~ .menu_icon .menu {
 
    background: transparent;
 
  }
 
 
  .menu_btn:checked ~ .menu_icon .menu::before {
 
    transform: rotate(45deg);
 
    top: 0;
 
    position: absolute;
 
  }
 
  .menu_btn:checked ~ .menu_icon .menu::after {
 
    transform: rotate(-45deg);
 
    top: 0;
 
    position: absolute;
 
    z-index: 1;
 
  }
 
 
  /* menu btn function */
 
   .menu_btn:checked ~ .sideBar_overlay {
 
     visibility: visible;
 
 }
 
   .menu_btn:checked ~ .sideBar_overlay .sideBar {
 
     width: 400px;
 
  }
 
   /*======== SideBar =========*/
 
  .inside_menu_icon {
 
           margin-top: 7px;
 
    margin-left: 7px !important;
 
    position: relative;
 
  }
 
 
 
   .sideBar_overlay {
 
    visibility: hidden;
 
    width: 100%;
 
    height: 100%;
 
    margin: 0;
 
    top: 0;
 
    position: fixed;
 
    background-color: rgba(0,0,0,0.7);
 
    z-index: 11;
 
  }
 
 
 
  .sideBar {
 
    width: 0;
 
    height: 100%;
 
    top: 0;
 
    position: fixed;
 
    background-color: {{section.settings.sideBar_bg}};
 
    overflow: scroll;
 
    position: relative;
 
    display: flex;
 
    flex-direction: column;
 
    transition: all .3s ease;
 
  }
 
 
 
  .sideBar_title {
 
    height: 10%;
 
    width: 70%;
 
    position: absolute;
 
    left: 50%;
 
    transform: translate( -50%, 10%);
 
    color: {{section.settings.title_color}};
 
    font-size: 25px;                                                                  /* edit font-size */
 
    text-align: center;
 
  }
 
 
 
  .sideBar_title:hover {
 
    color: {{section.settings.title_hover}};
 
  }
 
 
 
  .sideBar_inner {
 
    height: 100%;
 
    width: 100%;
 
    position: absolute;
 
    top: 5%;
 
    left: 50%;
 
    transform: translate(-50%, 0);
 
    padding: 10%;
 
   }
 
 
 
  .top_menu, .bottom_menu {
 
    margin-bottom: 20px;
 
  }
 
 /*======== Link List =========*/
 
  .link_title {
 
    color: {{section.settings.link_color}};
 
    font-size: 18px;
 
    text-align: center;
 
    position: relative;
 
    display: flex;
 
  }
 
 
  .link_title:hover  {
 
    color: {{section.settings.link_hover}} !important;
 
  }
 
 
 
  .link_details {
 
     list-style: none;
 
  }
 
 
 /*======== Drop down =========*/
 
  /* if link has submenu then dropdown shows*/
 
 .dropDown_btn {
 
    display: none;
 
    width: 0;
 
    height: 0;
 
    top: 0;
 
  }
 
 
  .dropDown_icon {
 
    height: 25px;
 
    width: 30%;
 
    position: relative;
 
    float: right;
 
    margin: -25px; 
 
   }
 
 
 
.gCdropDown_icon {
 
    left: -5px;
 
  }
 
 
 
  .dropDown, .dropDown::after {
 
    content: '';
 
    height: 3px;
 
    width: 15px;
 
    background-color: {{section.settings.link_color}};
 
    position: absolute;  
 
    top: 50%;
 
    left: 50%;
 
    transform: translate(-50%, -50%);
  }
 
 
 
  .dropDown::after {
 
    transform: rotate(90deg);
 
    visibility: visible;
 
    top: 0;
 
    left: 0;
 
 }
 
  .dropDown_btn:checked ~ .dropDown_icon .dropDown::after {
 
    visibility: hidden;
 
  }
 
 
 
  .dropDown_btn:checked ~ .dropDown_container {
 
    display: block;
 
    transition: all .3s ease;
 
  }
 
 
 
  .dropDown_container {
 
    display: none;
 
    margin-left: 10%;
 
    font-size: 16px;
 
    list-style: none;
 
    color: {{section.settings.link_color}}!important;
 
  }
 
 
 
  .dropDown_container:hover {
 
    background-color: {{section.settings.link_hover}} !important;
 
  }
 
 
 
  .child_title {
 
    color: {{section.settings.link_color}}!important;
 
  }
 
 
   /*======== Socials =========*/
 
  /* CSS might defer in other Shopify theme - adjust CSS when appropriate */
 
 .social_icons {
 
    height: 50px;
 
    width: 100%;
 
    bottom: 0;
 
    position: absolute;
 
  }
 
 
 
  .social-icons__item {
 
    font-size: 20px;
 
  }
 
 
 
  .icon_-text {
 
     margin-left: 10px;
 
  }
 
 
 
  .social-icons__item:hover {
 
    background-color: {{section.settings.link_hover}} !important;
 
  }
 
  </style>
 
 
{% schema %}
 
{
 
  "name": {
 
    "cs": "Nabídka v postranní liště",
 
    "da": "Sidebjælkemenu",
 
    "de": "Seitenleistenmenü",
 
    "en": "Sidebar menu",
 
    "es": "Menú de la barra lateral",
 
    "fi": "Sivupalkkivalikko",
 
    "fr": "Menu de la barre latérale",
 
    "it": "Menu sidebar",
 
    "ja": "サイドバーメニュー",
 
    "ko": "사이드바 메뉴",
 
    "nb": "Sidepanelmeny",
 
    "nl": "Zijbalkmenu",
 
    "pl": "Menu paska bocznego",
 
    "pt-BR": "Menu lateral",
 
    "pt-PT": "Menu lateral",
 
    "sv": "Sidomeny",
 
    "th": "เมนูแถบด้านข้าง",
 
    "tr": "Yan çubuk menüsü",
 
    "vi": "Menu thanh bên",
 
    "zh-CN": "侧边栏菜单",
 
    "zh-TW": "側邊欄選單"
 
  },
 
 
 
  "class": "sidebar-menu-section",
 
  "settings": [
 
    {
 
      "type": "link_list",
 
      "id": "sidebar_top_link_list",
 
      "label": {
 
        "cs": "Primární nabídka",
 
        "da": "Primær menu",
 
        "de": "Hauptmenü",
 
        "en": "Primary menu",
 
        "es": "Menú primario",
 
        "fi": "Ensisijainen valikko",
 
        "fr": "Menu principal",
 
        "it": "Menu principale",
 
        "ja": "プライマリメニュー",
 
        "ko": "기본 메뉴",
 
        "nb": "Primærmeny",
 
        "nl": "Eerste menu",
 
        "pl": "Główne menu",
 
        "pt-BR": "Menu principal",
 
        "pt-PT": "Menu primário",
 
        "sv": "Primärmeny",
 
        "th": "เมนูหลัก",
 
        "tr": "Birincil menü",
 
        "vi": "Menu chính",
 
        "zh-CN": "主菜单",
 
        "zh-TW": "主要選單"
 
      },
 
      "default": "main-menu"
 
    },
 
    {
 
      "type": "link_list",
 
      "id": "sidebar_bottom_link_list",
 
      "label": {
 
        "cs": "Vedlejší nabídka",
 
        "da": "Ekstra menu",
 
        "de": "Zusatzmenü",
 
        "en": "Additional menu",
 
        "es": "Menú adicional",
 
        "fi": "Lisävalikko",
 
        "fr": "Menu supplémentaire",
 
        "it": "Menu aggiuntivo",
 
        "ja": "追加メニュー",
 
        "ko": "추가 메뉴",
 
        "nb": "Tilleggsmeny",
 
        "nl": "Extra menu",
 
        "pl": "Dodatkowe menu",
 
        "pt-BR": "Menu adicional",
 
        "pt-PT": "Menu adicional",
 
        "sv": "Ytterligare meny",
 
        "th": "เมนูเพิ่มเติม",
 
        "tr": "Ek menü",
 
        "vi": "Menu bổ sung",
 
        "zh-CN": "其他菜单",
 
        "zh-TW": "附加選單"
 
      },
 
      "default": "footer"
 
    },
 
      {
 
        "type": "color",
 
        "id": "sideBar_bg",
 
        "label": "Sidebar Background Color",
 
        "default": "#87ceeb"
 
        },
 
     {
 
        "type": "text",
 
        "id": "sideBar_title",
 
        "label": {
 
        "en": "Sidebar Title"
 
        },
 
        "default": {
 
        "en": "Custom Sidebar"
 
        }
 
        },
 
        {
 
        "type": "color",
 
        "id": "title_color",
 
        "label": "Title Font Color",
 
        "default": "#254145"
 
        },
 
        {
 
        "type": "color",
 
        "id": "title_hover",
 
        "label": "Title Hover Color",
 
        "default": "#94F7E9"
 
        },
 
       {
 
       "type": "color",
 
        "id": "link_color",
 
        "label": "Link Font Color",
 
        "default": "#254145"
 
        },
 
        {
 
        "type": "color",
 
        "id": "link_hover",
 
        "label": "Link Hover Color",
 
        "default": "#94F7E9"
 
        }
 
  ]
 
}
 
{% endschema %}

• Click Save to proceed.

Step 3: Edit the theme.liquid layout

• Go to the Layout folder and open theme.liquid.

• Add the code below after the header section, then click Save to proceed.

{% section ‘sidebar’ %}

Step 4: You have nailed it!

• You can check your store again to view the newly-created sidebar (or simply click the Preview store button within the editing code area.

Why should you add a sidebar menu to your Shopify store?

When I revamped my online store, I initially focused on the homepage and product pages. But it wasn’t until I added a sidebar menu that everything clicked! Suddenly, customers could easily navigate categories, find important information, and even discover new products. It was a game-changer for my store’s usability and overall appeal.

Here’s WHY you should consider adding a sidebar to your Shopify store:

• Enhanced Navigation: A sidebar menu offers a clear and organized way to present essential pages, collections, or blog categories. It’s like a roadmap for your store, guiding visitors where you want them to go.
• Improved User Experience: Customers can quickly find what they’re looking for, reducing frustration and bounce rates. A well-structured sidebar makes browsing a breeze, especially on larger stores with lots of content.
• Showcase Key Information: The sidebar is prime real estate! Use it to highlight promotions, announcements, contact details, or even social media links. I’ve used mine to promote seasonal sales and showcase customer testimonials.
• Product Filtering: For stores with lots of products, adding filtering options to the sidebar helps customers narrow down their search quickly and find exactly what they need.
• Visual Appeal & Branding: A well-designed sidebar adds visual interest and breaks up the monotony of a single-column layout. It’s also a chance to reinforce your branding with consistent colors and fonts.
• Mobile Optimization: On smaller screens, a sidebar can be collapsed into a neat hamburger menu, keeping your site clean and easy to navigate on mobile devices.

Remember, a good sidebar is more than just a list of links. It’s an opportunity to guide your customers, provide valuable information, and enhance their overall shopping experience.

Top 5 Shopify themes with sidebar 

Besides the detailed instructions on adding/ editing the sidebar Shopify menu, I would like to introduce the top 5 Shopify themes that enable you to add sidebar menu Shopify and customize it in your desired way. 

Yuva

I’ve personally used Yuva for a client’s extensive product catalog, and the sidebar made browsing a breeze. Its clean design puts products front and center, making it a great choice for visual brands.

Key Features:

• Mega menu support
• Product filtering and sorting
• High-quality image display

Pricing: $350 (one-time fee)

Expression

I was drawn to Expression’s warm, inviting aesthetic, created with textured backgrounds and natural elements. The sidebar complements this, making navigation both practical and stylish.

Key Features:

• Visually appealing sidebar
• Clean and modern design
• Easy theme updates

Pricing: $350 (one-time fee)

Elessi

Elessi’s flexibility is what caught my eye. You can have the sidebar on the left OR right, and it even supports off-canvas sidebars for wishlist and cart.

Key Features:

• Left/right sidebar options
• Off-canvas wishlist/cart
• Fashion-focused features (lookbook, zoom)

Pricing: $89 (one-time fee)

Story

I love Story’s emphasis on storytelling, and the sidebar fits right in, letting you feature blog posts or brand highlights. It’s great for content-rich stores.

Key Features:

• Unique vertical slideshow
• Prominent sidebar placement
• Ideal for content-heavy stores

Pricing: $350 (one-time fee)

Refresh

Refresh lives up to its name with a clean, modern look that’s easy to navigate. The sidebar is tucked away but easily accessible, making it a good choice for those wanting a minimalist feel.

Key Features:

• Responsive design
• User-friendly interface
• Sidebar with collapsible menus

Pricing: Free

Note: To explore additional Shopify sidebar menu themes available in the marketplace, you can consult our latest article: Top shopify theme with sidebar menu

FAQs

My current theme doesn’t have a visible sidebar option in the theme editor. Can I still add one?

Yes, even if your theme lacks a built-in sidebar section, you can often add one through code customization by editing your theme’s Liquid files. However, this requires some technical knowledge or the assistance of a Shopify developer.

I want to display different content in my sidebar depending on the page type (e.g., collection page, product page). How can I achieve this?

You can use Liquid’s conditional logic within your sidebar code to display specific content based on the current template or page type. This allows you to tailor the sidebar’s content to each page’s context.

I’m using an app that adds elements to my sidebar, but they’re not showing up. What could be the issue?

Check the app’s settings and ensure it’s compatible with your theme. Some apps might require specific theme configurations or code snippets to display their content in the sidebar.

My sidebar is overlapping with other elements on my page, causing layout issues. How can I fix this?

This usually indicates a conflict in your theme’s CSS styles. Use your browser’s developer tools to inspect the elements and adjust the sidebar’s width, margins, or positioning to prevent overlapping.

I’ve added a sidebar, but it’s not responsive on mobile devices. How can I make it mobile-friendly?

Ensure your theme is responsive, and then use CSS media queries to adjust the sidebar’s behavior on smaller screens. You might want to collapse it into a hamburger menu or adjust its width for optimal mobile viewing.

Summary

This guide has illuminated the various methods to add and edit a sidebar on your Shopify store, enhancing navigation and improving the overall user experience. Remember that the optimal approach depends on your theme’s capabilities and your desired level of customization, so carefully evaluate the available sidebar menu Shopify options and choose the one that best suits your store’s needs.

Related Posts:

• How to Create Buy One Get One Free Discounts on Shopify
• How to Add Terms of Service to your Shopify Store
• What is Favicon on Shopify?