---
title: "Academy Lesson"
canonical_url: "https://academy.laioutr.com/en/lektionen/ux-designer-page-type-recipes"
locale: en
meta:
  "og:title": "Academy Lesson"
---

[Go to home](https://academy.laioutr.com/en)

- [Agentic UX Designer](https://academy.laioutr.com/en/lernpfade/ux-designer-learning-path)

- [Apply page type recipes](https://academy.laioutr.com/en/lektionen/ux-designer-page-type-recipes)

Page type recipes: home, PDP, PLP, content

# Apply page type recipes

12 min

Home, product listing, product detail and content page each have proven sequences of sections. This lesson shows the recipes, which sections are required and which are optional, and how a recipe is adapted to brand and assortment without breaking the user journey.

## Key takeaways

- Every page type has a recipe with fixed and optional sections.
- Product listings and product detail rely on shop data.
- Recipes are a starting point, not a rigid template.

## Read more

- [Page type recipes: home, product listing, product detail, content](https://academy.laioutr.com/en/artikel/page-type-recipes-home-listing-detail-content)6 min

  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.
- [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 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.
- [Content sections: hero, banners, grids, quotes, logos and promotion](https://academy.laioutr.com/en/artikel/content-sections-hero-banners-grids-quotes-logos)8 min

  Laioutr UI ships ready-made content sections such as Hero Slider, CTA banners, card grids, testimonials, USP Banner, Logo Slider, gallery and Promotion Banner. Editors place them in Studio, fill them with their own content and adjust size, alignment and background.

## 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/lektionen/ux-designer-page-type-recipes#webpage",
      "@type": "WebPage",
      "name": "Academy Lesson",
      "url": "https://academy.laioutr.com/en/lektionen/ux-designer-page-type-recipes",
      "breadcrumb": {
        "@id": "https://academy.laioutr.com/en/lektionen/ux-designer-page-type-recipes#breadcrumb"
      },
      "isPartOf": {
        "@id": "https://academy.laioutr.com/#website"
      },
      "potentialAction": [
        {
          "@type": "ReadAction",
          "target": [
            "https://academy.laioutr.com/en/lektionen/ux-designer-page-type-recipes"
          ]
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/en/lektionen/ux-designer-page-type-recipes#breadcrumb",
      "@type": "BreadcrumbList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "name": "Home",
          "item": "https://academy.laioutr.com/en",
          "position": 1
        },
        {
          "@type": "ListItem",
          "name": "Agentic UX Designer",
          "item": "https://academy.laioutr.com/en/lernpfade/ux-designer-learning-path",
          "position": 2
        },
        {
          "@type": "ListItem",
          "name": "Apply page type recipes",
          "item": "https://academy.laioutr.com/en/lektionen/ux-designer-page-type-recipes",
          "position": 3
        }
      ]
    }
  ]
}
```