Webdesign für Onlineshops: die Strecke bis zum Kaufabschluss

Shopsystem: Shopware 6, WooCommerce oder Shopify

Die Systementscheidung ist eine Entscheidung über Kontrolle, laufenden Aufwand und Grenzen. Wir empfehlen sie anhand Ihres Sortiments und Ihrer Prozesse, nicht anhand einer Hauslösung.

Shopware 6 eignet sich für gewachsene Sortimente, eigene Preis- und Versandlogiken und ERP-Anbindungen. Der Kern der Community Edition steht unter der MIT-Lizenz und ist selbst hostbar, das heißt: Sie behalten Zugriff auf den Serverstack, können Caching, Suche und Datenbank selbst dimensionieren und sind bei Erweiterungen nicht auf eine Freigabe angewiesen. Der Preis dafür ist Betriebsverantwortung.

WooCommerce ist eine GPL-lizenzierte Erweiterung für WordPress und erbt dessen Theme- und Plugin-Ökosystem samt Update-Pflichten. Das ist stark, wenn Content und Shop verzahnt sein sollen, also etwa Ratgeberinhalte, die direkt auf Produkte führen. Es ist schwach, wenn zwanzig Plugins die Kaufstrecke gemeinsam bestimmen und jedes Update ein Risiko darstellt. Wir halten die Zahl der Erweiterungen im Checkout bewusst klein.

Shopify läuft als gehostete SaaS-Plattform ohne Zugriff auf den Serverstack. Betrieb, Skalierung und Sicherheitsupdates sind damit kein Thema mehr, dafür enden Anpassungen dort, wo die Plattform sie enden lässt, insbesondere im Checkout. Für standardisierte Sortimente mit klaren Prozessen ist das ein guter Tausch, für Sonderlogiken eine Sackgasse.

Die ehrliche Fassung: Alle drei Systeme können einen Shop betreiben. Der Unterschied zeigt sich im dritten Jahr, wenn Sortiment, Datenanbindung und Marketinganforderungen gewachsen sind.

Rechtspflichten, die im Layout sitzen

Im Onlineshop sind mehrere Rechtspflichten keine Textbausteine für den Footer, sondern Vorgaben an konkrete Bildschirmelemente. Wir setzen sie im Design um, statt sie nachträglich anzukleben. Rechtsberatung leisten wir nicht, die Prüfung im Einzelfall gehört zu Ihrem Anwalt.

Button-Lösung. Der Bestellbutton muss gut lesbar mit nichts anderem als “zahlungspflichtig bestellen” oder einer entsprechend eindeutigen Formulierung beschriftet sein (§ 312j Abs. 3 BGB). “Weiter”, “Bestellung abschließen” oder ein reines Icon reichen nicht. Direkt darüber gehört die Bestellübersicht mit Ware, Gesamtpreis, Versandkosten und Lieferzeit.

Preisangaben. Gegenüber Verbrauchern ist der Gesamtpreis inklusive Umsatzsteuer und sonstiger Preisbestandteile anzugeben, dazu die Information, ob Versandkosten anfallen und in welcher Höhe (§ 3 und § 6 PAngV 2022). Das betrifft Kategorieseite, Produktseite, Warenkorb und Checkout gleichermaßen, außerdem Grundpreise, wo sie einschlägig sind.

Widerruf. Die Widerrufsfrist beim Verbrauchsgüterkauf im Fernabsatz beträgt 14 Tage und beginnt bei Warenlieferung mit Erhalt der Ware (§ 355 Abs. 2, § 356 Abs. 2 BGB). Die Belehrung muss auffindbar sein, bevor bestellt wird, nicht nur in der Bestätigungsmail.

Barrierefreiheit (BFSG). Das Barrierefreiheitsstärkungsgesetz gilt seit dem 28. Juni 2025 unter anderem für Dienstleistungen im elektronischen Geschäftsverkehr, also für Onlineshops mit Verbraucherverkauf (§ 3 und § 38 BFSG). Kleinstunternehmen mit weniger als 10 Beschäftigten und höchstens 2 Mio. Euro Jahresumsatz oder Jahresbilanzsumme sind bei Dienstleistungen ausgenommen, für Produkte gilt diese Ausnahme nicht. Praktisch heißt das: ausreichende Kontraste, tastaturbedienbarer Checkout, beschriftete Formularfelder, sichtbarer Fokus, verständliche Fehlermeldungen. Das sind dieselben Maßnahmen, die die Abbruchquote senken.

Einwilligung für Tracking. Für das Speichern von und den Zugriff auf Informationen im Endgerät, etwa Tracking- und Marketing-Cookies eines Shops, ist eine Einwilligung erforderlich, solange keine der gesetzlichen Ausnahmen greift (§ 25 TDDDG). Der Consent-Dialog gehört deshalb in die Performance-Planung: Er lädt als eines der ersten Elemente und verschiebt im schlechtesten Fall das gesamte Layout.

