---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/artikel/warenkorb-im-storefront-pruefen-und-einrichten"
locale: de
meta:
  "og:title": "Academy Article"
---

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

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

- [Warenkorb, Konto und Filiale](https://academy.laioutr.com/leitfaeden/warenkorb-konto-und-filiale)

- [Warenkorb in der Storefront einrichten und prüfen](https://academy.laioutr.com/artikel/warenkorb-im-storefront-pruefen-und-einrichten)

# Warenkorb in der Storefront einrichten und prüfen

Der Warenkorb öffnet sich als seitliches Panel (Cart Sheet) mit Positionen, Gutscheinfeld, Fortschritt bis zum Gratisversand und Summen; zusätzlich gibt es eine eigene Warenkorbseite. Preise, Rabatte, Versandkosten und der Weg zur Kasse kommen vom Commerce-Backend.

## 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
- Mindestens ein bestellbares Produkt im Backend

Zuletzt geprüft am 15. Oktober 2026

Nach dem Klick auf **Add to Cart** oder auf das Warenkorb-Symbol im Header öffnet sich das **Cart Sheet**, ein Panel am Bildschirmrand. Kundinnen und Kunden bleiben dabei auf der Seite, die sie gerade ansehen. Das Panel zeigt jede Position mit Bild, Variante, Preis und Menge, die sich ändern oder entfernen lässt. Darunter folgen ein ausklappbares Gutscheinfeld, ein Fortschrittsbalken bis zum Gratisversand und die **Cart Summary Box** mit Zwischensumme, Rabatt, Versand, Gesamtbetrag, Hinweis auf die enthaltene Mehrwertsteuer und dem Button zur Kasse. Akzeptierte Zahlungsarten können als Logos erscheinen. Ist der Warenkorb leer, zeigt das Panel einen leeren Zustand mit Weg zurück in den Shop.

Der Warenkorb selbst liegt im Commerce-Backend. Orchestr gibt Mengenänderungen, Gutscheincodes und Löschungen an die App weiter; das Backend prüft Gutscheine, berechnet Preise, Steuern und Versand und liefert die Kasse, sofern nicht Checkoutr den Checkout übernimmt. Was im Warenkorb erscheint, hängt deshalb von den Daten der App ab.

## Schritt für Schritt

1. 1 ### Schritt 1: Produkt in den Warenkorb legen

   Die Produktdetailseite in der Studio-Vorschau oder in der Storefront öffnen, eine Variante wählen und auf **Add to Cart** klicken. Das Cart Sheet öffnet sich am Rand.
2. 2 ### Schritt 2: Positionen bearbeiten

   Die Menge einer Position erhöhen und eine andere Position entfernen. Zwischensumme und Gesamtbetrag aktualisieren sich nach der Antwort des Backends.
3. 3 ### Schritt 3: Gutscheincode testen

   Das Gutscheinfeld aufklappen, einen gültigen Code eingeben und anwenden. Der Rabatt erscheint in der Summenbox und lässt sich dort wieder entfernen.
4. 4 ### Schritt 4: Gratisversand prüfen

   Den Fortschrittsbalken beobachten, während Produkte hinzukommen. Ist die Schwelle erreicht, zeigt er den erreichten Gratisversand an.
5. 5 ### Schritt 5: Leeren Warenkorb prüfen

   Alle Positionen entfernen und prüfen, ob der leere Zustand mit einem Weg zurück in den Shop erscheint.
6. 6 ### Schritt 6: Zur Kasse wechseln

   Erneut ein Produkt hinzufügen und den Button zur Kasse in der Summenbox klicken. Die Kasse des Backends oder von Checkoutr öffnet sich mit demselben Warenkorb.

## Ergebnis prüfen

Der Warenkorb in der Storefront zeigt dieselben Positionen, Rabatte und Summen wie die Kasse. Nach dem Neuladen der Seite ist der Warenkorb unverändert, und ein ungültiger Gutscheincode wird mit einer Meldung abgelehnt.

## Häufige Fragen

Wo wird die Schwelle für den Gratisversand festgelegt?

Der Fortschrittsbalken rechnet mit einem Schwellenwert je Markt. Ob dieser aus dem Backend kommt oder im Projekt gepflegt wird, hängt von der Commerce-App und dem Projekt-Setup ab.

Warum wird ein Gutscheincode abgelehnt?

Gutscheine prüft ausschließlich das Backend. Gültigkeit, Mindestbestellwert und Produktbeschränkungen werden dort gepflegt; der Warenkorb zeigt nur das Ergebnis an.

Gibt es neben dem Panel eine eigene Warenkorbseite?

Ja. Die Summenbox wird im Cart Sheet und auf der eigenständigen Warenkorbseite verwendet, damit beide dieselben Beträge zeigen.

## Passend dazu

- [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.
- [Checkoutr: Checkout im Shop mit Mollie einrichten](https://academy.laioutr.com/artikel/checkoutr-checkout-im-shop-mit-mollie)8 Min. In Vorbereitung

  Checkoutr ist der Headless Checkout der Laioutr-Gruppe: Warenkorb, Gast-Checkout und Zahlung über Mollie, gestaltet in Studio. Bestellungen landen in einer Bestell-API, aus der ERP-Systeme sie abholen.
- [Zugangsdaten eintragen und Verbindung testen](https://academy.laioutr.com/artikel/zugangsdaten-eintragen-und-verbindung-testen)5 Min.

  Zugangsdaten einer App werden je Umgebung unter Configuration eingetragen, mit Test connection geprüft und mit Save settings gespeichert. Wirksam werden sie mit dem nächsten Deployment.

## [Warenkorb, Konto und Filiale](https://academy.laioutr.com/leitfaeden/warenkorb-konto-und-filiale)

In diesem Leitfaden suchen

1. [Warenkorb in der Storefront einrichten und prüfen](https://academy.laioutr.com/artikel/warenkorb-im-storefront-pruefen-und-einrichten)5 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/warenkorb-im-storefront-pruefen-und-einrichten#webpage",
      "name": "Academy Article",
      "url": "https://academy.laioutr.com/artikel/warenkorb-im-storefront-pruefen-und-einrichten",
      "@type": [
        "WebPage",
        "FAQPage"
      ],
      "breadcrumb": {
        "@id": "https://academy.laioutr.com/artikel/warenkorb-im-storefront-pruefen-und-einrichten#breadcrumb"
      },
      "isPartOf": {
        "@id": "https://academy.laioutr.com/#website"
      },
      "mainEntity": [
        {
          "@id": "https://academy.laioutr.com/artikel/warenkorb-im-storefront-pruefen-und-einrichten#/schema/question/1"
        },
        {
          "@id": "https://academy.laioutr.com/artikel/warenkorb-im-storefront-pruefen-und-einrichten#/schema/question/2"
        },
        {
          "@id": "https://academy.laioutr.com/artikel/warenkorb-im-storefront-pruefen-und-einrichten#/schema/question/3"
        }
      ],
      "potentialAction": [
        {
          "@type": "ReadAction",
          "target": [
            "https://academy.laioutr.com/artikel/warenkorb-im-storefront-pruefen-und-einrichten"
          ]
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/artikel/warenkorb-im-storefront-pruefen-und-einrichten#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": "Warenkorb, Konto und Filiale",
          "item": "https://academy.laioutr.com/leitfaeden/warenkorb-konto-und-filiale",
          "position": 3
        },
        {
          "@type": "ListItem",
          "name": "Warenkorb in der Storefront einrichten und prüfen",
          "item": "https://academy.laioutr.com/artikel/warenkorb-im-storefront-pruefen-und-einrichten",
          "position": 4
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/artikel/warenkorb-im-storefront-pruefen-und-einrichten#/schema/question/1",
      "@type": "Question",
      "inLanguage": "de",
      "name": "Wo wird die Schwelle für den Gratisversand festgelegt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Der Fortschrittsbalken rechnet mit einem Schwellenwert je Markt. Ob dieser aus dem Backend kommt oder im Projekt gepflegt wird, hängt von der Commerce-App und dem Projekt-Setup ab.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/artikel/warenkorb-im-storefront-pruefen-und-einrichten#/schema/question/2",
      "@type": "Question",
      "inLanguage": "de",
      "name": "Warum wird ein Gutscheincode abgelehnt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Gutscheine prüft ausschließlich das Backend. Gültigkeit, Mindestbestellwert und Produktbeschränkungen werden dort gepflegt; der Warenkorb zeigt nur das Ergebnis an.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/artikel/warenkorb-im-storefront-pruefen-und-einrichten#/schema/question/3",
      "@type": "Question",
      "inLanguage": "de",
      "name": "Gibt es neben dem Panel eine eigene Warenkorbseite?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Ja. Die Summenbox wird im Cart Sheet und auf der eigenständigen Warenkorbseite verwendet, damit beide dieselben Beträge zeigen.</p>"
      }
    }
  ]
}
```