Category: Shopify

If you are wondering How to Add a Side Bar to the DEBUT Shopify Theme with custom navigation, then you are in luck. Please read below. If you do not understand this, we can make these edits for you, just contact us here – Approximately $75 to set this up for you.

I wanted to be able to show two CUSTOM MENUS for the side bar that I could control if I add items to the Navigation Menu in Shopify.

1. I start off by adding a NEW NAVIGATION menu. In the Shopify Admin, click on ONLINE STORE on the left then select NAVIGATION.
2. Select ADD MENU
3. I named my menus  Shop By Brand and Shopy By Beauty.
4. I then added navigation items for the collections I wanted to display to each menu. Taking note that the HANDLE or NAME OF THE MENUS would now be shopy-by-brand and shop-by-beauty. I will need these in the next section.
5. Once my menus are created, I click on ONLINE STORE on the left, then click on the dropdown called ACTIONS and select DOWNLOAD THEME FILE. Always backup your theme before making changes. It is just good practice.
6. Next select ACTIONS again and select EDIT CODE
7. On the left side you will scroll down to TEMPLATES and click on collection.liquid ( DEV NOTE: we always make another backup of the original file then work on the main file)
8. You should see this code{% comment %}
   The contents of the collection.liquid template can be found in /sections/collection-template.liquid
   {% endcomment %}

   {% section ‘collection-template’ %}

9. next add this line of code {% section ‘sidebar’ %} above {% section ‘collection-template’ %} so it will look like this{% comment %}
   The contents of the collection.liquid template can be found in /sections/collection-template.liquid
   {% endcomment %}

   {% section ‘sidebar’ %}
   {% section ‘collection-template’ %}

