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.

4

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