03

E-Commerce-Shops, von Grund auf gebaut

Konzepte für digitale Shops, mit Fokus auf Produktpräsentation, Hierarchie, Stöbern und Kaufabschluss. Diese Seite beginnt mit der Frage, ob ein eigener Build für ein bestimmtes Geschäft überhaupt die richtige Antwort ist — eine Frage, die es sich lohnt ehrlich zu untersuchen, statt Ja anzunehmen.

Ein Produktraster neben einem Warenkorb, als Sinnbild für Shop-Konzepte.
Umfang
Kategorie- und Produktseiten, Suche oder Filter wo der Katalog sie braucht, der Warenkorb und die Übergabe an den Checkout eines Anbieters.
Zahlungen
Niemals selbst gebaut. Der Checkout eines Anbieters, getrennt gehalten — eine Zahlungsschicht ist eine eigene Disziplin.
Vorgehen
Vorher abgesteckt, unterwegs überarbeitet, fertiggestellt statt liegengelassen.
Barrierefreiheit
Vom Raster bis zum Warenkorb per Tastatur bedienbar, von Hand durchlaufen statt nur gescannt.
Quelltext
Der Shop, die Auswertung und das Repository — drei lesbare Dateien hinter jedem Build.

was drinsteckt

Ein Shop berührt mehr Systeme als alles andere, was ich baue

Deshalb lohnt es sich, genau zu sagen, wo der Shop aufhört. Sechs Dinge, aus denen ein eigener Shop besteht — und eines davon ist eine Grenze und kein Feature.

der weg

Raster, Produkt, Warenkorb — und dann eine Wand

Alles bis zum Warenkorb wird als ein Stück mit der Marke gestaltet. Der Schritt danach gehört einem Anbieter, und die Wand wird absichtlich gezogen statt verwischt.

zahlungen

Die Zahlungsschicht wird nie von Hand gebaut

Steuern über Grenzen hinweg, Betrugsbewertung, Rückbuchungen, PCI-Geltungsbereich — das ist ein Vollzeitberuf und eine eigene Disziplin. Wer anbietet, das von Hand zu bauen, bietet eine Haftung mit einer hübschen Oberfläche an.

die zustände, die niemand vorführt

Ausverkauft. Nur noch eins. Diese Variante gibt es nicht.

Ein Warenkorb, der sich selbst geleert hat. Ein Filter, der nichts zurückgibt. Jeder davon ist ein echter Screen, auf den eine echte Käuferin stößt, und jeder davon wird gezeichnet.

varianten

Nur die Kombinationen, die es wirklich gibt

Größe, Farbe, Oberfläche. Was nicht kaufbar ist, wird als nicht verfügbar gezeigt statt versteckt, damit sich niemand in eine Sackgasse klickt und sich anschließend selbst die Schuld gibt.

die beziehung

Die Kundenliste gehört einem, sie ist nicht untervermietet

Domain, Hosting, Auswertung, Repository und die Kundenbeziehung selbst — ab der ersten Woche in Ordnung. Eine Plattform später zu verlassen ist dann eine gewählte Migration und keine, deren Preis man auf dem Weg hinaus erfährt.

der katalog

Migration versteht man nach einem Blick, nicht davor

Einen bestehenden Katalog umzuziehen ist echte Arbeit, deren Umfang niemand kennt, bevor jemand die Daten geöffnet hat. Das ist eine eigenständige Untersuchung und nichts, was man wegannehmen sollte.

die entscheidung

Verdient ein eigener Shop seine Komplexität?

Oft nicht. Marktplätze und gehostete Plattformen erledigen Checkout, Zahlungen, Steuern und Betrugsabwehr besser als alles selbst Gebaute, und eine kleine Händlerin, die sich für eine entscheidet, handelt vernünftig und nicht bequem. Die interessante Frage ist nicht, was im Abstrakten besser ist. Sie lautet, welches von beiden ein bestimmtes Geschäft tatsächlich ist — und die ehrliche Fassung dieser Frage hat eine Seite, auf der der eigene Build verliert.

