Show Images At The Bottom Of Sidebar

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.


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 you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.