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

Store Design
,

Topic summary

Goal: change Shopify Pipeline theme search results from a list to a product grid consistent with the rest of the site.

Proposed approach: customize the search.liquid template and/or apply CSS to transform the results container into a flex-based grid.

Specific suggestion: add CSS targeting .search__results__products__list to use display:flex, row direction, wrapping, and centered content; adjust child elements (.product-line, .product__inline__image, .product__inline__link) and set image max-width to 300px. An example result screenshot was provided.

Action taken: the CSS was added to the main theme.css file, but it did not change the search results layout on the live site.

Open questions: whether the CSS is loading on the search page, if selectors match the Pipeline markup, or if search.liquid structure needs edits to support a grid. Next steps likely include placing CSS in the correct asset, increasing selector specificity, clearing caches, or modifying search.liquid HTML to use grid-friendly classes.

Context: images are central to understanding the current list layout, desired grid, and the proposed CSS outcome. Status: unresolved; further guidance requested.

Summarized with AI on January 13. AI used: gpt-5.
1

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 my search results page currently looks.jpg
This is how my search results page currently looks.jpg3010×1324 109 KB

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

This is how i want my search results page to look.jpg
This is how i want my search results page to look.jpg3002×1452 240 KB

Thanks!

2

Hi,

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

3

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

Thanks!

4

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.

5

Hi BSS Commerce,

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

Thanks so much! appreciate you helping me out!

6

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:

view - 2023-10-31T165231.454.png
view - 2023-10-31T165231.454.png1635×938 146 KB

Good luck @LDB1987 !

7

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!

8

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