was für einen marktplatz spricht

Ein Marktplatz oder eine gehostete Plattform ist die richtige Antwort

  • Das Geschäft findet noch heraus, ob sich das Produkt überhaupt verkauft.
  • Die Kundschaft sucht bereits auf dem Marktplatz und nicht nach dem Markennamen.
  • Der Katalog ändert sich täglich, und jemand im Haus muss ihn ändern können.
  • Der riskante Teil des Geschäfts sind Zahlungen, Steuern und Retouren — nicht das Aussehen des Shops.
  • Das Geschäft muss in Wochen verkaufen, und ein Build dauert Monate.

was für einen eigenen build spricht

Ein eigener Shop verdient, was er kostet

  • Die Marke ist das Produkt, und ein Theme lässt sie aussehen wie alle anderen, die dasselbe Theme gekauft haben.
  • Der Kaufweg ist nicht Raster, Produkt, Warenkorb — er ist ein Konfigurator, eine Beratung, ein Abo, ein Formular für Maßanfertigung.
  • Der Plan der Plattform, ihre Apps und ihr Anteil pro Transaktion sind still zu einer Miete geworden, aus der man nicht herauskommt.
  • Der Shop muss per Tastatur bedienbar und für einen Screenreader lesbar sein, und das muss belegbar sein.
  • Kundenbeziehung, Daten und Domain sollen einem gehören statt untervermietet zu sein.

Wenn drei der fünf links auf ein Geschäft zutreffen, gehört das klar gesagt — samt der Plattform, die besser passt. Das ist keine Bescheidenheit. Ein Shop, der für ein Geschäft gebaut wurde, das einen Marktplatz gebraucht hätte, ist ein Shop, der scheitert — und er scheitert mit dem Namen des Erbauers darauf.

das zugeständnis, und die lücke

Was eine Plattform besser kann als ein eigener Build

Den Checkout und alles dahinter. Bei einem eigenen Shop wird das trotzdem nie von Hand gebaut: Der Checkout gehört einem Anbieter, wird getrennt gehalten, und der Build endet an der Übergabe dorthin.

Was keine Plattform von Haus aus mitliefert, ist ein Shop, der für jemanden funktioniert, der keine Maus benutzt. Das ist eine Bau-Entscheidung und keine Tarifstufe, und bei einem eigenen Shop wird sie offen getroffen statt geerbt — jedes Element per Tastatur erreichbar, der Fokus überall sichtbar wo er landet, Änderungen an Menge und Variante angesagt statt still angewendet, und der ganze Weg vom Produktraster bis zum Warenkorb von Hand durchlaufen.

Nach der Praxis von WCAG 2.1 AA gebaut — eine Beschreibung, wie die Arbeit gemacht wird, und keine juristische Einschätzung: kein Abzeichen hier, und auch keine Rechtsbehauptung. Die Probe läuft in jedem Shop: Maus weglegen, vom ersten Produkt bis zum Warenkorb Tabulator drücken und sehen, ob man ankommt.

worauf ich prüfe

Was Teil des Builds ist und was ich einem anderen Projekt überlasse

Gleiche Größe, gleiches Gewicht, beide Spalten. Bei einem Shop ist die rechte Spalte länger als auf jeder anderen Seite hier, weil ein Shop mehr Systeme berührt als alles andere, was hier untersucht wird.

Teil des Builds

  • Art Direction für die Marke gemacht, nicht aus einem Theme abgeleitet.
  • Der Shop selbst — Kategorie- und Produktseiten, Suche oder Filter wo der Katalog sie braucht, der Warenkorb und die Übergabe an den Checkout eines Anbieters.
  • Die Zustände, die niemand vorführt: ausverkauft, nur noch eins, eine Variante die es nicht gibt, ein Warenkorb der sich selbst geleert hat.
  • Jeder Schritt vom Raster bis zum Warenkorb per Tastatur bedienbar, von Hand getestet.
  • Ein Performance-Budget, am Anfang gesetzt und am Ende erneut gemessen, an einem Katalog in realistischer Größe.
  • Struktur, die für eine zweite Sprache und eine zweite Währung bereit ist, auch wo es noch keine gibt.
  • Vollständiger Quelltext, von vorn bis hinten lesbar.
  • Echte Iteration, kein erster Entwurf, der final genannt wird.

