# Shadcn Ecommerce Template: Fünf Screens fürs Smartphone

> Bau ein shadcn ecommerce template aus Quellkomponenten: Startseite, Suche, Produktseite, Cart Drawer und Checkout, plus der Vergleich mit gehosteten Startern.

- Autor: [Serban Rusu](https://wingo-ui.com/blog/authors/serban), Founder of Wingo UI
- Veröffentlicht: 6. Nov. 2026
- Kategorie: [Praxis: Screens und Apps](https://wingo-ui.com/de/blog/category/build)
- Lesezeit: 11 Min.
- Kanonische URL: https://wingo-ui.com/de/blog/shadcn-ecommerce-template
- Englische Fassung: https://wingo-ui.com/blog/shadcn-ecommerce-template

## Kurz gesagt

Ein shadcn ecommerce template lohnt sich, wenn es dir die fünf Screens eines Shops (Startseite, Suche, Produktseite, Warenkorb und Checkout) als Quellcode liefert, der mit deinem vorhandenen Backend spricht. Gehostete Starter wie Your Next Store bringen einen Shop schneller zum Laufen, aber ihr Frontend-Code hängt an ihrer Commerce-API. Wingo UI hat kein einzelnes Shop-Template: Du setzt das Shop-Frontend aus Pro-Blocks und -Komponenten zusammen (Checkout Page, Cart Drawer, Product Gallery, Marketplace-Startseite und -Suche), die am Smartphone zu Bottom Sheets, Wisch-Galerien und Sticky Bars zum Bezahlen werden.

Wer nach einem shadcn ecommerce template sucht, findet drei Arten von Treffern: gehostete Shop-Starter mit eigenem Commerce-Backend, kostenpflichtige Frontend-Kits und Verzeichnisse, die eine Handvoll GitHub-Repos auflisten. Was diese Listen selten verraten: Welche davon kannst du an deine eigene Produkt-API hängen, und was machen Warenkorb und Produktseite, wenn der Käufer am Smartphone sitzt? Dieser Guide geht die fünf Screens durch, die ein Shop-Frontend braucht, gebaut aus Quellkomponenten im shadcn-Stil, die du in deine eigene Next.js-App installierst. Und er vergleicht diesen Weg mit den gehosteten Startern.

## Welche Screens braucht ein shadcn ecommerce template?

Fünf, und alle arbeiten mit derselben Datenform für Produkte und Warenkorb:

1. **Startseite.** Ein Suchfeld, Kategoriekacheln und eine Leiste mit hervorgehobenen Produkten.
2. **Such- und Kategorieergebnisse.** Filter, Sortierung, Raster oder Liste und eine Trefferzahl, die sich bei jeder Änderung aktualisiert.
3. **Produktseite.** Fotos, Preis samt Angebotspreis, ein Button für den Warenkorb, Beschreibung und Bewertungen.
4. **Warenkorb.** Ein Drawer, der sich von jeder Seite aus öffnet, mit Mengen, Entfernen, Gutscheincode und Summen.
5. **Checkout.** Adresse, Lieferung, Zahlung, Prüfung und eine Bestätigung.

So verteilen sie sich auf Wingo UI, die Bibliothek im shadcn-Stil, die wir bauen. Ein einzelnes shadcn Shop-Template gibt es im Katalog nicht. Du bekommst shadcn ecommerce blocks für ganze Screens und die 16 Komponenten der Kategorie Commerce für die Teile dazwischen:

| Screen | Baustein in Wingo UI | Art | Wofür er gedacht ist |
| --- | --- | --- | --- |
| Startseite | [Marketplace Home Page](https://wingo-ui.com/components/marketplace-home-page) | Block | Eine Suche nach Was und Wo, Kategoriekacheln, eine Leiste mit Promo-Angeboten, die neuesten Artikel |
| Suche | [Marketplace Search Page](https://wingo-ui.com/components/marketplace-search-page) | Block | Facetten mit Trefferzahlen, Preis-Histogramm, Sortierung, endloses Nachladen |
| Produktseite | [Product Gallery](https://wingo-ui.com/components/product-gallery), [Price](https://wingo-ui.com/components/price), [Quantity Stepper](https://wingo-ui.com/components/quantity-stepper), [Reviews](https://wingo-ui.com/components/reviews) | Komponenten | Eine Produktseite für eine einzelne Marke, die du selbst anordnest |
| Produktseite, viele Verkäufer | [Listing Detail Page](https://wingo-ui.com/components/listing-detail-page) | Block | Kleinanzeigen: Verkäuferkarte, Buttons für Nachricht und Anruf, Karte |
| Warenkorb | [Cart Drawer](https://wingo-ui.com/components/cart-drawer) | Komponente | Seitenpanel am Laptop, Bottom Sheet am Smartphone |
| Checkout | [Checkout Page](https://wingo-ui.com/components/checkout-page) | Block | Warenkorb, vier Checkout-Schritte, Bestätigung mit Order Tracker |

Die Marketplace-Blocks sind als Kleinanzeigen-Kit entstanden, deshalb ist bei ihnen von Inseraten und Verkäufern die Rede. Für einen Shop mit mehreren Händlern passt das direkt. Für eine einzelne Marke behältst du die Blocks für Startseite und Suche, passt die Beispielkategorien an und baust die Produktseite aus Komponenten. Genau das zeigen die nächsten Abschnitte.

## Template oder gehosteter Commerce-Starter: Was passt besser?

Das hängt davon ab, wem das Backend gehört. Ein gehosteter Starter liefert dir vom ersten Tag an Produkte, Lagerbestand, Checkout und ein Admin-Panel, und der Code des Shop-Frontends ist gegen seine API geschrieben. Ein Frontend-Template liefert dir die Screens und überlässt dir die Daten. Diese Optionen tauchen bei der Suche auf, geprüft am 6. November 2026:

| Option | Preis | Lizenz | Stack | Backend |
| --- | --- | --- | --- | --- |
| [Your Next Store](https://github.com/yournextstore/yournextstore) | Template kostenlos; gehostete Tarife ab $25 im Monat | MIT | Next.js 16.4.5, React 19.3, shadcn auf Base UI, Tailwind 4.3 | Braucht einen `YNS_API_KEY` für sein Commerce Kit SDK |
| [Relivator](https://github.com/reliverse/relivator) | Kostenlos | MIT | Next.js 15.3.2, React 19.1, shadcn auf Radix, Tailwind 4.1 | Drizzle und Postgres, Better Auth, Polar für Zahlungen; letzter Push am 4. Oktober 2025 |
| [Shopix von Shadcn Studio](https://shadcnstudio.com/templates/shopix-ecommerce-template) | $79 | Kostenpflichtige Lizenz, siehe deren Lizenzseite | Next.js 16, shadcn, Tailwind v4, Motion | Keins enthalten; beworben als Frontend für Shopify oder Medusa |
| [Ecommerce-Verzeichnis von shadcn.io](https://www.shadcn.io/template/category/ecommerce) | Kostenlos | Je nach Repo | Vier Open-Source-Repos gelistet | Unterschiedlich |
| Wingo UI Blocks | Pro: $8 im Monat, $80 im Jahr oder $150 einmalig ([Preise](https://wingo-ui.com/de/pricing)) | [Wingo UI Lizenz](https://wingo-ui.com/legal/license) | Next.js App Router, React 19, Radix, Tailwind v4, Motion | Keins; Callbacks für deine API |

Your Next Store ist die bessere Wahl, wenn du noch diese Woche verkaufen willst und mit der Plattform dahinter leben kannst: Das Projekt wird aktiv gepflegt (letzter Push am 5. November 2026), und das Shop-Frontend ist Open Source. Die gehosteten Tarife auf [yns.store](https://yns.store) beginnen mit Starter für $25 im Monat bei jährlicher Abrechnung oder $30 bei monatlicher. Dort stehen 0 % Transaktionsgebühren, du zahlst also nur die Gebühren von Stripe selbst. Relivator lohnt sich als Lektüre, wenn du einen kompletten Stack mit Auth und Datenbank sehen willst, hinkt aber dem aktuellen Next.js-Release hinterher. Ein Frontend-Kit ergibt Sinn, wenn du schon Shopify, Medusa, Saleor oder eine eigene API betreibst und die Screens am Smartphone gut funktionieren sollen. Um diesen letzten Fall geht es im Rest dieses Guides. Unser [Überblick über shadcn Templates](https://wingo-ui.com/de/blog/best-shadcn-templates) deckt mehr Kategorien ab als nur Commerce.

## Wie baue ich die Produktseite aus Komponenten?

Fang mit einem Warenkorb an, den jede Seite lesen kann. Die Positionen nutzen den Typ `CartItem`, den der Cart Drawer exportiert (`id`, `title`, `price`, `quantity` sowie optional `image`, `variant`, `compareAtPrice` und `maxQuantity`). So reichen Produktseite, Drawer und Checkout dieselben Objekte weiter.

```bash
npx wingo-ui@latest add cart-drawer product-gallery price quantity-stepper
```

```tsx
// app/(shop)/cart-context.tsx
"use client";

import { createContext, useContext, useState, type ReactNode } from "react";
import type { CartItem } from "@/components/ui/cart-drawer";

type Cart = {
  items: CartItem[];
  setItems: (items: CartItem[]) => void;
  setQuantity: (line: CartItem, quantity: number) => void;
  remove: (id: string) => void;
};

const CartContext = createContext<Cart | null>(null);

export function CartProvider({ initial, children }: { initial: CartItem[]; children: ReactNode }) {
  const [items, setItems] = useState(initial);

  const setQuantity = (line: CartItem, quantity: number) =>
    setItems((prev) => {
      if (quantity <= 0) return prev.filter((item) => item.id !== line.id);
      return prev.some((item) => item.id === line.id)
        ? prev.map((item) => (item.id === line.id ? { ...item, quantity } : item))
        : [...prev, { ...line, quantity }];
    });

  const remove = (id: string) => setItems((prev) => prev.filter((item) => item.id !== id));

  return <CartContext value={{ items, setItems, setQuantity, remove }}>{children}</CartContext>;
}

export function useCart() {
  const cart = useContext(CartContext);
  if (!cart) throw new Error("useCart muss innerhalb von CartProvider aufgerufen werden");
  return cart;
}
```

Die Produktansicht stellt die Galerie neben die Kaufbox. Der Quantity Stepper mit `addToCart` startet als Button „Add to cart“ und wird zum Stepper, sobald das Produkt im Warenkorb liegt. Weil sein `value` aus dem Warenkorb kommt, zeigen der Stepper auf der Seite und der im Drawer immer dieselbe Menge.

```tsx
// app/(shop)/products/[slug]/product-view.tsx
"use client";

import type { CartItem } from "@/components/ui/cart-drawer";
import { Price } from "@/components/ui/price";
import { ProductGallery, type ProductGalleryImage } from "@/components/ui/product-gallery";
import { QuantityStepper } from "@/components/ui/quantity-stepper";
import { useCart } from "../../cart-context";

export type Product = CartItem & { images: ProductGalleryImage[]; description: string; stock: number };

export function ProductView({ product }: { product: Product }) {
  const { items, setQuantity } = useCart();
  const { images, description, stock, ...line } = product;
  const inCart = items.find((item) => item.id === product.id)?.quantity ?? 0;

  return (
    <div className="grid gap-6 md:grid-cols-2 md:gap-10">
      <ProductGallery images={images} aspect="1/1" fit="contain" zoom="lens" bleedOnMobile />
      <div className="flex flex-col gap-4 px-4 md:px-0">
        <h1 className="text-2xl font-semibold text-foreground">{product.title}</h1>
        <Price
          price={product.price}
          compareAtPrice={product.compareAtPrice}
          showDiscount
          size="xl"
          currency="USD"
          locale="en-US"
          caption="Kostenlose Lieferung ab $75"
        />
        <QuantityStepper
          addToCart
          value={inCart}
          stock={stock}
          size="lg"
          tone="brand"
          onValueChange={(quantity) => setQuantity(line, quantity)}
        />
        <p className="text-muted-foreground">{description}</p>
      </div>
    </div>
  );
}
```

`fit="contain"` zeigt Produktfotos im Light Mode vollständig auf weißem Grund, genau richtig für Packshots, und `bleedOnMobile` entfernt den Radius unter `md`, damit das Foto bis an den Rand reicht. Gib jedem Bild `width` und `height` mit, dann kennt der Vollbild-Viewer seine Form schon, bevor die Datei geladen ist.

> Live-Demo (Product gallery): Lässt du die Maus auf dem Foto ruhen, zoomt es hinein; ein Klick öffnet den Viewer. Auf Smartphone-Breite wischst du zwischen den Fotos und siehst den Zähler mitlaufen; einen Hover-Zoom gibt es dort nicht. Probier sie unter [Product gallery](https://wingo-ui.com/components/product-gallery) aus und installier sie mit `npx wingo-ui@latest add product-gallery`.

Der Prop `stock` begrenzt den Stepper und zeigt einen Hinweis auf knappen Bestand, sobald der Bestand den Schwellenwert erreicht oder unterschreitet. Diese Ansicht aktualisiert nur den Warenkorb im Client. Um die Position auf dem Server zu speichern, gib den Request aus `onValueChange` zurück: Der Stepper zeigt einen Spinner, bis das Promise abgeschlossen ist, und springt mit einer Meldung zurück, wenn es abgelehnt wird. Nach demselben Prinzip arbeitet auch der Drawer weiter unten. Setz [Reviews](https://wingo-ui.com/components/reviews) unter die Kaufbox, sobald du Bewertungen hast; die Komponente nimmt deine Bewertungsdaten und rendert Zusammenfassung, Filter und Liste.

## Wie verhält sich der Cart Drawer am Smartphone?

Am Laptop gleitet er von rechts herein. Auf kleineren Bildschirmen fährt er als Bottom Sheet mit Griff von unten hoch: Zieh ihn nach unten, tipp daneben oder drück Escape, um ihn zu schließen. Jede Position lässt sich zum Entfernen nach links wischen, und die entfernte Position schrumpft zu einer Zeile mit Undo und einem Countdown von fünf Sekunden. Die Übersicht klappt hinter einem Details-Schalter auf die Summe zusammen, so bleibt der Großteil des Sheets für die Positionen.

Häng ihn in den Header, damit er sich von jeder Seite aus öffnet. Der Drawer zeigt eine neue Menge sofort an und wartet auf dein Promise. Lehnt der Server ab, springt die Position zurück, und die Fehlermeldung erscheint darunter.

```tsx
// app/(shop)/header-cart.tsx
"use client";

import { CartDrawer } from "@/components/ui/cart-drawer";
import { useCart } from "./cart-context";

export function HeaderCart() {
  const { items, setQuantity, remove } = useCart();

  return (
    <CartDrawer
      items={items}
      onQuantityChange={async (id, quantity) => {
        const response = await fetch(`/api/cart/${id}`, {
          method: "PATCH",
          body: JSON.stringify({ quantity }),
        });
        if (!response.ok) throw new Error(await response.text());
        const line = items.find((item) => item.id === id);
        if (line) setQuantity(line, quantity);
      }}
      // läuft, sobald die Undo-Frist vorbei ist oder der Drawer schließt
      onRemove={(id) => {
        remove(id);
        void fetch(`/api/cart/${id}`, { method: "DELETE" });
      }}
      shipping={9.99}
      freeShippingThreshold={75}
      taxRate={0.08}
      pricesIncludeTax={false}
      labels={{ tax: (rate) => `Verkaufssteuer ${rate}` }}
      currency="USD"
      locale="en-US"
      tone="brand"
      checkoutHref="/checkout"
      note="30 Tage kostenlose Rückgabe"
    />
  );
}
```

`pricesIncludeTax={false}` schlägt die US-Verkaufssteuer von 8 % als eigene Zeile oben drauf, wie es in den USA üblich ist. Für Märkte mit Mehrwertsteuer, in denen die ausgezeichneten Preise die Steuer schon enthalten, lässt du den Standardwert `true`. Standardmäßig heißt die Steuerzeile „VAT 8%“, deshalb benennt `labels.tax` sie um. Der Standard-Trigger ist ein Button mit Einkaufstasche und einem Badge, das hüpft, wenn die Anzahl steigt.

> Live-Demo (Cart drawer): Öffne die Tasche, drück bei einer Position auf + und sieh zu, wie die Summe hochzählt, entferne dann eine Position und drück Undo. Auf Smartphone-Breite öffnet sich der Warenkorb als Bottom Sheet, das du nach unten wegziehen kannst. Probier sie unter [Cart drawer](https://wingo-ui.com/components/cart-drawer) aus und installier sie mit `npx wingo-ui@latest add cart-drawer`.

## Wie passt der Checkout dazu?

Der Block [Checkout Page](https://wingo-ui.com/components/checkout-page) nimmt dieselben `CartItem[]`-Positionen, der Checkout-Button des Drawers kann also direkt dorthin führen. Er verwaltet drei Stufen (Warenkorb, Checkout, Bestätigung) und vier Schritte im Checkout (Adresse, Lieferung, Zahlung, Prüfung). Unter 1024px zeigt die Warenkorb-Stufe eine Sticky Bar mit Summe und Continue, sobald der Button der Übersicht aus dem Bild gescrollt ist, und am Smartphone läuft der Checkout im Vollbild.

Zwei Standardwerte solltest du kennen, bevor du ihn anschließt. Jeder Daten-Prop, den du weglässt, fällt auf die Demo-Daten zurück: die Beispielgutscheine, zwei Adressen in San Francisco, Tarife von UPS und FedEx, Testkarten und eine Demo-E-Mail. Außerdem nutzen die Checkout-Schritte standardmäßig rumänische Regeln für Adresse und Steuer-ID (6-stellige Postleitzahlen, die CUI-Prüfung). Eine US-Postleitzahl scheitert also, bis du das Land über die Defaults von `UIProvider` setzt. Die Seite reicht die Shopdaten hinein und hält den Warenkorb im gemeinsamen Context, damit sich nach einer Bestellung auch das Badge im Header leert.

```tsx
// app/(shop)/checkout/checkout.tsx
"use client";

import { useRouter } from "next/navigation";
import { CheckoutPage, type CheckoutPageProps } from "@/components/blocks/checkout-page";
import { UIProvider } from "@/lib/ui-config";
import { useCart } from "../cart-context";

// US-Postleitzahlen und -Telefonnummern im Adressschritt
const US_CHECKOUT = { "checkout-steps": { country: "US" } };

// auf dem Server geladen; jeder weggelassene Prop zeigt die Demo-Daten des Blocks
type ShopData = Pick<
  CheckoutPageProps,
  "coupons" | "savedAddresses" | "deliveryMethods" | "lockers" | "paymentMethods" | "customerEmail" | "guest"
>;

export function Checkout(shop: ShopData) {
  const router = useRouter();
  const { items, setItems } = useCart();

  return (
    <UIProvider defaults={US_CHECKOUT}>
      <CheckoutPage
        {...shop}
        items={items}
        onItemsChange={(next) => {
          setItems(next);
          void fetch("/api/cart", { method: "PUT", body: JSON.stringify(next) });
        }}
        currency="USD"
        locale="en-US"
        freeShippingThreshold={75}
        recommended={[]}
        onPlaceOrder={async (value, totals) => {
          const response = await fetch("/api/orders", {
            method: "POST",
            body: JSON.stringify({ value, total: totals.total }),
          });
          // die Meldung erscheint im Prüfschritt
          if (!response.ok) throw new Error(await response.text());
          return (await response.json()) as { orderNumber: string };
        }}
        onTrackOrder={(orderNumber) => router.push(`/account/orders/${orderNumber}`)}
        onContinueShopping={() => router.push("/")}
      />
    </UIProvider>
  );
}
```

`app/(shop)/checkout/page.tsx` bleibt eine Server Component, die die Shopdaten lädt und `<Checkout {...shop} />` rendert. Ein abgelehntes `onPlaceOrder` zeigt seine Meldung im Prüfschritt und behält alles, was der Käufer eingetippt hat. Unser [Tutorial zur React Checkout Page](https://wingo-ui.com/de/blog/react-checkout-page) zeigt im Detail, wie du Gutscheine auf dem Server prüfst, die Firmenfelder für US-Steuer-IDs umbenennst und die Bestätigung baust.

> Live-Demo (Checkout Page): Ändere eine Menge, löse FALL15 ein und drück dann Continue to delivery, um die Schritte durchzugehen. Scroll auf Smartphone-Breite an der Übersicht vorbei, dann gleitet die Sticky Bar mit der Summe herein. Probier sie unter [Checkout Page](https://wingo-ui.com/components/checkout-page) aus und installier sie mit `npx wingo-ui@latest add checkout-page`.

## Taugen die Marketplace-Blocks für einen Shop mit einer einzigen Marke?

Für Startseite und Suche ja, mit Anpassungen. Die [Marketplace Home Page](https://wingo-ui.com/components/marketplace-home-page) liefert dir die Suche im Hero, Kategoriekacheln, die auf `/search?cat=…` verlinken, eine wischbare Leiste mit Promo-Angeboten und ein Raster mit neuen Artikeln. Zwei Teile sind regional. Das Ortsfeld im Hero listet rumänische Städte aus `lib/ro-locations`, und das Raster New listings filtert nach der Standardstadt Cluj-Napoca. Für einen Markenshop schaltest du mit `showRecent`, `showApp` und `showTrust` ab, was du nicht brauchst, übergibst eigene `categories` und `promoted` und schreibst `onSearch` so, dass es auf deine Suchseite weiterleitet. Kein Prop blendet das Ortsfeld aus. Entfern es also aus der installierten Datei oder richte den Import auf deine eigene Liste. Der Such-Block hält die ganze Suche in der URL und liefert Facetten mit Trefferzahlen; das [Tutorial zum React Marketplace Template](https://wingo-ui.com/de/blog/react-marketplace-template) verdrahtet ihn Schritt für Schritt.

Bei der [Listing Detail Page](https://wingo-ui.com/components/listing-detail-page) sieht es anders aus. Sie ist für Kleinanzeigen gebaut: eine Verkäuferkarte, Send message, Show phone, eine Karte mit dem ungefähren Standort und ein Dialog zum Melden. Einen Button für den Warenkorb gibt es nicht, deshalb nutzt die Produktseite oben Komponenten. Betreibst du einen Marktplatz mit mehreren Händlern, auf dem Käufer die Verkäufer kontaktieren, ist sie ohne Änderungen der richtige Block. Jeder Block wird als Quellcode installiert, du kannst ihn also auch zu einer Produktseite umbauen, wenn dir sein Layout besser gefällt.

## Was macht jeder Screen am Smartphone?

Genau das zeigt dir ein Desktop-Screenshot eines Templates nicht. Deshalb hier jeder Screen unter 768px bzw. 1024px, so wie die Komponenten ausgeliefert werden:

| Screen | Was sich am Smartphone ändert |
| --- | --- |
| Startseite | Die Suchfelder stehen untereinander, der Ort öffnet ein Sheet in voller Höhe, beliebte Suchen scrollen seitlich, die Promo-Leiste zeigt 1,3 Karten |
| Suche | Die Filter wandern in ein Sheet in voller Höhe, dessen Button schon vor dem Anwenden die Treffer der gewählten Filter zählt; die Sortierung öffnet ein Sheet |
| Produktseite | Die Galerie geht auf volle Breite, mit Wischen und einem Zähler 3 / 12, im Viewer funktioniert Pinch-Zoom, Favorit und Teilen behalten 44px große Touch-Ziele |
| Warenkorb | Ein Bottom Sheet mit Griff, nach links wischen zum Entfernen mit Undo, die Übersicht klappt auf die Summe zusammen |
| Checkout | Einspaltiger Warenkorb, eine Sticky Bar mit der Summe, ein Checkout im Vollbild, Bestätigungsbuttons in voller Breite |

Alle diese shadcn Ecommerce-Komponenten respektieren reduzierte Bewegung: Aus Springs werden Fades. Die Fixes für Safe Area, Tap-Highlight und Tastatur, die für jedes Shop-Frontend gelten, erklärt unsere Liste mit [Fixes für eine Web-App, die sich nativ anfühlt](https://wingo-ui.com/de/blog/web-app-that-feels-native) einzeln.

## Wie geht es weiter?

Wenn du einen laufenden Shop willst, ohne ein Backend zu bauen, starte mit Your Next Store. Liegen deine Produkte schon in Shopify, Medusa, Stripe oder deiner eigenen Datenbank, ist ein Next.js shadcn ecommerce template aus Quellkomponenten der kürzere Weg zu einem Shop-Frontend, das am Smartphone überzeugt. Probier zuerst die Demos oben aus. Die Commerce-Blocks und -Komponenten aus diesem Beitrag gehören zu Pro. Mit einem kostenlosen Wingo UI Konto installierst du die kostenlosen Grundbausteine, auf denen sie aufbauen, und testest so die CLI in deiner App, bevor du zahlst. In der [Kategorie Build](https://wingo-ui.com/de/blog/category/build) findest du die anderen Guides, die Screen für Screen vorgehen, und das [Tutorial zum Next.js Admin Dashboard](https://wingo-ui.com/de/blog/nextjs-admin-dashboard-tutorial) behandelt das Backoffice, das dein Shop als Nächstes braucht.

## Komponenten in diesem Artikel

- [Checkout Page](https://wingo-ui.com/components/checkout-page) (Pro): A React checkout page from the cart to Order placed: an editable cart, four checkout steps and the order confirmation. Installation: `npx wingo-ui@latest add checkout-page`
- [Marketplace Home Page](https://wingo-ui.com/components/marketplace-home-page) (Pro): A React marketplace home page with a what and where search, category tiles, a promoted rail, new listings near you and an app band. Installation: `npx wingo-ui@latest add marketplace-home-page`
- [Listing Detail Page](https://wingo-ui.com/components/listing-detail-page) (Pro): A React listing detail page for a classifieds marketplace: photo gallery, price card, seller, map, contact actions and similar listings. Installation: `npx wingo-ui@latest add listing-detail-page`
- [Cart drawer](https://wingo-ui.com/components/cart-drawer) (Pro): A React shopping cart drawer: a side panel on desktop, a bottom sheet on phones, with undo, free delivery progress, a promo code and totals. Installation: `npx wingo-ui@latest add cart-drawer`
- [Product gallery](https://wingo-ui.com/components/product-gallery) (Pro): A React product gallery for detail pages: a swipeable photo stage that zooms under the mouse, a thumbnail rail and a full-screen viewer. Installation: `npx wingo-ui@latest add product-gallery`

## Häufige Fragen

### Gibt es ein kostenloses shadcn ecommerce template?

Ja. Your Next Store und Relivator stehen beide unter MIT-Lizenz auf GitHub. Stand 6. November 2026 braucht Your Next Store einen API-Key seiner gehosteten Commerce-Plattform, und bei Relivator war der letzte Push am 4. Oktober 2025, das Projekt läuft auf Next.js 15.3. Prüf also beide gegen deinen Stack, bevor du eins klonst.

### Hat shadcn/ui Ecommerce-Komponenten?

Stand November 2026 liefert shadcn/ui allgemeine Primitives wie Buttons, Dialoge, Sheets und Formulare, dazu Blocks für Login, Signup und Sidebar, aber keinen Warenkorb, keine Produktgalerie und keinen Checkout. Die kommen aus Registries und Templates von Drittanbietern, die ebenfalls den Quellcode ins Projekt kopieren, darunter die Commerce-Kategorie von Wingo UI.

### Kann ich ein shadcn ecommerce template mit Shopify, Medusa oder Stripe nutzen?

Ein reines Frontend-Template schon, denn die Datenaufrufe schreibst du selbst. Die Blocks von Wingo UI bekommen die Warenkorbpositionen als Props und melden Änderungen über Callbacks wie onItemsChange und onPlaceOrder. Dahinter kann also jede API stehen. Gehostete Starter sind an ihre eigene Plattform gebunden.

### Was sollte ein Warenkorb am Smartphone können?

Er öffnet sich als Bottom Sheet, das du nach unten wegziehen kannst, lässt Positionen per Wischen mit Undo entfernen und hält Summe und Checkout-Button im Blick. Der Cart Drawer von Wingo UI kann alle drei und klappt seine Übersicht hinter einem Details-Schalter auf die Summe zusammen, damit die Positionen genug Platz haben.

### Sind die Ecommerce-Blocks von Wingo UI kostenlos?

Nein. Checkout Page, Cart Drawer, Product Gallery und die Marketplace-Blocks gehören zu Pro ($8 im Monat, $80 im Jahr oder $150 einmalig). Die Grundbausteine darunter, etwa Button, Dialog, Card und Badge, sind kostenlos, du brauchst nur ein Konto mit E-Mail-Adresse. Für Pro gilt eine Rückerstattung innerhalb von 14 Tagen, allerdings nur, solange du noch kein Pro-Element heruntergeladen hast.

---

Quelle: https://wingo-ui.com/de/blog/shadcn-ecommerce-template