Adding a navigation side bar to your site

This is a guide for you to have a simple sidebar on the left of your store. No coding knowledge is needed. Simply follow the steps below to add the sidebar to your EasyStore.

In this article:

1. Introduction
2. Steps on how to add navigation side bar

⚠️ Before you begin :

• Above all code editing, you will need to re-edit the code again if you switch to a new theme template
• We do not allow to change or edit the code for the checkout page (which include shipping & payment method) due to security reasons

1. Introduction

Non-traditional navigation styles can be a fun way to break up some of the same old design patterns. The vertical navigation sidebar option is just one of a few ideas.

Benefit of using vertical side navigation bar include:

• Left vertical navigation falls into the long stroke of the F-shape, in which readers look first across the top and then down the left side as a natural reading pattern
• Top-down reading is easy to scan when there is adequate spacing between elements
• Can potentially contain more links in a clean manner

2. Steps on how to add navigation side bar

Step 1 : Go to EasyStore Admin > Channels > Online Store > Edit source > layout/theme.liquid

Step 2 : Look for <main class="wrapper main-content" role="main">  (Around row 140 - 160)  

Step 3 : Paste code accordingly (Choose to have underline OR without underline)

With underline
Paste code below after <div class="grid">

    {% if template != 'product' %}  
 <div class="grid__item medium-down--hide large--one-quarter">  
 <hr>  
       <nav>  
          <b>Category<br></b>      
  {% for link in contents.catalog.links %}  
         <a href="{{link.url}}"><span style="font-size: 0.75em;">{{link.title}}</span></a><br>  
         <hr style="margin: 0;">  
  {% endfor %}  
</nav>  
  </div>  
      {% endif %}  

GIF TUTORIAL (WITH UNDERLINE) : 

Without underline
 Paste code below after <div class="grid"> 

{% if template != 'product' %}  
       <div class="grid__item medium-down--hide large--one-quarter">  
         <hr class="hr--small hr--clear">  
       <nav>  
          <font size="5"> <hr><b>Category<br></b></font>      
  {% for link in contents.catalog.links %}  
         <a href="{{link.url}}">{{link.title}}</a><br>  
  {% endfor %}  
         <hr>  
</nav>  
      </div>  
      {% endif %}  

GIF TUTORIAL (WITHOUT UNDERLINE) :

Step 4 : Look for <div class="grid__item"> which is only one row below

Step 5 : Delete it and replace with <div class="grid__item{% if template != 'product' %} large--three-quarters{% endif %}">

Step 6 : Save and you are done!

📌 Note:

• Hide the sidebar from Homepage (only show in Collection pages)
  

Look for {% if template != 'product' %} > Replace with {% if template == 'collection' %}

• Only show sidebar on Home page
  

Look for {% if template != 'product' %} > Replace with {% if template == 'index' %}

Updated on: 04/10/2023