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

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:

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:

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 (opens in a new tab) 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 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.

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

// 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.

// 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.

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 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.

// 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.

Wie passt der Checkout dazu?

Der Block 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.

// 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 zeigt im Detail, wie du Gutscheine auf dem Server prüfst, die Firmenfelder für US-Steuer-IDs umbenennst und die Bestätigung baust.

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

Für Startseite und Suche ja, mit Anpassungen. Die 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 verdrahtet ihn Schritt für Schritt.

Bei der 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:

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 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 findest du die anderen Guides, die Screen für Screen vorgehen, und das Tutorial zum Next.js Admin Dashboard behandelt das Backoffice, das dein Shop als Nächstes braucht.

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.