Minimal Theme - Change Search Page from List to 4 Column Grid

New Member
1 0 0

Does anyone know how to change the search result page from a list into a 4 column grid?

Replies 7 (7)
11 0 1

Hi there,

I am familiar with the requirements you have posted.

My schedule is flexible, I would like to speak to you at your earliest convenience via Voice Call, or chat on Skype.

I am looking forward for your kind attention.



Skype: Robert.cisin

Shopify Partner
146 4 22

Jose I'm pretty sure you can open up your search.liquid file and do some CSS work. You'd probably want to test it on a development store, or a clone of your theme at least. 

I would try playing with this tutorial:


Although I'm pretty certain the minimal theme has a product-column CSS grid which you might be able to borrow. 

Shopify Staff
368 0 42

Hello Jose, Ben here - your Shopify Guru! 

 This will require a little more then just css, you will need to add some cycle statements and switch some classes a bit. Open up your search.liquid file. To do from your admin click Online Store then Themes then use the button that says [ ... ] and select Edit HTML/CSS. Then select the search.liquid template.

In that file find around line 39 where it says <!-- Begin results --> replace everything after that until you see   <!-- End results --> with the following code:

<!-- Begin results -->
  {% for item in search.results %}
  {% cycle 'row-loop': '<div class="row results">', '', '', '' %}
    <div class="product span3 adaptive-grid">
      <div class="image">
        <a href="{{ item.url }}">{{ item.featured_image | product_img_url: 'small' | img_tag }}</a>
      <div class="details">
        <h4 class="title">{{ item.title | highlight: search.terms | link_to: item.url }}</h4>
        {{ item.content | strip_html | truncatewords: 40 | highlight: search.terms }}
  {% cycle 'row-loop2': '', '', '', '</div> <hr class="divider" />' %}
  {% cycle 'clear-product-loop': '', '', '', '<div style="clear:both;"></div>' %}
  {% endfor %}
<!-- End results -->


You may wish to change the image size or shorten the product description. But this should get you well on the way. 

I hope this helps! Feel free to reach out if you have any further questions :)

Ben C - Shopify Guru


Benjamin | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

New Member
3 0 0

Dear Ben,

Hello. I found this thread and your post has been extremely helpful. I now have my search results displaying in a 4-column grid. Questions:

1) How can I also have the search results display the vendor name and price. Or at least the price?

2) how can I maintain the sort functionality box at the top of search results?

My coding skills are non-existent. I wouldn't know what to add to the html you've posted above. Thanks in advance for your help.

Best wishes, Joe

New Member
2 0 1

In the search.liquid file. Find the variable "grid_results" then change the value into to true.

Sample code:

{% assign grid_results = true %}
New Member
1 0 0

Hi @Benjamin_C Benjamin_C,

i can't find the  "<!-- Begin results -->"  in my template.

here attached is my code.  Kindly help.



Screen Shot 2021-07-26 at 06.56.51.png 

13 1 2

This comment from ianV should be noticed more.

Benjamin's response was in 2015, until 2021 Shopify has integrated the ability to turn Search page into grid. By simply find your search.liquid and do as ianV wrote.

I have done successfully, now just need to tweak a bit of css code, but that'd be just fine.