Außerhalb dieser Untersuchung

  • Der Zahlungsanbieter, die Steuerlogik und die Betrugsabwehr. Das sind Dienste Dritter, getrennt gehalten, jeder eine eigene Untersuchung.
  • Lager-, Warenwirtschafts-, Buchhaltungs- oder Versandsysteme und jede Brücke dorthin — jeweils eine eigene Untersuchung, niemals stillschweigend angenommen.
  • Katalogdatenpflege und Produktfotografie.
  • Die Migration eines bestehenden Katalogs — echte Arbeit, deren Umfang sich vor dem Blick in die Daten nicht kennen lässt, und eine eigenständige Untersuchung.
  • Laufende Sortimentspflege, Kampagnenseiten und saisonale Änderungen, nachdem ein Build fertig ist.
  • Marktplatz-Einträge, Feeds und Kanalverwaltung.
  • Jede Aussage über Umsätze, Bestellwerte oder Conversion. Das sind Konzept-Builds, keine gemessenen Shops.

der einwand

Der Zielkonflikt, den man ehrlich benennen sollte

Ist ein eigener Shop später schwerer zu ändern?

In Teilen ja, und das ist der ehrliche Handel. Eine Zahlungsart oder eine Versandregel auf einer gehosteten Plattform hinzuzufügen ist ein Schalter; bei einem eigenen Shop ist es Arbeit.

Dafür bekommt man, dass nichts am Design, am Kaufweg oder an den Kundendaten von einer Tarifstufe entschieden wird und nichts davon gemietet ist. Domain, Hosting, Auswertung, Repository und Kundenliste bleiben ab der ersten Woche in Ordnung, sodass ein Weggang eine gewählte Migration ist und keine, deren Preis man auf dem Weg hinaus erfährt. Der Shop besteht aus einfachen Dateien und dem Checkout eines Anbieters — von vorn bis hinten lesbar, ohne Tarifstufe zwischen dem Design und dem, was es kann.

die arbeiten

Was das Portfolio zeigt und was nicht

Unter den zehn gibt es keinen Shop, in dem man etwas kaufen kann. Am nächsten kommt ein produktgeführter Build mit Raster, Produktkarten und einem zählenden Warenkorb — und ohne Checkout dahinter, weshalb ich ihn nicht Shop nennen werde. Was die drei unten zeigen, ist Katalogarbeit: wie eine Menge von Dingen angeordnet, auf der Seite ausgezeichnet und auf einen Blick lesbar gemacht wird.

Ein Katalog aus wenigen, teuren Dingen, 2025

Arke Estates

So gesetzt, dass Zurückhaltung als Selbstsicherheit gelesen wird und nicht als leere Seite. Das umgekehrte Problem zu tausend Artikeln in einem Raster, und das schwerere der beiden.

Eine ausgezeichnete Liste, die Leute lesen, 2021

Ember & Oak

Eine Speisekarte, editorial gesetzt statt als Tabelle — dasselbe Problem, das eine Produktseite hat und fast nie löst.

Produktraster und Warenkorb, 2020

Root & Ritual

Vier Produktkarten, ein chargenbegrenztes Sortiment und ein Warenkorbzähler, der der Seite folgt. Statische Dateien, kein Checkout — die Shop-Oberfläche ohne die Transaktion.

Alle zehn Builds ansehen — alle selbst initiiert, alle laufend, alle mit offenem Quelltext.

e-commerce

Sieh es in den zehn Builds

In den zehn gibt es keinen Checkout, aber das Katalogdenken — Zustände, Varianten, Zurückhaltung unter einem Raster — läuft bereits. Und wenn die Weggabelung oben eher für eine Plattform als für einen Build spricht, ist das auch ein Gespräch wert.

Bitte dreh dein Gerät,
Diese Seite ist hochkant gebaut.