10. SAVE the new template (top right)
11. We will now need to CREATE the page called  sidebar.liquid that will contain the navigation and other items for the sidebar.
12. On the left now scroll down to SECTIONS and select ADD NEW SECTION.
13. Paste this code into the new section.  Notice the BOLDED ITEMS in this code. It the only information you need to change so that your correct menus display where they should. If for example you called your menus  Custom Menu One and Custom Menu Two then I would need to use  customer-menu-one and custom-menu-two in the code below. Also notice the CLASS that is in RED. This is what we will style in the CSS to make it a sidebar.

    <div class=”left-side”>

    <div class=”shop-by”>
    <h2>Shop by Brand</h2>

    <div id=”nav” class=” nav-align–{{section.settings.menu_alignment}}
    nav-border–{{ section.settings.nav_border }}
    nav-separator–{{ section.settings.nav_separator }}”>
    <ul id=”menu”>
    {% for link in linklists.shop-by-brand.links %}
    {% if linklists[link.handle] == empty %}
    <li><a href=”{{ link.url }}” {% if link.active %}class=”active”{% endif %}>{{ link.title }}</a></li>
    {% else %}
    <li class=”dropdown”>
    <a {% if link.url == ‘http://’ or link.url == ” or link.url == ‘/’ or link.url == ‘https://’ or link.url == ‘#’ %}
    class=”sub-menu {% if link.active %}active{% endif %} {% for link in linklists[link.handle].links %}{% if link.active %}active{% endif %}{% endfor %} slicknav_item” href
    {% else %}
    href=”{{ link.url }}” class=”sub-menu {% if link.active %}active{% endif %} {% for link in linklists[link.handle].links %}{% if link.active %}active{% endif %}{% endfor %}”
    {% endif %}>
    {{ link.title }}
    </a>
    <ul class=”animated fadeIn”>
    {% for link in linklists[link.handle].links %}
    {% if linklists[link.handle] == empty %}
    <li><a href=”{{ link.url }}”>{{ link.title }}</a></li>
    {% else %}
    <li>
    <a {% if link.url == ‘http://’ or link.url == ” or link.url == ‘/’ or link.url == ‘https://’ or link.url == ‘#’ %}
    class=”sub-menu {% if link.active %}active{% endif %} {% for link in linklists[link.handle].links %}{% if link.active %}active{% endif %}{% endfor %} slicknav_item” href
    {% else %}
    href=”{{ link.url }}” class=”sub-menu {% if link.active %}active{% endif %} {% for link in linklists[link.handle].links %}{% if link.active %}active{% endif %}{% endfor %}”
    {% endif %}>
    {{ link.title }}
    </a>
    <ul class=”animated fadeIn”>
    {% for link in linklists[link.handle].links %}
    <li><a href=”{{ link.url }}”>{{ link.title }}</a></li>
    {% endfor %}
    </ul>
    </li>
    {% endif %}
    {% endfor %}
    </ul>
    </li>
    {% endif %}
    {% endfor %}
    </ul>
    </div>

    </div>

    <div class=”shop-by-space”>
    <h2>Shop by Beauty</h2>

    <div id=”nav” class=” nav-align–{{section.settings.menu_alignment}}
    nav-border–{{ section.settings.nav_border }}
    nav-separator–{{ section.settings.nav_separator }}”>
    <ul id=”menu”>
    {% for link in linklists.shop-by-beauty.links %}
    {% if linklists[link.handle] == empty %}
    <li><a href=”{{ link.url }}” {% if link.active %}class=”active”{% endif %}>{{ link.title }}</a></li>
    {% else %}
    <li class=”dropdown”>
    <a {% if link.url == ‘http://’ or link.url == ” or link.url == ‘/’ or link.url == ‘https://’ or link.url == ‘#’ %}
    class=”sub-menu {% if link.active %}active{% endif %} {% for link in linklists[link.handle].links %}{% if link.active %}active{% endif %}{% endfor %} slicknav_item” href
    {% else %}
    href=”{{ link.url }}” class=”sub-menu {% if link.active %}active{% endif %} {% for link in linklists[link.handle].links %}{% if link.active %}active{% endif %}{% endfor %}”
    {% endif %}>
    {{ link.title }}
    </a>
    <ul class=”animated fadeIn”>
    {% for link in linklists[link.handle].links %}
    {% if linklists[link.handle] == empty %}
    <li><a href=”{{ link.url }}”>{{ link.title }}</a></li>
    {% else %}
    <li>
    <a {% if link.url == ‘http://’ or link.url == ” or link.url == ‘/’ or link.url == ‘https://’ or link.url == ‘#’ %}
    class=”sub-menu {% if link.active %}active{% endif %} {% for link in linklists[link.handle].links %}{% if link.active %}active{% endif %}{% endfor %} slicknav_item” href
    {% else %}
    href=”{{ link.url }}” class=”sub-menu {% if link.active %}active{% endif %} {% for link in linklists[link.handle].links %}{% if link.active %}active{% endif %}{% endfor %}”
    {% endif %}>
    {{ link.title }}
    </a>
    <ul class=”animated fadeIn”>
    {% for link in linklists[link.handle].links %}
    <li><a href=”{{ link.url }}”>{{ link.title }}</a></li>
    {% endfor %}
    </ul>
    </li>
    {% endif %}
    {% endfor %}
    </ul>
    </li>
    {% endif %}
    {% endfor %}
    </ul>
    </div>

    </div>

    </div>

     

14. Now that the menus are added and the side bar is created, we have to add a CLASS to the collection-template.liquid from step 9 above in order to have the side bar on the left and the collection page on the right.
15. On the left under SECTIONS find  collection-template.liquid . Scroll to the very top of the page and add a beginning  <div> tag  like this   <div class=”right-side”>
16. Code should look like this

    <div class=”right-side”>

     

    {% case section.settings.grid %}
    {% when 2 %}
    {%- assign max_height = 530 -%}
    {% when 3 %}
    {%- assign max_height = 345 -%}
    {% when 4 %}
    {%- assign max_height = 250 -%}
    {% when 5 %}
    {%- assign max_height = 195 -%}
    {% endcase %}

    {% if section.settings.layout == ‘grid’ %}
    {%- assign limit = section.settings.grid | times: section.settings.rows -%}
    {% else %}
    {%- assign limit = 16 -%}
    {% endif %}

    {% paginate collection.products by limit %}

    ETC ETC more code ….

17. Be sure to scroll to the very bottom of this page and add the closing </div>
18. SAVE THE PAGE
19. Last Step: Edit the Theme.scss.liquid file Scroll down to ASSETS and click on themes.scss.liquid.  Be sure to backup or copy this file so that you have the original.  To make things easy, I add CSS to the end of this file so that it is easier to find.
20. Add the following code: (you can, of course adjust as needed but this is the basic code)
    
    .left-side {padding:0px 15px;display:block;float:left;width:25%;}
    .right-side {float:left;display:block;width:75%;}
    .shop-by {}
    .shop-by-space {margin-top:30px;}
21. Then for some mobile styling add this code and adjust as need for browsers and device sizes.

    @media screen and (max-width:600px){
    .left-side {padding:0px 15px;display:block;float:none;width:100%;}
    .right-side {float:none;display:block;width:100%;margin-top:40px;}
    .shop-by {}
    .shop-by-space {margin-top:20px;}

    }

22. SAVE THE FILE
23. Lastly, the below screenshot is what you should end up with.

Final Thoughts:
Every theme is different. Some themes have the side bar built in. You can usually find it if you select the CUSTOMIZE BUTTON in the theme. Then click on a collection page on the preview THEN click on the left side of the screen and it should say COLLECTIONS PAGE. If you click on this collections page, there will be options in some themes to show or not show the side bar. If your theme doesn’t have it, then it will need to be addd.

Author: James Byrne is the Owner/Operator of After Dark Grafx and a certified designer/developer for Shopify, Miva, BigCommerce, WooCommerce and more. Over 30 years experience – contact me today at 619-702-7377.