---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/en/artikel/design-the-product-detail-page-and-spec-sheet"
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)
- [Design the product detail page and spec sheet](https://academy.laioutr.com/en/artikel/design-the-product-detail-page-and-spec-sheet)
# Design the product detail page and spec sheet
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.
## Before you start
- Plan
- Laioutr Commerce plan
- Role
- Editor or Admin in the project
- Duration
- 7 min
### Prerequisites
- Commerce app installed and connected
- Product detail page exists in the project
Last reviewed on October 15, 2026
The product detail page (PDP) is a dynamic page: Studio holds one configuration that is rendered for every product with its own data. The **Product Detail** section splits the page into two columns. The **Product Image Gallery** sits on the left with a main image, a thumbnail strip and a fullscreen lightbox. The buy box on the right is assembled from individual blocks: product title, price info, variant selection, **Add to Cart** with quantity, benefits box, coupon box, quantity discount or energy label. Each project combines the blocks that fit its range. On a phone, the layout becomes a single column.
The spec sheet (**Table Product Specifications**) shows technical data such as dimensions or power consumption as a table, grouped into sections and formatted for the active locale. It is filled from the product's specifications or from manually entered rows.
Images, variants, prices, stock and specifications are delivered by the commerce app through Orchestr. What appears on the PDP therefore depends on which data the backend provides for a product.
## Step by step
1. 1 ### Step 1: Open the product detail page
Select the product detail page in the page list in **Studio**. Changes apply to all products.
2. 2 ### Step 2: Choose a preview product
Under **Preview Data** in the page properties, choose a product with variants and several images. The choice only applies to the current Studio session.
3. 3 ### Step 3: Assemble the buy box
Expand the Product Detail section in the layer tree and check the blocks for title, price, variant selection and Add to Cart. Add further blocks such as the benefits box or quantity discount and reorder them by drag and drop.
4. 4 ### Step 4: Add the spec sheet
Add the Table Product Specifications block. Under **Data Source**, choose the query to show the product's specifications, or enter manual rows with the optional **Section** field; then choose the outlined or plain style.
5. 5 ### Step 5: Add related products
Insert a Product Slider for similar or matching products below the Product Detail section.
6. 6 ### Step 6: Check with another product
Under **Preview Data**, select a product without variants or specifications and check that the page still looks clean. Then save with **Save** and publish with **Publish**.
## Check the result
Open a product with variants in the storefront and select another variant: price, image and availability change. The spec sheet shows values in the format of the selected language, and adding to cart puts the selected variant into the cart.
## Frequently asked questions
Does every product page have to be maintained separately?
No. The product detail page is one template for all products. Product content such as texts, images and prices comes from the backend; Studio only defines layout and presentation.
Why is the spec sheet empty?
In query mode, the table shows the specifications the commerce app delivers for the product. If they are missing in the backend or the app does not pass them on, the table stays empty; manual rows or maintaining the data in the backend help.
Why can Add to Cart not be clicked?
If a product is sold out, the button is disabled. If a product has variants and none is selected yet, clicking does nothing until a variant is chosen.
## Related
- [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.
- [Use product tiles and product sliders](https://academy.laioutr.com/en/artikel/use-product-tiles-and-product-sliders)5 min
Product tiles show a product with image, brand, title, price, flags, colour variants and an optional add-to-cart button; the Product Slider lines such tiles up horizontally, for example for new arrivals or matching products. Which products appear comes from a query to the connected commerce app.
- [Structured data with Schema.org](https://academy.laioutr.com/en/artikel/structured-data-schema-org)6 min
Every Laioutr page carries exactly one Schema.org graph as JSON-LD, with no extra module. The SEO app provides website, page and organisation, and sections add breadcrumbs, FAQ, products and product lists.
- [Set up and check the storefront cart](https://academy.laioutr.com/en/artikel/check-and-set-up-the-storefront-cart)5 min
The cart opens as a side panel (Cart Sheet) with line items, a coupon field, progress towards free delivery and totals; there is also a separate cart page. Prices, discounts, shipping costs and the path to checkout come from the commerce backend.
## Learn it in a lesson
- [Apply page type recipes](https://academy.laioutr.com/en/lektionen/ux-designer-page-type-recipes)12 min
## [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/design-the-product-detail-page-and-spec-sheet#webpage",
"name": "Academy Article",
"url": "https://academy.laioutr.com/en/artikel/design-the-product-detail-page-and-spec-sheet",
"@type": [
"WebPage",
"FAQPage"
],
"breadcrumb": {
"@id": "https://academy.laioutr.com/en/artikel/design-the-product-detail-page-and-spec-sheet#breadcrumb"
},
"isPartOf": {
"@id": "https://academy.laioutr.com/#website"
},
"mainEntity": [
{
"@id": "https://academy.laioutr.com/en/artikel/design-the-product-detail-page-and-spec-sheet#/schema/question/1"
},
{
"@id": "https://academy.laioutr.com/en/artikel/design-the-product-detail-page-and-spec-sheet#/schema/question/2"
},
{
"@id": "https://academy.laioutr.com/en/artikel/design-the-product-detail-page-and-spec-sheet#/schema/question/3"
}
],
"potentialAction": [
{
"@type": "ReadAction",
"target": [
"https://academy.laioutr.com/en/artikel/design-the-product-detail-page-and-spec-sheet"
]
}
]
},
{
"@id": "https://academy.laioutr.com/en/artikel/design-the-product-detail-page-and-spec-sheet#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": "Design the product detail page and spec sheet",
"item": "https://academy.laioutr.com/en/artikel/design-the-product-detail-page-and-spec-sheet",
"position": 4
}
]
},
{
"@id": "https://academy.laioutr.com/en/artikel/design-the-product-detail-page-and-spec-sheet#/schema/question/1",
"@type": "Question",
"inLanguage": "en",
"name": "Does every product page have to be maintained separately?",
"acceptedAnswer": {
"@type": "Answer",
"text": "No. The product detail page is one template for all products. Product content such as texts, images and prices comes from the backend; Studio only defines layout and presentation.
"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/design-the-product-detail-page-and-spec-sheet#/schema/question/2",
"@type": "Question",
"inLanguage": "en",
"name": "Why is the spec sheet empty?",
"acceptedAnswer": {
"@type": "Answer",
"text": "In query mode, the table shows the specifications the commerce app delivers for the product. If they are missing in the backend or the app does not pass them on, the table stays empty; manual rows or maintaining the data in the backend help.
"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/design-the-product-detail-page-and-spec-sheet#/schema/question/3",
"@type": "Question",
"inLanguage": "en",
"name": "Why can Add to Cart not be clicked?",
"acceptedAnswer": {
"@type": "Answer",
"text": "If a product is sold out, the button is disabled. If a product has variants and none is selected yet, clicking does nothing until a variant is chosen.
"
}
}
]
}
```