Show images at the bottom of sidebar (Old themes only)

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

⚠️ Kindly take note :
Above all code editing specifically for old themes (Candy, WAVE, LUCKY, X-Force, Mine Style, Dreams Bedding, The Summer, Advanture Camping, Happy Kitchen, and Flower & Tea House only)
We do not allow to change or edit the code for the checkout page (which include shipping & payment method) due to security reasons

Go to Admin > Channels > Online Store > Edit Source > layout/theme.liquid

💡 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

If you already have sidebar to show collections

Step 1 : 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---------------------------------------------------
        

If you have yet added any sidebar code

Step 1 : 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---------------------------------------------------


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



Step 3 : Remove it and replace with the code below

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



Save and you're all done! 😍

Updated on: 11/10/2023