For the complete documentation index, see llms.txt. This page is also available as Markdown.

Search

Customize the search results page: product cards, blog cards, filtering and sorting.


The Search results page appears when shoppers submit a search. It shows a search field and the matching products, blog articles and pages, 24 per page. You can choose how product and blog cards look, and turn filtering and sorting on or off.

The search window that opens from the search icon in the header is a separate section, the Search modal. Live results, quick links and popular searches are set there. See Search modal.

1. Open the Search results settings:

Steps:

  • In the theme editor, use the page selector at the top to open Others > Search.

  • Under Template, click Search results to open its settings.

  • Click Save.

Page selector, Others
Page selector, Others, Search
Search template with the Search results section

2. Section settings

Search results settings and results page
  • Product card

    • Image ratio: Adapt to image / Portrait / Square.

    • Show second image on hover: Shows the product's second image when shoppers hover over the card.

    • Add image padding: Adds space around product images so they aren't cropped.

    • Show image border: Adds a border around product images.

    • Show vendor: Shows the product vendor on the card.

    • Show product rating: Shows the product's star rating. You need a product rating app for this.

  • Filtering and sorting

    • Enable filtering: Shows filters above the results, when the search has filters to offer. Use the Customize filters link under the setting to manage them in your Shopify admin.

    • Enable sorting: Shows a Sort by menu above the results.

  • Blog card

    • Show date: Shows the publish date on article results.

    • Show author: Shows the author on article results.

3. Tips

  • To add more content to the page, click Add section under Template. See Sections available.

  • If you turn off both Enable filtering and Enable sorting, the result count shows under the search field instead.

  • When shoppers press Enter in the Search modal, they land on this page.

Last updated

Was this helpful?