---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/en/artikel/fill-sections-with-shop-data"
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)

- [Fill sections with shop data](https://academy.laioutr.com/en/artikel/fill-sections-with-shop-data)

# Fill sections with shop data

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.

## Before you start

<dl>

<dt>Plan</dt>
<dd>All plans</dd>

<dt>Role</dt>
<dd>Member with access to the project and permission to edit project content</dd>

<dt>Duration</dt>
<dd>7 min</dd></dl>

### Prerequisites

- A commerce or CMS app is installed and connected
- A section with a data field, such as a product slider

Last reviewed on October 15, 2026

Product sliders, product lists, category teasers or blog overviews do not show typed-in content but live data. For this, these sections have a **data field** (query). In the data field, the team picks a **data query**, for example the products of a category or a single product. An icon shows which app provides the data.

At render time, **Orchestr**, the Laioutr data layer, resolves the query and loads exactly the data the section needs. Studio only stores the query, never a copy of the product data. Prices, stock and images therefore stay up to date, even when they come from several systems.

Dynamic pages such as product detail or product listing also have **page queries** that use the parameter from the URL. Sections bound to them automatically follow the product or category being viewed. Studio highlights these bindings.

The query editor sets label, limit, URL alias, input rules and sorting. Link and media fields as well as the SEO title and description can also take values from a query result.

## Step by step

1. 1 ### Step 1: Insert a section with a data field

   Insert a section such as a product slider via **Add section** and select it.
2. 2 ### Step 2: Choose a data query

   Open the data field in the **Content** group, for example **Products**, and choose a query. The app icon shows the data source.
3. 3 ### Step 3: Set the input

   Set the query input, for example a category, a search term or a product from the searchable list.
4. 4 ### Step 4: Set limit and sorting

   In the query editor, limit the number of results and choose a sorting if needed.
5. 5 ### Step 5: Bind to the page query

   On product detail or product listing pages, bind the data field to the page query so the section follows the product or category from the URL.
6. 6 ### Step 6: Check with preview data

   In the page properties, pick another product under **Preview Data** and check the result. The choice applies only to the current Studio session.
7. 7 ### Step 7: Save

   Save the changes with **Save**.

## Check the result

The section shows real products with current prices and images in the preview. After switching the preview data or the market, the content adapts.

## Frequently asked questions

Why does the section stay empty?

Common reasons: no query is selected in the data field, the input returns no results, or the app is not connected for the selected market. Check query, input and the market in the top bar.

Is product data copied into Studio?

No. Studio only stores the query. Orchestr loads the data from the connected systems at render time and keeps it quickly available through a cache.

Does a query apply to all languages?

Yes, queries are not translatable. The connected app still returns data that matches market and language, such as translated product names and the right currency.

Can data from several systems be combined?

Yes. Orchestr composes one product from several sources, for example base data from the shop and prices from the ERP. The section does not notice any of this.

## Related

- [How data flows in Laioutr](https://academy.laioutr.com/en/artikel/how-data-flows-in-laioutr)5 min

  Studio defines how a page is built, and Orchestr fetches the data for it on the server from connected systems such as shop, CMS or ERP and combines it into one unified data model.
- [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.
- [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.
- [Find, install and configure apps](https://academy.laioutr.com/en/artikel/find-install-and-configure-apps)6 min

  Apps are listed in the Cockpit catalogue under Apps, installed per environment and set up under Configuration. The storefront uses them from the next deployment onwards.

## Learn it in a lesson

- [Add, move and fill sections and blocks](https://academy.laioutr.com/en/lektionen/foundations-sections-and-blocks)10 min
- [Define custom sections and blocks](https://academy.laioutr.com/en/lektionen/developer-custom-sections-and-blocks)14 min
- [Fill sections with shop data](https://academy.laioutr.com/en/lektionen/go-live-fill-sections-with-shop-data)7 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/fill-sections-with-shop-data#webpage",
      "name": "Academy Article",
      "url": "https://academy.laioutr.com/en/artikel/fill-sections-with-shop-data",
      "@type": [
        "WebPage",
        "FAQPage"
      ],
      "breadcrumb": {
        "@id": "https://academy.laioutr.com/en/artikel/fill-sections-with-shop-data#breadcrumb"
      },
      "isPartOf": {
        "@id": "https://academy.laioutr.com/#website"
      },
      "mainEntity": [
        {
          "@id": "https://academy.laioutr.com/en/artikel/fill-sections-with-shop-data#/schema/question/1"
        },
        {
          "@id": "https://academy.laioutr.com/en/artikel/fill-sections-with-shop-data#/schema/question/2"
        },
        {
          "@id": "https://academy.laioutr.com/en/artikel/fill-sections-with-shop-data#/schema/question/3"
        },
        {
          "@id": "https://academy.laioutr.com/en/artikel/fill-sections-with-shop-data#/schema/question/4"
        }
      ],
      "potentialAction": [
        {
          "@type": "ReadAction",
          "target": [
            "https://academy.laioutr.com/en/artikel/fill-sections-with-shop-data"
          ]
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/en/artikel/fill-sections-with-shop-data#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": "Fill sections with shop data",
          "item": "https://academy.laioutr.com/en/artikel/fill-sections-with-shop-data",
          "position": 4
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/en/artikel/fill-sections-with-shop-data#/schema/question/1",
      "@type": "Question",
      "inLanguage": "en",
      "name": "Why does the section stay empty?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Common reasons: no query is selected in the data field, the input returns no results, or the app is not connected for the selected market. Check query, input and the market in the top bar.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/en/artikel/fill-sections-with-shop-data#/schema/question/2",
      "@type": "Question",
      "inLanguage": "en",
      "name": "Is product data copied into Studio?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>No. Studio only stores the query. Orchestr loads the data from the connected systems at render time and keeps it quickly available through a cache.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/en/artikel/fill-sections-with-shop-data#/schema/question/3",
      "@type": "Question",
      "inLanguage": "en",
      "name": "Does a query apply to all languages?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Yes, queries are not translatable. The connected app still returns data that matches market and language, such as translated product names and the right currency.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/en/artikel/fill-sections-with-shop-data#/schema/question/4",
      "@type": "Question",
      "inLanguage": "en",
      "name": "Can data from several systems be combined?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Yes. Orchestr composes one product from several sources, for example base data from the shop and prices from the ERP. The section does not notice any of this.</p>"
      }
    }
  ]
}
```