The Search page lists the products that match what a shopper typed in your store search. Its main section is Search products, a grid of product cards. It is required on this page.
How shoppers get there
Shoppers use the search icon in your header. The search block is part of the header, see Header section. Results open on an address such as https://example.com/search?q=shoes.
Where to find it
Open the builder, choose Search page in the Pages tab, and click Search products. In the builder there is no search term, so the preview shows your newest products to help you style the cards.
Section settings
- Section width: Page or Full.
- Columns: 1 to 8 cards per row on desktop.
- Mobile columns: 1 or 2 cards per row on phones.
- Color scheme.
- Gap: the space between cards.
- Padding and Custom CSS.
Blocks
- Product card: how each result looks (image, title, price, rating, buy button). It is required and cannot go inside a group. See Product and collection cards. The same card design is used separately on each page, so you can style search results differently from your collection pages.
- Text (up to 2), Divider (1), and Group (1): add a heading such as "Search results" above or below the grid.
How results are found
- The search looks at product names. A part of a word is enough, and upper or lower case does not matter.
- Only published products show. Hidden products are left out.
- Results are sorted with the newest products first.
- A show more button under the grid loads the next results.
- When nothing matches, or the search box was sent empty, a short message shows in place of the grid.
Common tasks
- Two results per row on phones: set Mobile columns to 2.
- Add a title: add a Text block and drag it above the Product card.
- Open the product instead of adding to cart: change the buy part of the Product card, see the card guide above.
Troubleshooting
- A product does not show in the results: check that its name contains the word searched, that it is published, and that it is not hidden.
- The preview does not match a real search: the builder shows your newest products, not real results. Search on your live store to test.
Tips
- Use clear product names with the words shoppers type, such as the product type and color. The description is not searched.
- Keep the header on the search page so shoppers can search again.
- Searches are sent to your ad pixels as a search event, which helps ad platforms learn what shoppers want.
- Each market has its own search page design, so style it in every market you sell in.