Design, das den Kontakt mit dem CMS übersteht
Die meisten Storefronts scheitern nicht an der Ästhetik, sondern an den Nähten: ein Template, das einen langen Produktnamen nicht trägt, ein Badge ohne Platz, ein Abschnitt, den niemand umsortieren kann. Wir gestalten Komponenten samt ihren Ausnahmen, halten die Regeln fest und bauen sie so, dass das Marketingteam Seiten selbst zusammenstellt.
Die Seiten, die wir gestalten, und welche Entscheidung jede Seite trägt
Ein Shop ist eine Folge kleiner Entscheidungen. Wir gestalten jede Seite um die eine Entscheidung, die sie tragen muss, und prüfen das Design an genau dieser Entscheidung.
Kollektionsseiten: Welche Produkte verdienen einen zweiten Blick? Filter, die abbilden, wie Menschen auswählen (Größe, Material, Einsatz), eine Sortierung, die Lagerware nicht versteckt, und Produktkarten mit Preis, Varianten und Verfügbarkeit ohne Klick.
Produktseiten: Ist das das richtige Produkt, und kann ich dem Shop vertrauen? Eine Variantenauswahl mit Lagerbestand, Lieferung und Rückgabe direkt am Kaufbutton und Spezifikationen aus strukturierten Daten statt einer Textwand.
Suche: Finde ich es schnell? Vorschläge während der Eingabe, hilfreiche Seiten bei null Treffern und Synonyme für die Begriffe, die Ihre Kunden eintippen, nicht die aus Ihrem Katalog.
Warenkorb: Stimmt die Summe mit meiner Erwartung überein? Schwellen für kostenlosen Versand, Rabatte und Lieferzeiten sichtbar vor dem Checkout, damit die Überraschung nicht beim Bezahlen kommt.
Checkout: Kann ich ohne Zweifel abschließen? Der Shopify-Checkout ist kein Theme-Template. Wir gestalten ihn innerhalb von Checkout Extensibility. Auf Shopify Plus gehören zusätzliche Inhalte und Felder in den Schritten Information, Versand und Zahlung dazu.
B2B-Einkäufer entscheiden anders: Schnellbestelllisten, kundenspezifische Preise, Nachbestellungen. Mehr dazu unter Shopify B2B.
Gestaltet für die Theme-Architektur von Shopify
Seit Online Store 2.0 kann jede Seite eines Shopify-Themes ein JSON-Template sein, das aus Sections besteht, und Sections bestehen aus Blocks. Ihr Team fügt sie im Theme Editor hinzu, ordnet sie neu oder entfernt sie, ohne Entwickler. Wir gestalten innerhalb dieses Systems, nicht darüber hinweg.
Das System hat Grenzen, und ein gutes Design berücksichtigt sie. Laut Shopify-Dokumentation rendert ein JSON-Template bis zu 25 Sections, jede Section enthält bis zu 50 Blocks, und ein Theme umfasst höchstens 300 Theme Blocks. Theme Blocks lassen sich über Sections hinweg wiederverwenden und ineinander verschachteln. Die Horizon-Themes von Shopify, vorgestellt mit der Summer ‘25 Edition, sind so aufgebaut.
Sections mit jeweils einer Aufgabe und Einstellungen, die so heißen, wie Ihr Team spricht.
Inhalte, die sich je Produkt unterscheiden, etwa Größen, Pflege oder Spezifikationen, als Metafields: einmal mit dem Template verbunden, je Produkt befüllt.
Wiederkehrende Inhalte wie Größentabellen, Designer oder Filialen als Metaobjects. Mit der Online-Store-Capability erhält jeder Eintrag eine eigene Seite und URL.
Header und Footer als Section Groups, damit eine Kampagne sie ohne Code anpassen kann.
Das Ergebnis: Eine neue Kampagnenseite wird aus vorhandenen Sections zusammengestellt, nicht neu gebaut. Wo ein Theme nicht trägt, was Sie brauchen, sagen wir das und prüfen Shopify Development oder Headless Shopify.
Performance, Mobile und Barrierefreiheit
Geschwindigkeit entscheidet sich im Design. Hero-Videos, Karussells und zusätzliche Schriftdateien kosten Ladezeit, bevor es Code gibt. Deshalb legen wir schon im Design Budgets fest, gemessen an den Core-Web-Vitals-Schwellen von Google:
Largest Contentful Paint (LCP): höchstens 2,5 Sekunden.
Interaction to Next Paint (INP): höchstens 200 Millisekunden.
Cumulative Layout Shift (CLS): höchstens 0,1.
Google bewertet diese Werte am 75. Perzentil echter Seitenaufrufe, getrennt nach Mobile und Desktop. Seit Juli 2024 crawlt und indexiert Google alle Websites mit dem Smartphone-Crawler, also rankt die mobile Version. Wir gestalten Mobile First: Buttons in Daumenreichweite, Filter in einer Schublade, kein kleingedrücktes Desktop-Layout.
Barrierefreiheit ist inzwischen Pflicht. Der European Accessibility Act gilt seit dem 28. Juni 2025, in Deutschland umgesetzt durch das Barrierefreiheitsstärkungsgesetz (BFSG), und erfasst E-Commerce-Dienste für Verbraucher in der EU. Kleinstunternehmen, die Dienstleistungen erbringen (weniger als 10 Beschäftigte und Jahresumsatz oder Jahresbilanzsumme von höchstens 2 Mio. €), sind ausgenommen. Für alle anderen ist EN 301 549 der praktische Maßstab, aufbauend auf WCAG 2.1 Stufe AA. Wir gestalten mit mindestens 4,5:1 Kontrast für Fließtext, sichtbarem Fokus, vollständiger Tastaturbedienung und Touch-Flächen von mindestens 24 × 24 Pixeln: die Messlatte, die Shopify für den eigenen Theme Store anlegt.
Vorgehen und was Sie erhalten
Fünf Phasen. Jede endet mit einem Ergebnis, das Sie prüfen und freigeben.
Analyse: Analytics, Suchbegriffe im Shop, Session-Aufzeichnungen, sofern vorhanden, und eine Bewertung des aktuellen Shops. Wir suchen, wo Kunden abspringen, und warum.
Wireframes: Struktur je Seitentyp, Mobile First. Inhalte und Hierarchie stehen fest, bevor etwas fertig aussieht.
UI und Design System in Figma: Komponenten, Typografie, Farbe, Abstände und jeder Zustand, auch leer, Fehler, ausverkauft und Laden. Jede Komponente entspricht einer Shopify-Section oder einem Block.
Umsetzung: Unsere Entwickler bauen das Theme aus der Figma-Datei, mit Sections, Blocks und Metafields wie gestaltet.
Test: auf echten Geräten, gegen die Core-Web-Vitals-Budgets und mit einer Prüfung der Barrierefreiheit, vor dem Launch.
Sie erhalten die Figma-Datei mit dem Design System, ein Theme, das Ihr Team selbst erweitern kann, eine Dokumentation jeder Section und ihrer Einstellungen sowie eine Übergabe-Session für die Menschen, die den Shop betreiben. Wechseln Sie gleichzeitig die Plattform? Dann laufen Design und Shopify-Migration als ein Projekt. Auf Shopify Plus gehört das Checkout-Design dazu.
F.A.Q.
Wir beantworten gern alle Ihre Fragen
Können Sie unseren Shop neu gestalten, ohne das Theme zu wechseln?
Oft ja. Nutzt Ihr Theme die JSON-Templates von Online Store 2.0, gestalten wir Templates und Sections innerhalb des Themes neu. Bei einem älteren Theme mit festen Templates ist ein neues Theme meist weniger Aufwand als ein Umbau. Das entscheiden wir in der Analysephase, nicht vorab.
Wie viel vom Shopify-Checkout lässt sich anpassen?
Weniger als ein Theme, und das ist gewollt. checkout.liquid funktioniert seit dem 13. August 2024 nicht mehr auf den Seiten für Information, Versand und Zahlung; Anpassungen laufen jetzt über Checkout Extensibility. Checkout UI Extensions in diesen drei Schritten gibt es nur mit Shopify Plus. In anderen Plänen konzentriert sich das Design auf Branding sowie die Danke- und Bestellstatusseite.
Gilt der European Accessibility Act für unseren Shop?
Wenn Sie an Verbraucher in der EU verkaufen und kein Kleinstunternehmen sind, sehr wahrscheinlich ja. Er gilt seit dem 28. Juni 2025; Kleinstunternehmen, die Dienstleistungen erbringen, mit weniger als 10 Beschäftigten und höchstens 2 Mio. € Umsatz oder Bilanzsumme, sind ausgenommen. Lassen Sie Ihre genauen Pflichten rechtlich prüfen. Wir sorgen dafür, dass das Design WCAG 2.1 Stufe AA erfüllt.
Schadet ein Redesign unseren Rankings?
Nicht, wenn es geplant ist. Bei einem Redesign im selben Shopify-Shop bleiben die URLs von Produkten und Kollektionen erhalten. Das Risiko liegt woanders: entfernte Inhalte, geänderte Überschriften und langsamere Seiten. Wir erfassen die rankenden Inhalte vor dem Design und prüfen die Geschwindigkeit vor dem Launch.
Gehören die Designdateien uns?
Ja. Sie erhalten die Figma-Datei mit allen Komponenten und Zuständen sowie eine Dokumentation der Sections und ihrer Einstellungen. Ihr eigenes Team oder ein anderer Partner kann damit weiterarbeiten, ohne neu anzufangen.