---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/en/artikel/check-and-set-up-the-storefront-cart"
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)

- [Cart, account and store](https://academy.laioutr.com/en/leitfaeden/cart-account-and-store)

- [Set up and check the storefront cart](https://academy.laioutr.com/en/artikel/check-and-set-up-the-storefront-cart)

# Set up and check the storefront cart

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.

## Before you start

<dl>

<dt>Plan</dt>
<dd>Laioutr Commerce plan</dd>

<dt>Role</dt>
<dd>Editor or Admin in the project</dd>

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

### Prerequisites

- Commerce app installed and connected
- At least one orderable product in the backend

Last reviewed on October 15, 2026

After clicking Add to Cart or the cart icon in the header, the **Cart Sheet** opens, a panel at the edge of the screen. Shoppers stay on the page they are viewing. The panel shows every line item with image, variant, price and quantity, which can be changed or removed. Below follow a collapsible coupon field, a progress bar towards free delivery and the **Cart Summary Box** with subtotal, discount, shipping, total, a note that VAT is included and the button to checkout. Accepted payment methods can be shown as logos. If the cart is empty, the panel shows an empty state with a way back into the shop.

The cart itself lives in the commerce backend. Orchestr passes quantity changes, coupon codes and removals to the app; the backend validates coupons, calculates prices, taxes and shipping and provides the checkout, unless Checkoutr handles checkout. What appears in the cart therefore depends on the data of the app.

## Step by step

1. 1 ### Step 1: Add a product to the cart

   Open the product detail page in the Studio preview or the storefront, select a variant and click Add to Cart. The Cart Sheet opens at the edge.
2. 2 ### Step 2: Edit line items

   Increase the quantity of one line item and remove another. Subtotal and total update after the backend responds.
3. 3 ### Step 3: Test a coupon code

   Expand the coupon field, enter a valid code and apply it. The discount appears in the summary box and can be removed there.
4. 4 ### Step 4: Check free delivery

   Watch the progress bar while adding products. Once the threshold is reached, it shows that free delivery has been reached.
5. 5 ### Step 5: Check the empty cart

   Remove all line items and check that the empty state with a way back into the shop appears.
6. 6 ### Step 6: Proceed to checkout

   Add a product again and click the checkout button in the summary box. The checkout of the backend or of Checkoutr opens with the same cart.

## Check the result

The cart in the storefront shows the same line items, discounts and totals as the checkout. After reloading the page, the cart is unchanged, and an invalid coupon code is rejected with a message.

## Frequently asked questions

Where is the free delivery threshold set?

The progress bar works with one threshold per market. Whether it comes from the backend or is maintained in the project depends on the commerce app and the project setup.

Why is a coupon code rejected?

Coupons are validated only by the backend. Validity, minimum order value and product restrictions are maintained there; the cart only shows the result.

Is there a separate cart page besides the panel?

Yes. The summary box is used in the Cart Sheet and on the standalone cart page, so both show the same amounts.

## Related

- [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.
- [Checkoutr: set up the shop checkout with Mollie](https://academy.laioutr.com/en/artikel/checkoutr-shop-checkout-with-mollie)8 min In preparation

  Checkoutr is the headless checkout of the Laioutr group: cart, guest checkout and payment through Mollie, designed in Studio. Orders land in an order API from which ERP systems pick them up.
- [Enter credentials and test the connection](https://academy.laioutr.com/en/artikel/enter-credentials-and-test-the-connection)5 min

  App credentials are entered per environment under Configuration, checked with Test connection and stored with Save settings. They take effect with the next deployment.

## [Cart, account and store](https://academy.laioutr.com/en/leitfaeden/cart-account-and-store)

Search this guide

1. [Set up and check the storefront cart](https://academy.laioutr.com/en/artikel/check-and-set-up-the-storefront-cart)5 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/check-and-set-up-the-storefront-cart#webpage",
      "name": "Academy Article",
      "url": "https://academy.laioutr.com/en/artikel/check-and-set-up-the-storefront-cart",
      "@type": [
        "WebPage",
        "FAQPage"
      ],
      "breadcrumb": {
        "@id": "https://academy.laioutr.com/en/artikel/check-and-set-up-the-storefront-cart#breadcrumb"
      },
      "isPartOf": {
        "@id": "https://academy.laioutr.com/#website"
      },
      "mainEntity": [
        {
          "@id": "https://academy.laioutr.com/en/artikel/check-and-set-up-the-storefront-cart#/schema/question/1"
        },
        {
          "@id": "https://academy.laioutr.com/en/artikel/check-and-set-up-the-storefront-cart#/schema/question/2"
        },
        {
          "@id": "https://academy.laioutr.com/en/artikel/check-and-set-up-the-storefront-cart#/schema/question/3"
        }
      ],
      "potentialAction": [
        {
          "@type": "ReadAction",
          "target": [
            "https://academy.laioutr.com/en/artikel/check-and-set-up-the-storefront-cart"
          ]
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/en/artikel/check-and-set-up-the-storefront-cart#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": "Cart, account and store",
          "item": "https://academy.laioutr.com/en/leitfaeden/cart-account-and-store",
          "position": 3
        },
        {
          "@type": "ListItem",
          "name": "Set up and check the storefront cart",
          "item": "https://academy.laioutr.com/en/artikel/check-and-set-up-the-storefront-cart",
          "position": 4
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/en/artikel/check-and-set-up-the-storefront-cart#/schema/question/1",
      "@type": "Question",
      "inLanguage": "en",
      "name": "Where is the free delivery threshold set?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>The progress bar works with one threshold per market. Whether it comes from the backend or is maintained in the project depends on the commerce app and the project setup.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/en/artikel/check-and-set-up-the-storefront-cart#/schema/question/2",
      "@type": "Question",
      "inLanguage": "en",
      "name": "Why is a coupon code rejected?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Coupons are validated only by the backend. Validity, minimum order value and product restrictions are maintained there; the cart only shows the result.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/en/artikel/check-and-set-up-the-storefront-cart#/schema/question/3",
      "@type": "Question",
      "inLanguage": "en",
      "name": "Is there a separate cart page besides the panel?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Yes. The summary box is used in the Cart Sheet and on the standalone cart page, so both show the same amounts.</p>"
      }
    }
  ]
}
```