> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.easystore.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

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

![](https://storage.crisp.chat/users/helpdesk/website/a7804df295230000/04b2ff4d-b495-4158-98e7-f68ba1_1p4xmmp.png)

### 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](https://admin.easystore.co/) > Channels > Online Store > Edit source > **layout/theme.liquid**

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

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/t-2023-10-04t170214118_162q6fs.png)
  
**Step 3 :** Paste code accordingly (Choose to have underline OR without underline)

![](https://storage.crisp.chat/users/helpdesk/website/99fb01ce2b457000/bf3d7976-6a42-428d-8a95-89bb2f_2y9dc7.png)

**With underline**  
Paste code below after **<div class="grid">**  
  
```css
    {% 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) : 

![](https://storage.crisp.chat/users/helpdesk/website/e401381b3d7a0800/611e2ae5-acba-46a9-9e54-881576_1s0t0x.gif)
---
**Without underline**  
 Paste code below after **<div class="grid">** 

```css
{% 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) :

![](https://storage.crisp.chat/users/helpdesk/website/a9c4d77473dd8000/a1b70e8a-08bb-4436-9ad6-336aed_1mskpt2.gif)

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

![](https://storage.crisp.chat/users/helpdesk/website/8bf8dab13f196000/4816efcb-af2d-4725-a177-7a1ebd_1tr2mxh.png)

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

![](https://storage.crisp.chat/users/helpdesk/website/1ba688f8b90e3600/b91eb1a7-8f5e-4a44-a1fb-d9997c_p8471g.png)

**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' %}**

![](https://storage.crisp.chat/users/helpdesk/website/f95bba496bd99800/0ec79b78-606f-4a3f-9ffb-2c73f5_ifrjwm.png)

![](https://storage.crisp.chat/users/helpdesk/website/6b33c368b9119000/457710f2-bcb6-49a5-b623-2d0b3a_c90bh1.png)