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

  1.  Go to EasyStore Control Panel > Themes > ... > Edit HTML/CSS > theme.liquid

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


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

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


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


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


6. Save


Tips: 

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

Did this answer your question?