---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/en/artikel/set-up-search-and-the-search-results-page"
locale: en
meta:
"og:title": "Academy Article"
---
[Go to home](https://academy.laioutr.com/en)
- [Storefront features](https://academy.laioutr.com/en/bereiche/storefront-features)
- [Products and categories](https://academy.laioutr.com/en/leitfaeden/products-and-categories)
- [Set up search and the search results page](https://academy.laioutr.com/en/artikel/set-up-search-and-the-search-results-page)
# Set up search and the search results page
Search consists of the search field with suggestions in the shop header and the search results page with search term, result count, filters and product grid. Suggestions and results come from the search or commerce app through Orchestr, so search quality depends on the connected search service.
## Before you start
- Plan
- Laioutr Commerce plan
- Role
- Editor or Admin in the project
- Duration
- 6 min
### Prerequisites
- Commerce app with search or a dedicated search app installed
- Shop header available as a global section
Last reviewed on October 15, 2026
Search in Laioutr UI has two parts. **Search Auto-Suggest** sits in the shop header and is included there once for all pages. While typing, suggestions appear in an overlay, the typed part is shown in bold, and arrow keys, Enter and Escape work without a mouse.
Pressing Enter opens the **search results page**. At the top, the **Search Result Hero** repeats the search term and shows the result count. Below follow the Filter Bar, Product Listing Grid and Load More, the same building blocks as on category pages. If the search finds nothing, the page should not be a dead end but show recommendations, for example.
Laioutr itself does not search products. Suggestions, results, filters and sorting come from the app that provides search: the shop system's standard search through the commerce app, a search app such as Battery Included or Nimstrata for Google Retail, or the AI Search & Discovery add-on. The interface stays the same when the search service changes.
## Step by step
1. 1 ### Step 1: Check the search app
In Cockpit, check under **Apps** which app provides search and whether its connection is active.
2. 2 ### Step 2: Check the header
In **Studio**, open the shop header (global section) and check that the search field is visible. It is included once in the header and applies to all pages.
3. 3 ### Step 3: Open the search results page
Select the search results page in the page list and check that the Search Result Hero, Filter Bar and Product Listing Grid sit in the body in this order.
4. 4 ### Step 4: Plan for no results
Add content to the page that helps when there are no results, for example a Product Slider with popular products.
5. 5 ### Step 5: Search in the preview
Type a term in the preview, check the suggestions and press Enter to open the results page. Then test a term without results.
6. 6 ### Step 6: Save and publish
Save with **Save** and publish with **Publish**.
## Check the result
Enter a known product name in the storefront: suggestions appear while typing, after Enter the results page shows the search term with the result count, and filters narrow down the results. A term without results does not lead to an empty page.
## Frequently asked questions
Why does search not find products that exist in the shop?
Results come entirely from the search service of the installed app. Indexing, synonyms and typo tolerance are configured there, not in Studio.
Can the search service be changed without rebuilding the pages?
Yes. The search field and results page get their data through Orchestr. After switching the app, the sections stay the same; mainly the filters and sort options of the new service need checking.
Where is it configured which suggestions appear?
In the search service or app. The search field shows whatever the app returns as suggestions.
## Related
- [Set up product listings with filters and sorting](https://academy.laioutr.com/en/artikel/set-up-product-listings-with-filters-and-sorting)6 min
A product listing is built in Studio from the Product Listing Grid, the Filter Bar and the sort selector; products, filters and sort options come from the connected commerce app through Orchestr. Which filters appear depends on what the backend provides.
- [Set up shop navigation and footer](https://academy.laioutr.com/en/artikel/set-up-shop-navigation-and-footer)10 min
Header Shop, Mega Menu or Menu Side by Side, Top Bar and Footer form the navigation of a storefront and are usually maintained as global sections. In Studio, menu items, search, service links, contact details and footer columns are set up once and adapted per language.
- [Battery Included: connect search and recommendations](https://academy.laioutr.com/en/apps/battery-included-search-and-recommendations)8 min
The Battery Included app brings full-text search, search suggestions and product recommendations from a BatteryIncluded collection into the storefront. It needs the collection ID, an API key and a commerce app such as Shopify for product data.
- [Nimstrata: AI search and recommendations via Google Retail API](https://academy.laioutr.com/en/apps/nimstrata-ai-search-and-recommendations-google-retail)10 min
The Nimstrata app connects the storefront to the Google Retail API through Retail Connect: AI-powered search, category listings, search suggestions, recommendations and event tracking. It requires a Nimstrata project with a catalogue and the Shopify app in the same project.
## [Products and categories](https://academy.laioutr.com/en/leitfaeden/products-and-categories)
Search this guide
1. [Set up product listings with filters and sorting](https://academy.laioutr.com/en/artikel/set-up-product-listings-with-filters-and-sorting)6 min
2. [Design the product detail page and spec sheet](https://academy.laioutr.com/en/artikel/design-the-product-detail-page-and-spec-sheet)7 min
3. [Use product tiles and product sliders](https://academy.laioutr.com/en/artikel/use-product-tiles-and-product-sliders)5 min
4. [Build brand pages and a brand overview](https://academy.laioutr.com/en/artikel/build-brand-pages-and-a-brand-overview)6 min
5. [Set up search and the search results page](https://academy.laioutr.com/en/artikel/set-up-search-and-the-search-results-page)6 min
## Structured Data
```json
{
"@context": "https://schema.org",
"@graph": [
{
"@id": "https://academy.laioutr.com/#website",
"@type": "WebSite",
"inLanguage": "en",
"name": "Default",
"url": "https://academy.laioutr.com/",
"translationOfWork": {
"@id": "https://academy.laioutr.com/#website"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/set-up-search-and-the-search-results-page#webpage",
"name": "Academy Article",
"url": "https://academy.laioutr.com/en/artikel/set-up-search-and-the-search-results-page",
"@type": [
"WebPage",
"FAQPage"
],
"breadcrumb": {
"@id": "https://academy.laioutr.com/en/artikel/set-up-search-and-the-search-results-page#breadcrumb"
},
"isPartOf": {
"@id": "https://academy.laioutr.com/#website"
},
"mainEntity": [
{
"@id": "https://academy.laioutr.com/en/artikel/set-up-search-and-the-search-results-page#/schema/question/1"
},
{
"@id": "https://academy.laioutr.com/en/artikel/set-up-search-and-the-search-results-page#/schema/question/2"
},
{
"@id": "https://academy.laioutr.com/en/artikel/set-up-search-and-the-search-results-page#/schema/question/3"
}
],
"potentialAction": [
{
"@type": "ReadAction",
"target": [
"https://academy.laioutr.com/en/artikel/set-up-search-and-the-search-results-page"
]
}
]
},
{
"@id": "https://academy.laioutr.com/en/artikel/set-up-search-and-the-search-results-page#breadcrumb",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"name": "Home",
"item": "https://academy.laioutr.com/en",
"position": 1
},
{
"@type": "ListItem",
"name": "Storefront features",
"item": "https://academy.laioutr.com/en/bereiche/storefront-features",
"position": 2
},
{
"@type": "ListItem",
"name": "Products and categories",
"item": "https://academy.laioutr.com/en/leitfaeden/products-and-categories",
"position": 3
},
{
"@type": "ListItem",
"name": "Set up search and the search results page",
"item": "https://academy.laioutr.com/en/artikel/set-up-search-and-the-search-results-page",
"position": 4
}
]
},
{
"@id": "https://academy.laioutr.com/en/artikel/set-up-search-and-the-search-results-page#/schema/question/1",
"@type": "Question",
"inLanguage": "en",
"name": "Why does search not find products that exist in the shop?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Results come entirely from the search service of the installed app. Indexing, synonyms and typo tolerance are configured there, not in Studio.
"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/set-up-search-and-the-search-results-page#/schema/question/2",
"@type": "Question",
"inLanguage": "en",
"name": "Can the search service be changed without rebuilding the pages?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes. The search field and results page get their data through Orchestr. After switching the app, the sections stay the same; mainly the filters and sort options of the new service need checking.
"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/set-up-search-and-the-search-results-page#/schema/question/3",
"@type": "Question",
"inLanguage": "en",
"name": "Where is it configured which suggestions appear?",
"acceptedAnswer": {
"@type": "Answer",
"text": "In the search service or app. The search field shows whatever the app returns as suggestions.
"
}
}
]
}
```