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:


How to switch to Grid style

Open this file:

(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. 


How to change items per row in grid

Open this file:

(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


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


Save your changes. 


Change the font size of the result product title

Add the following code to the very bottom of this file on a new line:

Or if you're using Pipeline 4:  

/* -- code to change search result title font size -- */
p.h5--body a, p.h3--body a { font-size: 0.9em; }
/* - end - */

Save the file.

Using 0.9em; makes the title smaller. You can continue reducing by changing to 0.8em; or even 0.7em; To make the title larger try 1.1em; or 1.2em; and so forth.


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).