> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Search

> Customize the layout and features of your search results pages.

Search pages display the results of customer searches on your store. You can customize the product grid, filtering, sorting, and pagination options to help customers find what they're looking for more easily.

<img src="https://mintcdn.com/digifist/XQ0pYTxUCzNY2PJg/images/theme/release/sections/main-search/search-overview.png?fit=max&auto=format&n=XQ0pYTxUCzNY2PJg&q=85&s=dcc7c62454fc7fd92681aa842fe6754b" alt="Search results page overview" width="3280" height="2186" data-path="images/theme/release/sections/main-search/search-overview.png" />

## What this section controls

This section manages:

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

<Steps>
  <Step title="Open Theme Customizer">
    From Shopify admin, access the Theme Customizer
  </Step>

  <Step title="Navigate to Search">
    In the left sidebar, find the **Search** section
  </Step>

  <Step title="Configure utilities bar">
    Enable sorting, product count, and filter settings in the **Utilities Bar** tab
  </Step>

  <Step title="Customize product grid">
    Set products per row (3 or 4 columns) and pagination style in the **Product Grid** tab
  </Step>

  <Step title="Adjust layout">
    Set section width, color scheme, and spacing in the **Layout** tab
  </Step>
</Steps>

## Section Settings

<Tabs>
  <Tab title="Utilities Bar">
    Controls how filtering and sorting tools appear on the search results page.

    <img src="https://mintcdn.com/digifist/XQ0pYTxUCzNY2PJg/images/theme/release/sections/main-search/utilities-bar.png?fit=max&auto=format&n=XQ0pYTxUCzNY2PJg&q=85&s=08f12bec48c8cfd493063834933f8a6e" alt="Search utilities bar" width="3280" height="2186" data-path="images/theme/release/sections/main-search/utilities-bar.png" />

    <AccordionGroup>
      <Accordion title="Show top border for utilities bar">
        **Type:** Toggle\
        **Default:** Disabled

        Adds a decorative border above the search utilities bar to visually separate it from content above.

        <Note>This border uses the theme's border color from your color scheme settings.</Note>
      </Accordion>

      <Accordion title="Enable products count">
        **Type:** Toggle\
        **Default:** Enabled

        Displays the number of search results found (e.g., "12 results found").

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

      <Accordion title="Enable sorting">
        **Type:** Toggle\
        **Default:** Enabled

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

        <Tip>Enable sorting to help users find relevant products quickly based on their preferences.</Tip>
      </Accordion>

      <Accordion title="Open filter accordions by default">
        **Type:** Toggle\
        **Default:** Enabled

        Automatically expands all filter accordions in the drawer when customers open filters, making all filter options immediately visible.

        <Note>This setting only affects the drawer view. Collapsed accordions require additional clicks to see filter options.</Note>
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Filters">
    Advanced filtering options for search results.

    <img src="https://mintcdn.com/digifist/XQ0pYTxUCzNY2PJg/images/theme/release/sections/main-search/filters.png?fit=max&auto=format&n=XQ0pYTxUCzNY2PJg&q=85&s=ec8672687d2bde441ee1e0320d510150" alt="Search filters drawer" width="3280" height="2186" data-path="images/theme/release/sections/main-search/filters.png" />

    <AccordionGroup>
      <Accordion title="Filters display">
        **Type:** Dropdown\
        **Options:** Hide, Drawer\
        **Default:** Drawer

        Choose how product filters appear on search results:

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

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

        <Tip>Drawer filters provide cleaner search experience without overwhelming the page with filter options.</Tip>
      </Accordion>

      <Accordion title="Enable range slider for price filter">
        **Type:** Toggle\
        **Default:** Disabled

        Use interactive price range slider instead of checkbox-style price filtering. Allows customers to set custom minimum and maximum price values.

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

        <Tip>Enable range slider for catalogs with wide price ranges (e.g., $10-$500) to give customers more control over price filtering.</Tip>
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Product Grid">
    Defines how search result products are displayed within the grid layout.

    <img src="https://mintcdn.com/digifist/ftB3AaEMznlIEX66/images/theme/release/sections/main-search/grid-settings.png?fit=max&auto=format&n=ftB3AaEMznlIEX66&q=85&s=b7d9dc1a2168c9b816f903263b11d1a0" alt="Search results grid" width="3280" height="2186" data-path="images/theme/release/sections/main-search/grid-settings.png" />

    <AccordionGroup>
      <Accordion title="Products per row">
        **Type:** Dropdown\
        **Options:** 3, 4\
        **Default:** 4

        Number 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

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

      <Accordion title="Products per row for mobile">
        **Type:** Dropdown\
        **Options:** 1, 2\
        **Default:** 2

        Number of products per row on mobile devices.

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

        <Tip>Use 2 columns on mobile for better product visibility and comparison without excessive scrolling.</Tip>
      </Accordion>

      <Accordion title="Products per page">
        **Type:** Range\
        **Range:** 12-50\
        **Default:** 16

        Total number of products loaded before pagination appears.

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

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

      <Accordion title="Pagination style">
        **Type:** Dropdown\
        **Options:** Page numbers, Load more\
        **Default:** Page numbers

        How 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

        <Tip>Load more creates a seamless browsing experience for search results and works well with infinity scroll.</Tip>
      </Accordion>

      <Accordion title="Enable infinity scroll">
        **Type:** Toggle\
        **Default:** Disabled\
        **Availability:** Only when "Load more" pagination is selected

        Automatically loads more search results as the customer scrolls down the page, eliminating the need to click "Load more".

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

        <Warning>Some users prefer traditional pagination for better navigation control. Test with your audience before enabling site-wide.</Warning>
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Layout">
    Control the overall section layout, width, and spacing.

    <img src="https://mintcdn.com/digifist/ftB3AaEMznlIEX66/images/theme/release/sections/main-search/layout.png?fit=max&auto=format&n=ftB3AaEMznlIEX66&q=85&s=952a2e5bebd34504527686252f2529cf" alt="Search layout settings" width="3280" height="2186" data-path="images/theme/release/sections/main-search/layout.png" />

    <AccordionGroup>
      <Accordion title="Section width">
        **Type:** Dropdown\
        **Options:** max-w-page, max-w-fluid\
        **Default:** max-w-page

        Maximum width of the search section:

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

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

      <Accordion title="Color scheme">
        **Type:** Dropdown\
        **Default:** scheme-1

        Color scheme for the search section. Available schemes are defined in **Theme settings > Colors**.

        <Note>Color scheme affects background, text, borders, and button colors throughout the section.</Note>
      </Accordion>

      <Accordion title="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.

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

      <Accordion title="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.
      </Accordion>
    </AccordionGroup>
  </Tab>
