---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/artikel/produktkacheln-und-produktslider-einsetzen"
locale: de
meta:
  "og:title": "Academy Article"
---

[Zur Startseite](https://academy.laioutr.com/)

- [Storefront-Funktionen](https://academy.laioutr.com/bereiche/storefront-funktionen)

- [Produkte und Kategorien](https://academy.laioutr.com/leitfaeden/produkte-und-kategorien)

- [Produktkacheln und Produktslider einsetzen](https://academy.laioutr.com/artikel/produktkacheln-und-produktslider-einsetzen)

# Produktkacheln und Produktslider einsetzen

Produktkacheln zeigen ein Produkt mit Bild, Marke, Titel, Preis, Labels, Farbvarianten und optionalem Warenkorb-Button; der Product Slider reiht solche Kacheln horizontal auf, zum Beispiel für Neuheiten oder passende Produkte. Welche Produkte erscheinen, kommt aus einer Abfrage an die angebundene Commerce-App.

## Bevor du startest

<dl>

<dt>Tarif</dt>
<dd>Laioutr-Commerce-Plan</dd>

<dt>Rolle</dt>
<dd>Editor oder Admin im Projekt</dd>

<dt>Dauer</dt>
<dd>5 Min.</dd></dl>

### Voraussetzungen

- Commerce-App installiert und verbunden

Zuletzt geprüft am 15. Oktober 2026

Die Produktkachel (**Product Tile**) ist der Grundbaustein aller Produktdarstellungen in Laioutr UI. Die Kachel erscheint in Kategorielisten, Suchergebnissen und Slidern und zeigt dort überall dieselbe Information: Bild, optional Marke, Titel, Preis mit Streichpreis, Produktlabels wie Sale, Farbvarianten als Swatches und auf Wunsch einen Button zum Hinzufügen in den Warenkorb. Kacheln halten eine einheitliche Höhe, damit Reihen sauber bleiben, und formatieren Preise passend zum Markt.

Der **Product Slider** zeigt eine Produktauswahl als horizontal scrollbaren Streifen, mit Überschrift, Unterzeile und einem Button. Die Navigation sitzt oben oder unten, eine Scrollleiste ist optional. Für Kampagnen gibt es den **Product Slider Showcase** mit zusätzlichem Bannerbild neben den Produkten.

Die Produkte im Slider stammen aus einer Abfrage an die Commerce-App über Orchestr, etwa einer Kategorie. Welche Abfragen zur Auswahl stehen, hängt von der installierten App ab.

## Schritt für Schritt

1. 1 ### Schritt 1: Seite öffnen

   In **Studio** die Seite wählen, auf der der Slider erscheinen soll, zum Beispiel die Startseite.
2. 2 ### Schritt 2: Slider hinzufügen

   In der linken Seitenleiste eine Section **Product Slider** an der gewünschten Stelle einfügen. Für eine Kampagne mit Bild stattdessen **Product Slider Showcase** wählen.
3. 3 ### Schritt 3: Produkte zuweisen

   Rechts in den Eigenschaften die Abfrage für die Produkte wählen, zum Beispiel eine Kategorie der Commerce-App. Die Vorschau zeigt sofort die passenden Produkte.
4. 4 ### Schritt 4: Kopf und Navigation einstellen

   Überschrift, Unterzeile und Button-Text pflegen, die Position der Navigation festlegen und die Scrollleiste ein- oder ausschalten.
5. 5 ### Schritt 5: Kacheln anpassen

   In den Eigenschaften die angebotenen Kacheloptionen setzen, etwa Bildformat, Labels, Farbvarianten oder den Warenkorb-Button.
6. 6 ### Schritt 6: Speichern und veröffentlichen

   Mit **Save** speichern und mit **Publish** veröffentlichen.

## Ergebnis prüfen

Die Seite in der Storefront öffnen: Der Slider zeigt die Produkte der gewählten Abfrage, lässt sich wischen oder per Pfeil bewegen, und ein Klick auf Bild oder Titel einer Kachel öffnet die Produktdetailseite.

## Häufige Fragen

Lassen sich einzelne Produkte gezielt in den Slider legen?

Die Auswahl erfolgt über die Abfragen, die die Commerce-App anbietet. Bietet die App eine Abfrage nach einzelnen Produkten oder Kollektionen an, lässt sich so kuratieren; sonst hilft eine eigene Kategorie oder Kollektion im Backend.

Wie wechselt eine Kachel die Farbvariante?

Ein Klick auf einen Farb-Swatch zeigt Bild und Daten der jeweiligen Variante. Gibt es mehr Farben als Platz, erscheint ein Hinweis auf die weiteren Varianten. Voraussetzung ist, dass das Backend Varianten mit Farbinformation liefert.

Wann ist der Product Slider Showcase sinnvoll?

Wenn ein Slider eine Kampagne oder Marke mit Bild tragen soll. Er kombiniert den gleichen Produktstreifen mit einem Banner an der Seite.

## Passend dazu

- [Sections mit Shopdaten füllen](https://academy.laioutr.com/artikel/sections-mit-shopdaten-fuellen)7 Min.

  Sections mit einem Datenfeld zeigen Produkte, Kategorien oder Beiträge aus den angebundenen Systemen. Das Team wählt in Studio eine Datenabfrage, stellt Eingabe, Anzahl und Sortierung ein, und Orchestr liefert die Daten beim Rendern.
- [Produktlisten mit Filter und Sortierung einrichten](https://academy.laioutr.com/artikel/produktlisten-mit-filter-und-sortierung-einrichten)6 Min.

  Eine Produktliste entsteht in Studio aus Product Listing Grid, Filter Bar und Sortierung; Produkte, Filter und Sortieroptionen liefert die angebundene Commerce-App über Orchestr. Welche Filter erscheinen, hängt davon ab, was das Backend bereitstellt.
- [Produktdetailseite und Datenblatt gestalten](https://academy.laioutr.com/artikel/produktdetailseite-und-datenblatt-gestalten)7 Min.

  Die Produktdetailseite ist in Studio eine Vorlage für alle Produkte: links die Bildergalerie, rechts die Buy Box aus Blöcken wie Titel, Preis, Variantenauswahl und In den Warenkorb, darunter optional ein Datenblatt. Inhalte wie Bilder, Varianten, Preise und Spezifikationen liefert die Commerce-App über Orchestr.
- [Landingpage aus vorhandenen Sections bauen](https://academy.laioutr.com/artikel/landingpage-aus-vorhandenen-sections-bauen)10 Min.

  Eine Landingpage entsteht in Studio als Seite vom Typ Landing Page mit eigenem Pfad und wird aus installierten Sections zusammengesetzt: Hero, Inhalte, Produktslider mit Shopdaten, Header und Footer als globale Sections.

## [Produkte und Kategorien](https://academy.laioutr.com/leitfaeden/produkte-und-kategorien)

In diesem Leitfaden suchen

1. [Produktlisten mit Filter und Sortierung einrichten](https://academy.laioutr.com/artikel/produktlisten-mit-filter-und-sortierung-einrichten)6 Min.
2. [Produktdetailseite und Datenblatt gestalten](https://academy.laioutr.com/artikel/produktdetailseite-und-datenblatt-gestalten)7 Min.
3. [Produktkacheln und Produktslider einsetzen](https://academy.laioutr.com/artikel/produktkacheln-und-produktslider-einsetzen)5 Min.
4. [Markenseiten und Markenübersicht aufbauen](https://academy.laioutr.com/artikel/markenseiten-und-markenuebersicht-aufbauen)6 Min.
5. [Suche und Suchergebnisseite einrichten](https://academy.laioutr.com/artikel/suche-und-suchergebnisseite-einrichten)6 Min.

## Structured Data

```json
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@id": "https://academy.laioutr.com/#website",
      "@type": "WebSite",
      "inLanguage": "de",
      "name": "Default",
      "url": "https://academy.laioutr.com/",
      "workTranslation": {
        "@id": "https://academy.laioutr.com/#website"
      }
    },
    {
      "@id": "https://academy.laioutr.com/artikel/produktkacheln-und-produktslider-einsetzen#webpage",
      "name": "Academy Article",
      "url": "https://academy.laioutr.com/artikel/produktkacheln-und-produktslider-einsetzen",
      "@type": [
        "WebPage",
        "FAQPage"
      ],
      "breadcrumb": {
        "@id": "https://academy.laioutr.com/artikel/produktkacheln-und-produktslider-einsetzen#breadcrumb"
      },
      "isPartOf": {
        "@id": "https://academy.laioutr.com/#website"
      },
      "mainEntity": [
        {
          "@id": "https://academy.laioutr.com/artikel/produktkacheln-und-produktslider-einsetzen#/schema/question/1"
        },
        {
          "@id": "https://academy.laioutr.com/artikel/produktkacheln-und-produktslider-einsetzen#/schema/question/2"
        },
        {
          "@id": "https://academy.laioutr.com/artikel/produktkacheln-und-produktslider-einsetzen#/schema/question/3"
        }
      ],
      "potentialAction": [
        {
          "@type": "ReadAction",
          "target": [
            "https://academy.laioutr.com/artikel/produktkacheln-und-produktslider-einsetzen"
          ]
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/artikel/produktkacheln-und-produktslider-einsetzen#breadcrumb",
      "@type": "BreadcrumbList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "name": "Home",
          "item": "https://academy.laioutr.com/",
          "position": 1
        },
        {
          "@type": "ListItem",
          "name": "Storefront-Funktionen",
          "item": "https://academy.laioutr.com/bereiche/storefront-funktionen",
          "position": 2
        },
        {
          "@type": "ListItem",
          "name": "Produkte und Kategorien",
          "item": "https://academy.laioutr.com/leitfaeden/produkte-und-kategorien",
          "position": 3
        },
        {
          "@type": "ListItem",
          "name": "Produktkacheln und Produktslider einsetzen",
          "item": "https://academy.laioutr.com/artikel/produktkacheln-und-produktslider-einsetzen",
          "position": 4
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/artikel/produktkacheln-und-produktslider-einsetzen#/schema/question/1",
      "@type": "Question",
      "inLanguage": "de",
      "name": "Lassen sich einzelne Produkte gezielt in den Slider legen?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Die Auswahl erfolgt über die Abfragen, die die Commerce-App anbietet. Bietet die App eine Abfrage nach einzelnen Produkten oder Kollektionen an, lässt sich so kuratieren; sonst hilft eine eigene Kategorie oder Kollektion im Backend.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/artikel/produktkacheln-und-produktslider-einsetzen#/schema/question/2",
      "@type": "Question",
      "inLanguage": "de",
      "name": "Wie wechselt eine Kachel die Farbvariante?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Ein Klick auf einen Farb-Swatch zeigt Bild und Daten der jeweiligen Variante. Gibt es mehr Farben als Platz, erscheint ein Hinweis auf die weiteren Varianten. Voraussetzung ist, dass das Backend Varianten mit Farbinformation liefert.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/artikel/produktkacheln-und-produktslider-einsetzen#/schema/question/3",
      "@type": "Question",
      "inLanguage": "de",
      "name": "Wann ist der Product Slider Showcase sinnvoll?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Wenn ein Slider eine Kampagne oder Marke mit Bild tragen soll. Er kombiniert den gleichen Produktstreifen mit einem Banner an der Seite.</p>"
      }
    }
  ]
}
```