How to customize your search results page

Pipeline has two styles for returning search results, a list style and grid style. In this article, we will demonstrate how to switch from the detailed list style to less detailed grid view.

Here are the two style types:

List style:

Grid style:

The Grid view by default lists 4 items per row on desktop, 3 per row on tablet and 2 per row on mobile. You can customize these values. Here's an example of 3 items per row on desktop:

Example of 2 per row on desktop:

1

How to switch to Grid style

Open this file:

https://myshopify.com/admin/themes/current?key=templates/search.liquid&line=16

(For non-published themes: Open the code editor and in the templates folder, open search.liquid)

Around line 16, change the value from false to true:

Change to:


Save the file.

That's the only change you need to make for switching to grid. If you'd like to return it list style, change it back to false. 

2

How to change items per row in grid

Open this file:

https://myshopify.com/admin/themes/current?key=snippets/search-result-grid.liquid&line=15

(For non-published themes: Open the code editor and in the snippets folder, open search-result-grid.liquid)

Change large--one-quarter (1) for desktop to a value in the reference table.

Change medium--one-third (2) for tablet to a value in the reference table.

Change medium--one-half (3) for mobile to a value in the reference table.

Reference table for Desktop:

1 per row large--one-whole
2 per row large--one-half
3 per row large--one-third
4 per row large--one-quarter
5 per row large--one-fifth

6 per row

large--one-sixth

Reference table for Tablet and Mobile:

1 per row medium--one-whole
2 per row medium--one-half
3 per row medium--one-third
4 per row medium--one-quarter
5 per row medium--one-fifth

6 per row

medium--one-sixth

Save your changes. 

3

How to change the search heading text

The heading text can be changed in the Language Editor:

Open the Language Editor (2) from the Actions (1) button in your Theme Manager:

Use the filter bar (1) and type-in "search" without quotes.

In the results area (2) you can modify the text that's displayed:

Save your changes (top right Save button). 

Still need help? Contact Us Contact Us