</Tabs>

## Common use cases

<Tabs>
  <Tab title="Basic search">
    Standard search configuration for most stores.

    **Configuration:**

    * Enable sorting and product count
    * Drawer filters
    * 4-column desktop grid
    * 2-column mobile grid
    * Page numbers pagination
  </Tab>

  <Tab title="Large catalogs">
    Optimized for stores with extensive inventories and many search results.

    **Configuration:**

    * Range slider for price filtering
    * Infinity scroll enabled
    * 4-column desktop / 2-column mobile
    * 16-24 products per page
    * All sorting options enabled
  </Tab>

  <Tab title="Mobile-optimized">
    Focus on mobile-first search experience.

    **Configuration:**

    * Drawer filters (mobile-friendly)
    * Load more pagination with infinity scroll
    * 2-column mobile grid
    * Sorting enabled
    * Minimal top spacing
  </Tab>

  <Tab title="Minimal search">
    Clean, focused search for curated stores with fewer products.

    **Configuration:**

    * Disable filters entirely
    * Focus on sorting and results count
    * 3-column desktop for larger cards
    * Traditional page numbers
  </Tab>

  <Tab title="Advanced search">
    Full-featured search for complex catalogs.

    **Configuration:**

    * All filters enabled in drawer
    * Range slider for price
    * Sorting enabled
    * Visible product count
    * Open filter accordions by default
  </Tab>

  <Tab title="Fast navigation">
    Optimized for power users who want quick filtering.

    **Configuration:**

    * Infinity scroll enabled
    * Drawer filters with open accordions
    * Quick sort options
    * 4-column grid for maximum results
    * Minimal spacing
  </Tab>
</Tabs>

## Best practices

<CardGroup cols={2}>
  <Card title="Results count visibility" icon="hashtag">
    Always enable product count to show search effectiveness and help customers understand result quality. This is especially important for search pages where query quality varies.
  </Card>

  <Card title="Sorting enablement" icon="arrow-down-a-z">
    Enable sorting to help users find relevant products quickly based on their preferences. Search results benefit from multiple sort options beyond just relevance.
  </Card>

  <Card title="Grid layout optimization" icon="grid">
    Use 4 products per row for optimal search result viewing on desktop. This provides the best balance between product detail and results density.
  </Card>

  <Card title="Filter placement" icon="filter">
    Drawer filters provide cleaner search experience than sidebar without overwhelming the page. Search pages work best with focused, uncluttered layouts.
  </Card>

  <Card title="Mobile optimization" icon="mobile">
    Use 2 columns on mobile for better product visibility and comparison. Single column creates too much scrolling for search results.
  </Card>

  <Card title="Pagination strategy" icon="arrows-rotate">
    Use infinity scroll or load more for large result sets to improve browsing. This keeps customers engaged with search results without interruption.
  </Card>

  <Card title="Price filtering" icon="dollar-sign">
    Enable range slider for catalogs with wide price ranges for better filtering precision. This is especially useful for broad search queries.
  </Card>

  <Card title="Spacing minimization" icon="ruler">
    Keep top spacing minimal (0 or S) to prioritize results and reduce scrolling before customers see search results. Time-to-results is critical for search pages.
  </Card>
</CardGroup>

## Related guides

<CardGroup cols={2}>
  <Card title="Search Banner" icon="search" href="/themes/release/sections/main-search-banner">
    Configure the search page banner section above search results
  </Card>

  <Card title="Collection Pages" icon="layer-group" href="/themes/release/collections/collection-page">
    Similar filtering and layout options for collection pages
  </Card>
</CardGroup>