Ladezeit unter Sortimentslast

Ein Shop mit acht Produkten ist immer schnell. Interessant wird es bei 4.000 Artikeln, Filtern, Varianten, Bewertungen und drei Marketing-Skripten. Wir messen gegen die Core Web Vitals: Google bewertet sie als “gut”, wenn LCP höchstens 2,5 Sekunden, INP höchstens 200 Millisekunden und CLS höchstens 0,1 beträgt, gemessen am 75. Perzentil der Seitenaufrufe. INP hat FID abgelöst und ist seit März 2024 der offizielle Messwert für Interaktivität, was besonders für Filter, Variantenauswahl und den Warenkorb-Button relevant ist.

Die Hebel, die im Shop tatsächlich etwas bringen: Bilder in modernen Formaten und in der Größe, in der sie angezeigt werden; Lazy Loading für alles unterhalb der ersten Bildschirmhöhe, aber ausdrücklich nicht für das Hauptproduktbild; feste Platzhaltergrößen für Bilder und Banner gegen Layoutsprünge; Server- und Objektcaching für Kategorielisten; und eine harte Obergrenze für Drittanbieter-Skripte. Das 75. Perzentil ist dabei der ehrliche Maßstab, weil es die langsamen Geräte und Mobilverbindungen einschließt, statt sie wegzumitteln.

Product- und Offer-Markup

Ihre Produkte sollen in der Suche mit Preis und Verfügbarkeit erscheinen, nicht als blauer Textlink. Für die Anzeige als Produktergebnis verlangt Google Product-strukturierte Daten mit den Offer-Feldern price und priceCurrency sowie availability. Wir erzeugen dieses Markup aus den Shopdaten heraus, nicht per Hand, damit es bei Preisänderungen und Ausverkauf automatisch stimmt. Falsche Preise im Markup sind schlimmer als kein Markup: Sie führen zu Klicks, die im Warenkorb enttäuscht werden, und im Wiederholungsfall zum Verlust der Darstellung.

Beweis führen wir über Kennzahlen

Eine Referenzgalerie beweist, dass ein Shop existiert. Sie beweist nicht, dass er verkauft. Wir arbeiten deshalb mit drei Größen, die vor und nach jedem Eingriff erhoben werden:

• Conversion Rate, gesamt und je Einstiegsseite, damit sichtbar wird, ob ein Problem am Sortiment oder an der Strecke liegt.
• Warenkorbabbruchquote, aufgeschlüsselt nach Schritt, weil “Versandkosten zu spät” und “Registrierung erzwungen” unterschiedliche Reparaturen brauchen.
• LCP und INP auf Kategorie, Produktdetailseite und Checkout getrennt, weil genau diese drei Seitentypen unterschiedlich belastet sind.

Dazu kommen Umsatz je Sitzung und Retourenquote, wenn Produktbeschreibung und Bildsprache im Verdacht stehen. Vorher-nachher wird über einen definierten Zeitraum verglichen, nicht über zwei gute Wochen.

Ein Wort zur Nachfrage, weil wir es lieber offen sagen: Der Begriff “Webdesign Onlineshops” hat laut DataForSEO ein Suchvolumen von 10 Suchanfragen pro Monat bei einer Keyword-Difficulty von 7, während das verwandte “Webdesign Referenzen” bei 90 Suchen und 4,12 Euro CPC liegt. Solche Seiten gewinnt man nicht über Volumen, sondern über Genauigkeit. Genau so gehen wir auch Ihr Sortiment an: Die wenigen Suchanfragen mit Kaufabsicht sind mehr wert als die vielen ohne.

Wie ein Projekt abläuft

1. Bestandsaufnahme. Messung der vier Stationen, Auslesen der vorhandenen Analytics-Daten, technischer Check der Ladezeiten und der Pflichtangaben.
2. Entscheidung Shopsystem. Migration oder Weiterbau, begründet an Sortiment, Schnittstellen und Betriebsmodell.
3. Umsetzung der Strecke. Kategorie, PDP, Warenkorb und Checkout als zusammenhängendes Design, inklusive Rechtselementen und Markup.
4. Messung und Nachbesserung. Die gleichen Kennzahlen wie in Schritt 1, gleiche Methode, damit der Vergleich trägt.

Wenn Sie einen bestehenden Shop haben, beginnen wir mit Schritt 1 und legen Ihnen eine Liste der Verlustpunkte vor, sortiert nach geschätztem Umsatzeffekt. Sie entscheiden danach, wie weit wir gehen. Schreiben Sie uns kurz, welches System Sie einsetzen und wie viele Artikel Ihr Sortiment umfasst, dann kommt die erste Einschätzung ohne Umweg.