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://shopify.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://shopify.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: Change the font size of the result product title

Add the following code to the very bottom of this file on a new line:
assets/style.scss.liquid

Or if you're using Pipeline 4:
assets/theme.scss.liquid

/* -- 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.