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

Jose_Castellon
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)
Robert_Shopify_
Tourist
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.

Regards,

Robert

Skype: Robert.cisin

sean_orfila
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: 

https://css-tricks.com/guide-responsive-friendly-css-columns/

 

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

Benjamin_C
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>
      <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 }}
      </div>
    </div>
  {% 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 :)

Cheers,
Ben C - Shopify Guru
Support@Shopify.com

 

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

Joseph_Moore2
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

ianV
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 %}
BeB2020
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.

Regards,

Windy

Screen Shot 2021-07-26 at 06.56.51.png 

tinooze
Excursionist
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.