Search

​

What this section controls

• Search results product grid - Display search results in an organized grid layout
• Filtering system - Control filter display (drawer only for search pages)
• Sorting dropdown - Enable sorting options for search results
• Results count - Display number of matching search results
• Pagination - Control pagination style, load more button, and infinity scroll
• Section layout - Adjust section width, color scheme, and spacing

​

Getting started

​

Section Settings

• Utilities Bar
• Filters
• Product Grid
• Layout

Controls how filtering and sorting tools appear on the search results page.

Show top border for utilities bar

Type: Toggle
Default: DisabledAdds a decorative border above the search utilities bar to visually separate it from content above.

This border uses the theme’s border color from your color scheme settings.

Enable products count

Type: Toggle
Default: EnabledDisplays the number of search results found (e.g., “12 results found”).

Product count is especially important on search pages to show customers how many results matched their query and indicates search effectiveness.

Enable sorting

Type: Toggle
Default: EnabledShows sorting dropdown for search results, allowing customers to sort by:

• Relevance (default)
• Best selling
• Alphabetically (A-Z)
• Alphabetically (Z-A)
• Price (low to high)
• Price (high to low)
• Date (old to new)
• Date (new to old)

Enable sorting to help users find relevant products quickly based on their preferences.

Open filter accordions by default

Type: Toggle
Default: EnabledAutomatically expands all filter accordions in the drawer when customers open filters, making all filter options immediately visible.

This setting only affects the drawer view. Collapsed accordions require additional clicks to see filter options.

Advanced filtering options for search results.

Filters display

Type: Dropdown
Options: Hide, Drawer
Default: DrawerChoose how product filters appear on search results:

• Hide - Removes all product filtering functionality
• Drawer - Filters appear in a slide-out overlay panel

Search pages only support drawer or hidden filters. Sidebar option is not available for search results to maintain a cleaner layout focused on search results.

Drawer filters provide cleaner search experience without overwhelming the page with filter options.

Enable range slider for price filter

Type: Toggle
Default: DisabledUse interactive price range slider instead of checkbox-style price filtering. Allows customers to set custom minimum and maximum price values.

Range slider requires JavaScript and may not work with all third-party filter apps. Test thoroughly before enabling on live stores.

Enable range slider for catalogs with wide price ranges (e.g., $10-$500) to give customers more control over price filtering.

Defines how search result products are displayed within the grid layout.

Products per row

Type: Dropdown
Options: 3, 4
Default: 4Number of product cards displayed per row on desktop screens.

• 3 - Larger product cards with more detail visible
• 4 - More results visible at once, efficient browsing

Use 4 products per row for optimal search result viewing - it provides the best balance between product detail and results density.

Products per row for mobile

Type: Dropdown
Options: 1, 2
Default: 2Number of products per row on mobile devices.

• 1 - Single column layout, maximum product detail
• 2 - Two columns, balance between detail and variety

Use 2 columns on mobile for better product visibility and comparison without excessive scrolling.

Products per page

Type: Range
Range: 12-50
Default: 16Total number of products loaded before pagination appears.

The actual product count may adjust slightly to maintain grid consistency when text cards or other blocks are inserted.

For search results with many matches, use lower values (12-16) to improve page load speed and help customers refine their search.

Pagination style

Type: Dropdown
Options: Page numbers, Load more
Default: Page numbersHow customers navigate through multiple pages of search results:

• Page numbers - Traditional numbered pagination (1, 2, 3…)
• Load more - Single button that loads additional results inline

Load more creates a seamless browsing experience for search results and works well with infinity scroll.

Enable infinity scroll

Type: Toggle
Default: Disabled
Availability: Only when “Load more” pagination is selectedAutomatically loads more search results as the customer scrolls down the page, eliminating the need to click “Load more”.

Infinity scroll works well for mobile search experiences with many results. It reduces friction and keeps customers engaged with search results.

Some users prefer traditional pagination for better navigation control. Test with your audience before enabling site-wide.

Control the overall section layout, width, and spacing.

Section width

Type: Dropdown
Options: max-w-page, max-w-fluid
Default: max-w-pageMaximum width of the search section:

• max-w-page - Standard container matching theme’s page width
• max-w-fluid - Wider container utilizing more screen space

Use max-w-page for visual consistency with other pages. Use max-w-fluid for large search result grids where maximum visibility is needed.

Color scheme

Type: Dropdown
Default: scheme-1Color scheme for the search section. Available schemes are defined in Theme settings > Colors.

Color scheme affects background, text, borders, and button colors throughout the section.

Spacing top

Type: Dropdown
Options: No (0), S (1), M (2), L (4), XL (6)
Default: No (0)Padding above the search section, controlling vertical space from the previous section.

Keep top spacing minimal (0 or S) to prioritize search results and reduce scrolling before customers see results.

Spacing bottom

Type: Dropdown
Options: No (0), S (1), M (2), L (4), XL (6)
Default: M (2)Padding below the search section, controlling vertical space to the next section.

​

Common use cases

​

Best practices

​

Related guides