Change shop (debut theme) search result from listing to grid

[Zoeyjewel]

Hi Shopify Community,

I’m using the Debut theme for my store, and I would like to change the layout of my search results from the default listing style to a grid view. I don’t personally know how to code, and I’ve tried looking for an option in the theme settings, but I haven’t been able to find anything related to changing the search result layout.

Can anyone provide a step-by-step guide or any code that I can implement to switch the search results to grid view? 

I would really appreciate any help or advice!

Thanks in advance!

[suyash1]

@Zoeyjewel Can you please share your page link?

[Zoeyjewel]

Thank you for your response! Here is the page link:

https://jadeddesignnyc.com/search?q=rings&options%5Bprefix%5D=last

[suyash1]

@Zoeyjewel 

please add this css to the very end of your theme.css file and check,
Shopify Admin -> Online Store ->Theme -> Edit code -> theme.css

ul.page-width.list-view-items {display: flex; flex-wrap: wrap;}
li.list-view-item{flex-basis: 50%;}
.list-view-item__link{display: flex;    flex-wrap: wrap;    flex-direction: column;}
.list-view-item__price-column{width: 100%;  text-align: left;}
.list-view-item__price-column .price {align-items: flex-start;}

[Zoeyjewel]

I've added the code you provided to the file, and the search results are now displayed in a grid layout. However, the grid appears quite small. (Please take a look)  Could you please guide me on how to make the grid items larger, or if there's an option to display two or three products per row?

Thank you very much. I really appreciate it!

[suyash1]

@Zoeyjewel  - add this css to make 3 per row on desktop and 2 on mobile

li.list-view-item{flex-basis: 33.33%;}
list-view-item__image {max-height: 100%;}

@media screen and (max-width:749px){
li.list-view-item{flex-basis: 50%;}
}

[Zoeyjewel]

Thank you! Is it also possible to make the grid size a lot bigger?

[suyash1]

@Zoeyjewel add this and check

.list-view-item__image-column{width: 100%;}
.list-view-item__image{max-height: 100%;}

[Zoeyjewel]

It's slightly larger now, but there are still very big gaps between the items. Is it possible to increase the grid size even further? Thanks!

[suyash1]

@Zoeyjewel  - remove this line and add code below, but few images may look weird due to stretching

remove this

.list-view-item__image{max-height: 100%;}

add this

.list-view-item__image {max-height: 100%; width: 90%; margin: 0 auto;}

[Zoeyjewel]

It looks great now! I don’t see any items being stretched out, and the size of each item is much better. While I'd love for the padding around the items to be even more minimal, it's looking pretty good overall!

Thanks for being so helpful!!!

[suyash1 · Accepted solution]

@Zoeyjewel  you can change 90% of the above line to 100% and check and also add this line to reduce spacing, adjust number as per your need

.list-view-item__image-wrapper {margin-right: 15px;}

[Zoeyjewel]

It's perfect now! Thank you for all the help! You are awesome!!!