This is a guide for you to have a simple sidebar with images 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 Admin > Themes > Edit Source > layout/theme.liquid


2.Tips: 

  • <br> is to insert a single line break
  • Replace "LINK TO REDIRECT" with the link you want visitors to link to
  • Replace "IMAGE URL" with the image link of your images
  • Change the width & height based on your image size

2.1 If you already have sidebar to show collections

Copy the code below, look for <main class="wrapper main-content" role="main">  (Around row 140 - 160), and paste code before </nav>

--------------------------------------------------Copy code here---------------------------------------------------<br><br>
         <b>As seen on</b>
 
<p style="text-align: center;"><a href="LINK TO REDIRECT" target="_blank"><img class="fr-dib" src="IMAGE URL" style="width: 170px;height: 60px;"></a></p>
<p style="text-align: center;"><a href="LINK TO REDIRECT" target="_blank"><img class="fr-dib" src="IMAGE URL" style="width: 170px;height: 60px;"></a></p> 

--------------------------------------------------Copy code here---------------------------------------------------
        

2.2 If you have yet added any sidebar code

Copy the code below, look for <main class="wrapper main-content" role="main"> (Around row 140 - 160), and paste the code after <div class="grid">  

--------------------------------------------------Copy code here---------------------------------------------------

{% if template != 'product' %}
       <div class="grid__item medium-down--hide large--one-quarter">
         <hr class="hr--small hr--clear">
        <br><br>
         <b>As seen on</b>
 
<p style="text-align: center;"><a href="LINK TO REDIRECT" target="_blank"><img class="fr-dib" src="IMAGE URL" style="width: 170px;height: 60px;"></a></p>
<p style="text-align: center;"><a href="LINK TO REDIRECT" target="_blank"><img class="fr-dib" src="IMAGE URL" style="width: 170px;height: 60px;"></a></p> 

</div>
      {% endif %}
--------------------------------------------------Copy code here---------------------------------------------------


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

2.2.2 Remove it and replace with the code below

<div class="grid__item{% if template != 'product' %} large--three-quarters{% endif %}">

3. Save

Did this answer your question?