I want to change my search results layout

Store Design
1

I want to change my search results page from a list to a grid. I am using theme: **Pipeline 7.1.2.

My current search results look like this:**

Screenshot 2025-12-05 at 15.34.41
Screenshot 2025-12-05 at 15.34.412988×1326 130 KB

I want them to look the same as my other collections in a grid.

Screenshot 2025-12-05 at 15.35.10
Screenshot 2025-12-05 at 15.35.102978×1392 402 KB

Any help on this would be hugely appreciated. If you need any other information to help, please let me know.

Thanks Guys
Tom

2

Your theme did not support Grid mode but you can do that by changing the theme code

3

Yes code changes needed. I just need to know what code and where.

Thanks

4

Online Store → Themes → Edit Code

Open:

sections/search-results.liquid
5

It’s a lot more complex than opening a file. Hence why I am reaching out to the community. Pipeline doesn’t even have that file, so not helpful at all.

6

The best option is to change your theme, do you need help doing that?

7

Hi @tomfrankham

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

8

Hi There,

Thanks for the response, the url is > https://mangosurfing.com/

Thank you
Tom

9

Hi @tomfrankham :waving_hand: always check the settings first.

Even more than that if there is NO existing layout code, snippet, take takes in a set of products then it can be an advanced theme customization requiring file modifications waaaay beyond the scope of the forums to convert code built for collections to use search concepts instead.

:bomb: Also be careful in that the dynamic search results in the masthead rely on the list layout and styles, so slapdash CSS band-aids can just cause other issues instead of doing it properly.

If you must try and DIY you can burn time trying to generate a custom section in the theme editor using “AI” and use that instead of the search-results list.
Otherwise hire a developer for drastic changes in custom layouts.

Or you can reach out to me for customization services.
CLICK my profile-pic or visit my profile on the forums
ALWAYS include context in new communications, e.g. reference urls, posts urls, etc

10

@tomfrankham hello, please open search page in customize settings and check if you have an option to change list to grid, if no then we can use css to do it the way you want

11

Hi @tomfrankham

To change your search results from list to grid view in Pipeline 7.1.2, you will be editing the following two files: The search.liquid or search.json.liquid template The snippet/file that you use to render individual results (typically, this is product-card.liquid).

Wrap the results in a grid container:

{% for item in search.results %}

{% if item.object_type == ‘product’ %}

{% include ‘product-card’, product: item %}

{% endif %}

{% endfor %}

Add grid styling in your CSS (or use your collection grid classes):

.grid–uniform {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

gap: 20px;

Ensure the product-card snippet matches your collection styling so product image, title and price are displayed exactly the same way. This will allow the search result to be in grid like your collections without affecting other functionalities.