Search results
Search results shows the products that match a shopper's search. Shoppers can sort and filter the results, and the section pages through them.
How to add it
- In the Theme Editor, open the Search template.
- Select Add section, then choose Search results.
The package uses this section on the Search template.
Settings
View the section guide .
General
The Tab layout opens on the first type that has results, in the order Products, Articles, Pages.
| Setting | Options | Description |
|---|---|---|
| Search results layout | • Default | Default lists all results together. Tab splits them into Products, Articles and Pages tabs, and a tab shows only when it has results. |
Filtering and sorting
Filters are set up in the Search & Discovery app, as the info text says.
| Setting | Options | Description |
|---|---|---|
| Enable sorting | Adds sorting to the filter panel so shoppers can reorder the results. Sorting shows only when Enable filtering is on. | |
| Enable filtering | Customize filters with the Search & Discovery app. Learn more ( https://help.shopify.com/manual/online-store/search-and-discovery/filters ) | |
| Show product counts | Shows the number of results above the list. It applies to the Default layout only. | |
| Filter layout on desktop | • Sidebar | Sidebar keeps the filters in a column beside the results on desktop. Drawer moves them into a panel opened from the Filter and sort button. |
Layout
| Setting | Options | Description |
|---|---|---|
| Columns on desktop | Number of product cards in each row on desktop. Tablet shows one column fewer when this is above 3. | |
| Column gap | • No gap | Space between the result cards. |
Carousel
| Setting | Options | Description |
|---|---|---|
| Pagination type | • Page number | How shoppers reach more results: numbered page links, a Load more button with a progress count, or automatic loading as they reach the end of the list. |
Appearance
| Setting | Options | Description |
|---|---|---|
| Color scheme | Edit color schemes in Theme settings. |
Section layout
| Setting | Options | Description |
|---|---|---|
| Section width | • Page width | Page width keeps the content inside the standard page container, Wide uses a wider container, and Full width runs edge to edge. |
| Top padding | Space above the section, in pixels. | |
| Bottom padding | Space below the section, in pixels. |
No comments yet