I want to change the layout of my search results Page - Pipeline Theme

[LDB1987]

Hi All,

I need some help switching my search results template. It currently shows as a list, but I want to display my search results as a grid, the same way the rest of the website is displayed.

Images attached for reference.

This is how my search results page currently looks:

This is how I want my search results page to look:

Thanks!

[zaczee]

Hi,

We need to customize the search.liquid to make the result in grid format.

[LDB1987]

Do you know what I need to edit in that code?

Thanks!

[BSS-Commerce]

Hi @LDB1987 ,
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

[LDB1987]

Hi BSS Commerce,

The link to the store is here > https://mangosurfing.com/

Thanks so much! appreciate you helping me out!

[BSS-Commerce]

Hi @LDB1987 ,

You can insert the css as follows:

.search__results__products__list {
    display: flex;
    flex-direction: row !important;
    justify-content: space-between;
    flex-wrap: wrap; 
}

.search__results__products__list .product-line {
    text-align: center;
}

.search__results__products__list .product__inline__image {
    width: 100%;
    display: flex;
    justify-content: center;
}

.search__results__products__list .product__inline__link {
    display: flex;
    flex-direction: column !important;
}
.search__results__products__list .product__inline__image img {
    max-width: 300px;
}

Result:

Good luck @LDB1987 !

[LDB1987]

Thanks so much for looking into this, I have added that CSS to my main CSS file, is that correct, it doesn’t look to have implemented the change on my side..

Appreciate the help!

[LDB1987]

Hi Guys, appreciate the help, but this code change didn’t work, I tried adding it to the bottom of my theme.css file.

Thanks
Tom