---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/en/artikel/page-type-recipes-home-listing-detail-content"
locale: en
meta:
"og:title": "Academy Article"
---
[Go to home](https://academy.laioutr.com/en)
- [Studio](https://academy.laioutr.com/en/bereiche/studio)
- [Building pages](https://academy.laioutr.com/en/leitfaeden/building-pages)
- [Page type recipes: home, product listing, product detail, content](https://academy.laioutr.com/en/artikel/page-type-recipes-home-listing-detail-content)
# Page type recipes: home, product listing, product detail, content
The main page types have proven recipes: which path applies, which data the page loads and which sections it typically contains. This overview helps to build a complete and consistent storefront.
## Before you start
- Plan
- All plans
- Role
- Member with access to the project and permission to edit project content
- Duration
- 6 min
### Prerequisites
- Commerce app connected for product and category pages
Last reviewed on October 15, 2026
Every page type brings a URL shape and, for dynamic types, a **page query** that loads the matching data from the path parameter. Sections bound to this query follow the product or category being viewed. The recipes below list path, data and typical sections per type.
Three ground rules apply to all types:
- Use header and footer as global sections so navigation and legal links are the same everywhere.
- Dynamic types exist once per project. Different presentations are created as a variant, not as a second page.
- Prefer sections tagged with the page type, such as **Product Listing Page** or **Product Detail Page**. They are prepared for the page query.
The exact paths and available types depend on the installed apps. Paths can be adjusted per page as long as required parameters such as `:slug` are kept.
## Step by step
1. 1 ### Step 1: Home
Path `/`, once per project. Typical: hero or slider, category teasers, product slider with new arrivals or bestsellers, USPs, testimonials and newsletter.
2. 2 ### Step 2: Product listing
Dynamic, default path `/categories/:slug+`, page query for the category. Typical: category header, product list with filters, sorting and pagination, followed by an SEO text.
3. 3 ### Step 3: Product detail
Dynamic, default path `/products/:slug+`, page query for the product. Typical: product detail section with gallery, basic info, price and add-to-cart button, then description, related products and reviews. Check different products in the preview via **Preview Data**.
4. 4 ### Step 4: Search
Path `/search`, the search term comes as a parameter. Typical: search result list with filters and a message for empty results.
5. 5 ### Step 5: Content and landing page
Static, as many pages as needed. Content Page under `/pages/:slug+` for about us, service or guides, Landing Page with a freely chosen path for campaigns. Typical: hero, image and text, FAQ, call to action.
## Frequently asked questions
Why does pagination show up as ?p=2 in the URL?
The built-in listing pages use root queries by default. Pagination therefore shows up as short parameters such as `?p=2` in the URL.
Can the product detail page path be changed?
Yes, for example to `/shop/product/:slug+`. The `:slug` parameter must stay in the path.
What about blog and location pages?
There are page types for these too, such as blog posts, blog overviews, the location finder and single locations. They follow the same principle of path, page query and matching sections.
## Related
- [Create pages and variants from page types](https://academy.laioutr.com/en/artikel/create-pages-and-variants-from-page-types)6 min
Every page in Studio is based on a page type such as Home, Product Detail or Landing Page. When adding a page, the team picks the type, checks name and URL path, and adds further variants of the same page when needed.
- [Fill sections with shop data](https://academy.laioutr.com/en/artikel/fill-sections-with-shop-data)7 min
Sections with a data field show products, categories or posts from connected systems. The team picks a data query in Studio, sets input, limit and sorting, and Orchestr delivers the data at render time.
- [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.
- [Design the product detail page and spec sheet](https://academy.laioutr.com/en/artikel/design-the-product-detail-page-and-spec-sheet)7 min
In Studio, the product detail page is one template for all products: the image gallery on the left, the buy box made of blocks such as title, price, variant selection and add to cart on the right, and an optional spec sheet below. Images, variants, prices and specifications come from the commerce app through Orchestr.
- [Set up search and the search results page](https://academy.laioutr.com/en/artikel/set-up-search-and-the-search-results-page)6 min
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.
## Learn it in a lesson
- [Apply page type recipes](https://academy.laioutr.com/en/lektionen/ux-designer-page-type-recipes)12 min
## [Building pages](https://academy.laioutr.com/en/leitfaeden/building-pages)
Search this guide
1. [Studio at a glance](https://academy.laioutr.com/en/artikel/studio-at-a-glance)5 min
2. [Create pages and variants from page types](https://academy.laioutr.com/en/artikel/create-pages-and-variants-from-page-types)6 min
3. [Add and arrange sections and blocks](https://academy.laioutr.com/en/artikel/add-and-arrange-sections-and-blocks)7 min
4. [Find sections: library, Growth Kits, tags and search](https://academy.laioutr.com/en/artikel/find-sections-library-growth-kits-tags-search)4 min
5. [Global sections for header, footer and recurring content](https://academy.laioutr.com/en/artikel/global-sections-for-header-footer-and-recurring-content)5 min
6. [Fill sections with shop data](https://academy.laioutr.com/en/artikel/fill-sections-with-shop-data)7 min
7. [Build a landing page from existing sections](https://academy.laioutr.com/en/artikel/build-a-landing-page-from-existing-sections)10 min
8. [Run campaigns with page variants](https://academy.laioutr.com/en/artikel/run-campaigns-with-page-variants)7 min
9. [Page type recipes: home, product listing, product detail, content](https://academy.laioutr.com/en/artikel/page-type-recipes-home-listing-detail-content)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/page-type-recipes-home-listing-detail-content#webpage",
"name": "Academy Article",
"url": "https://academy.laioutr.com/en/artikel/page-type-recipes-home-listing-detail-content",
"@type": [
"WebPage",
"FAQPage"
],
"breadcrumb": {
"@id": "https://academy.laioutr.com/en/artikel/page-type-recipes-home-listing-detail-content#breadcrumb"
},
"isPartOf": {
"@id": "https://academy.laioutr.com/#website"
},
"mainEntity": [
{
"@id": "https://academy.laioutr.com/en/artikel/page-type-recipes-home-listing-detail-content#/schema/question/1"
},
{
"@id": "https://academy.laioutr.com/en/artikel/page-type-recipes-home-listing-detail-content#/schema/question/2"
},
{
"@id": "https://academy.laioutr.com/en/artikel/page-type-recipes-home-listing-detail-content#/schema/question/3"
}
],
"potentialAction": [
{
"@type": "ReadAction",
"target": [
"https://academy.laioutr.com/en/artikel/page-type-recipes-home-listing-detail-content"
]
}
]
},
{
"@id": "https://academy.laioutr.com/en/artikel/page-type-recipes-home-listing-detail-content#breadcrumb",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"name": "Home",
"item": "https://academy.laioutr.com/en",
"position": 1
},
{
"@type": "ListItem",
"name": "Studio",
"item": "https://academy.laioutr.com/en/bereiche/studio",
"position": 2
},
{
"@type": "ListItem",
"name": "Building pages",
"item": "https://academy.laioutr.com/en/leitfaeden/building-pages",
"position": 3
},
{
"@type": "ListItem",
"name": "Page type recipes: home, product listing, product detail, content",
"item": "https://academy.laioutr.com/en/artikel/page-type-recipes-home-listing-detail-content",
"position": 4
}
]
},
{
"@id": "https://academy.laioutr.com/en/artikel/page-type-recipes-home-listing-detail-content#/schema/question/1",
"@type": "Question",
"inLanguage": "en",
"name": "Why does pagination show up as ?p=2 in the URL?",
"acceptedAnswer": {
"@type": "Answer",
"text": "The built-in listing pages use root queries by default. Pagination therefore shows up as short parameters such as ?p=2 in the URL.
"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/page-type-recipes-home-listing-detail-content#/schema/question/2",
"@type": "Question",
"inLanguage": "en",
"name": "Can the product detail page path be changed?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes, for example to /shop/product/:slug+. The :slug parameter must stay in the path.
"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/page-type-recipes-home-listing-detail-content#/schema/question/3",
"@type": "Question",
"inLanguage": "en",
"name": "What about blog and location pages?",
"acceptedAnswer": {
"@type": "Answer",
"text": "There are page types for these too, such as blog posts, blog overviews, the location finder and single locations. They follow the same principle of path, page query and matching sections.
"
}
}
]
}
```