# Search

This guide describes setting up the Search section.

Use the section to set how search results are displayed on your store’s Search page.

An example Search section on a store's Search page.

The previous image shows a Search section on a store’s Search page. The section’s settings are set to their defaults. Store visitors can enter search terms into the section’s text entry field.

For general guidance with modifying sections, refer to Sections overview, and Shopify help: Sections and blocks (opens new window)

# Set up a search section

To set up a Search section:

  1. Go to Customize theme. At the top of the page, use the dropdown to select Others > Search.

    Note

    The section is available only on the Others > Search page template.

  2. From the side menu, select Search.

    The Search section selected in Theme editor.
  3. Select a setting described in the following table.

Setting name Description
Display results on cards Select the checkbox Display results on cards to show/ hide a card behind search results inside the section. Refer to Shopify help: Cards (opens new window)
Crop images Use the Crop images dropdown to set an image cropping style for the images inside the section. The dropdown options are: No crop, Landscape, Square, and Portrait.
Results per row on mobile Select the radio buttons Results per row on mobile to set the number of search results to display in each row, inside the section. The options are 1 or 2. This setting applies to mobile display devices.
Results per row on desktop Adjust the slider Results per row on desktop to set the number of search results to display in each row, inside the section. The slider ranges from 2 to 5. This setting applies to desktop display devices.
Filtering and sorting > Enable filtering Select the checkbox Enable filtering to show/ hide the product filtering options, with search results, inside the section. If enabled, visitors can select a range of search results by using filtering criteria. Refer to Shopify help: Searching for products and filtering your product list (opens new window) and Shopify help: Add storefront filtering (opens new window)
Filtering and sorting > Customize filters Follow the Customize filters link to open the page Navigation > Collection and search filters on your store’s admin. Use the page to set up custom filters and navigation menus for your store’s collections. Refer to Shopify help: Custom filters (opens new window)
Filtering and sorting > Enable sorting Select the checkbox Enable sorting to show/ hide the product sorting options, with search results, inside the section. If enabled, visitors can arrange the products in the search results by using sorting criteria.
Filtering and sorting > Expand filters by default Select the checkbox Expand filters by default to show/ hide the product search filtering options, by default, inside the section. With this option set to off, to access the product search filtering options, visitors must select the Filter button inside the section.
Filtering and sorting > Show filter counts Select the checkbox Show filter counts to show/ hide a count of the number of products in each filter category, among the search results, inside the section. A count of search results is displayed beside the name of each filter. For example, for search results for a collection containing two products that are in stock, In stock (2) is displayed in the Availability filter area.
Filtering and sorting > Enable color swatch filters For products in the search results that use color variants, select the checkbox Enable color swatch filters to show/ hide the option to filter products by color, inside the section. Refer to Shopify help: Variants (opens new window) and Shopify help: Searching for products and filtering your product list (opens new window)
Filtering and sorting > Learn how to set up swatches Follow the link Learn how to set up swatches to open the Colors Theme settings guide.
Color > Color scheme Use the Color scheme dropdown to set the section’s color scheme to Primary, Secondary, Tertiary or Quaternary. Refer to Colors.
Color > Use gradient for background Select the checkbox Use gradient for background to turn on/ off using a gradient as the section’s background.
Theme settings Select Theme settings to access additional settings for the section. Refer to Section theme settings menu.

# Configure a block within a search section

A default Search section contains nn blocks. To configure a block inside the section:

  1. Go to Customize theme. At the top of the page, use the dropdown to select Others > Search.

  2. From the side menu, expand the Search section menu.

  3. To configure an existing block, select the block from the side menu.

    To add a new block, select Add block, choose a block to add, and then select the block you added.

    The Search's Add block menu in Theme editor.

    Note

    Inside the section, you can add, remove, show/ hide, or move blocks. Refer to Configure blocks inside a section, and Shopify help: Sections and blocks (opens new window)

  4. Apply a block setting described in the following table.

Block name Block description Block setting(s)
Background pattern Displays a stylistic pattern as a background inside the section. Refer to Background pattern.
Background shape Displays a stylistic shape as a background inside the section. Refer to Background shape.
Sticker Overlays the section with a stylized sticker. Refer to Stickers.
Shape divider Displays a stylized separator between the current section and the next/ previous section. Refer to Shape divider.