Rund 75 % des Shopify-Traffics und 65 % der Bestellungen kommen heute von mobilen Geräten. Trotzdem wurden die meisten Shopify-Stores nie wirklich für Mobile gebaut, sie wurden für den Desktop entworfen und für den kleineren Bildschirm angepasst. Genau in dieser Lücke geht still und leise Umsatz verloren: lange Ladezeiten, fummelige Navigation, Reibung im Checkout, Inhalte, die ohne Scrollen keinen Sinn ergeben.
Diese Checkliste geht nicht darum, deinen Store „responsive“ zu machen, jedes Shopify-Theme ist das bereits. Sie geht darum, ob dein Store wirklich Mobile-First ist: so gebaut, dass das Handy-Erlebnis an erster Stelle steht und alles andere darauf aufbaut. Unten findest du sechs Bereiche mit konkreten Tests, die du selbst durchführen kannst - plus was zu tun ist, wenn zu viele Punkte unerfüllt bleiben.
Mobile vs. Mobile-First: Warum der Unterschied zählt
Der Unterschied ist strukturell, nicht stilistisch.
- Responsive Design bedeutet, dass sich derselbe Inhalt an den Bildschirm anpasst. Das Layout passt sich an die Breite des Viewports an.
- Mobile-First Design bedeutet, dass das mobile Erlebnis der Ausgangspunkt war, jede Entscheidung (was gezeigt wird, was nicht, wie navigiert wird, wie konvertiert wird) wurde fürs Handy getroffen, und der Desktop bekommt den zusätzlichen Platz als Bonus.
Die Lücke zwischen beiden zeigt sich an Stellen, die Händler selten überprüfen: Ladezeiten im Mobilfunknetz, Größe der Tap-Bereiche, wie viele Klicks vom Produkt zum Checkout, ob Formularfelder die richtige Tastatur öffnen, ob dein Hero-Bild auf einem 6-Zoll-Bildschirm überhaupt zeigt, was du verkaufst.
Wenn dein Store vor 2022 gebaut wurde, oder auf einem Premium-Theme basiert, das primär für visuelle Desktop-Inszenierungen entworfen wurde, ist er mit hoher Wahrscheinlichkeit responsive, aber nicht wirklich Mobile-First. Die gute Nachricht: Der Großteil dieser Lücke lässt sich ohne kompletten Rebuild schließen. Der Rest dieses Guides zeigt dir, wo du genau hinschauen musst.
Die Performance-Checkliste
Mobile Performance ist nicht dasselbe wie Desktop-Performance. Die meisten Händler prüfen ihren PageSpeed-Score einmal und vergessen es danach, aber Desktop und Mobile werden separat gemessen, und Google rankt nach dem Mobile-Score.
- Mobile LCP unter 2,5 Sekunden. Teste deine Startseite, deine wichtigste Produktseite und eine Kategorieseite auf pagespeed.web.dev, im Mobile-Tab. Alles über 2,5 Sekunden kostet dich Conversions.
- Bilder sind für Mobile dimensioniert, nicht heruntergerechnet. Ein 2000 Pixel breites Hero-Bild, das auf dem Handy mit 400 Pixel angezeigt wird, ist verschwendete Bandbreite. Prüfe, ob dein Theme den
image_url-Filter mit passenden Breiten nutzt, Shopify liefert dann automatisch kleinere Varianten auf Mobile aus. - Cumulative Layout Shift (CLS) unter 0,1. Wenn Elemente beim Laden hin und herspringen, Banner, die Inhalte nach unten schieben, Schriftarten, die mitten im Rendern wechseln, verklickt sich der Kunde, wird frustriert und springt ab. PageSpeed misst das direkt.
- Schriftarten blockieren das Rendering nicht. Externe Google Fonts können auf Mobile 200-400 ms Verzögerung verursachen. Schau in deinen Theme-Einstellungen nach einer Option für Systemschriften, oder hoste deine Schrift selbst mit
font-display: swap. - Third-Party-Skripte sind deferred geladen. Chat-Widgets, Popup-Apps, Analytics, Reviews, jedes dieser Skripte erhöht das Gewicht. Wenn ein Skript nicht vor dem Sichtbarwerden der Seite laufen muss, sollte es danach laden, nicht blockieren.
- Du hast auf langsamem 4G getestet, nicht auf WLAN. In den Chrome DevTools kannst du die Netzwerkdrosselung auf „Slow 4G“ stellen und deinen Store neu laden. Die meisten Stores fühlen sich an diesem Punkt zäh an, und genau das erlebt ein echter Kunde im Zug.
Die Navigations und UX-Checkliste
Mobile Navigation ist keine kleinere Version der Desktop-Navigation. Sie ist ein eigenes Design-Problem. Der Daumen reicht nur so weit, der Bildschirm zeigt nur so viel, und die Geduld ist kürzer, wenn jemand einhändig auf dem Handy unterwegs ist.
- Das Menü ist mit einem Daumen erreichbar. Hamburger-Menüs oben rechts sind auf modernen großen Handys einhändig kaum erreichbar. Die besten Mobile-Stores platzieren das Menü weiter unten oder nutzen eine Bottom-Navigation.
- Die Suche ist nach dem ersten Scrollen sichtbar. Wenn ein Kunde erst ein Menü öffnen, dann Suche antippen, dann tippen muss, hast du drei Schritte zur Produktentdeckung hinzugefügt. Auf Mobile sollte Suche einen Tap entfernt sein.
- Filter funktionieren als Drawer, nicht als Sidebar. Desktop-Sidebars lassen sich nicht auf Mobile übertragen. Das sauberste Muster ist ein Filter-Button, der einen Vollbild-Drawer mit allen Optionen öffnet und sich nach dem Anwenden wieder schließt.
- Add-to-Cart ist auf Produktseiten sticky. Wenn ein Kunde am Buy-Button vorbei scrollt, um Reviews oder Beschreibungen zu lesen, sollte der Button unten am Bildschirm sichtbar bleiben. Ohne sticky Button muss er wieder hochscrollen, und viele tun das nicht.
- Varianten-Auswahl nutzt Swatches, keine Dropdowns. Dropdowns öffnen auf Mobile den unhandlichen Native-Picker, verbergen die Optionen und brauchen mehrere Klicks. Sichtbare Swatches (Farbquadrate, Größen-Chips) sind schneller und zeigen alle Optionen auf einen Blick.
- Breadcrumbs laufen nicht aus dem Bildschirm heraus. Lange Kategoriepfade brechen oft unschön um oder schieben Inhalte zur Seite. Teste deine tiefste Produktseite und stelle sicher, dass die Breadcrumb sauber abgeschnitten wird.
Die Checkout und Conversion-Checkliste
Der Checkout ist der Ort, an dem Mobile-First-Entscheidungen am direktesten in Umsatz übersetzt werden. Eine zwei Sekunden lange Verzögerung oder ein zusätzlicher Klick entscheidet zwischen Bestellung und abgebrochenem Warenkorb.
- Apple Pay, Google Pay und Shop Pay sind aktiviert und sichtbar. Sie sollten auf der Produktseite, im Warenkorb und im Checkout erscheinen, nicht erst im letzten Schritt. Express-Checkout-Buttons können die Mobile-Conversion um 20-30 % erhöhen.
- Gast-Checkout ist offensichtlich, nicht versteckt. Eine erzwungene Kontoerstellung auf Mobile ist einer der größten Abbruchgründe. Die Gast-Option sollte auf dem ersten Bildschirm sichtbar sein, nicht hinter einem „Nein danke“-Link versteckt.
- Adress-Autocomplete ist aktiviert. Shopify Checkout unterstützt das nativ. stelle sicher, dass es aktiv ist. Eine komplette Adresse auf der Handytastatur einzutippen ist mühsam; Autocomplete reduziert das auf zwei Klicks.
- Formularfelder öffnen die richtige Tastatur. E-Mail-Felder sollten die E-Mail-Tastatur öffnen (mit @-Zeichen). Telefonfelder sollten den Zahlenblock öffnen. Postleitzahl sollte Zahlen öffnen. Wenn dein Theme generische Input-Typen nutzt, tippen Kunden langsamer und machen mehr Fehler.
- Formularfelder lösen beim Antippen keinen Zoom aus. Wenn iOS in ein Formularfeld hineinzoomt, sobald es angetippt wird, ist deine Schriftgröße unter 16 Pixel. Das ist ein schneller CSS-Fix, aber eine massive UX-Reibung, wenn es nicht behoben wird.
- Es gibt nirgendwo einen „Zur Desktop-Ansicht“-Link. Klingt offensichtlich. Passiert trotzdem. Vor allem in älteren Themes mit Legacy-Code aus Zeiten, in denen die „mobile Seite“ eine eigene URL hatte. Durchsuche dein Theme nach Verweisen wie
?desktop=true,die sollten weg sein.
Die Content-Checkliste
Inhalte, die auf Desktop funktionieren, scheitern auf Mobile oft nicht, weil sie kaputt sind, sondern weil Reihenfolge und Gewichtung falsch sind. Auf dem Handy gilt: Was zuerst kommt, wird gelesen - alles andere ist optional. Wenn danach zu viele Punkte offen bleiben, hilft ein Blick von außen: unser UX/UI-Design-Ansatz.
- Der Hero-Bereich zeigt das Produkt klar. Schöne Lifestyle-Bilder, die erst nach 4 Sekunden Scrollen zeigen, was du verkaufst, funktionieren auf dem Desktop. Auf Mobile verlieren sie Kunden in den ersten 2 Sekunden. Das Produkt sollte ab dem ersten Bildschirm erkennbar sein.
- Wichtige CTAs sind auf Mobile above the fold sichtbar. „Jetzt shoppen“, „Entdecken“, was auch immer deine Hauptaktion ist, sie sollte auf einem normalen 6-Zoll-Bildschirm ohne Scrollen sichtbar sein.
- Reviews und Social Proof sind ohne tiefes Scrollen erreichbar. Die meisten Produktseiten verstecken Reviews ganz unten. Auf Mobile sind das 6-8 Mal Scrollen. Erwäge einen sticky Review-Counter neben dem Preis oder eine Sternebewertung direkt unter dem Produktnamen.
- Produktbeschreibungen sind ohne Zoomen lesbar. Fließtext sollte mindestens 16 Pixel groß sein und genug Zeilenhöhe haben, um angenehm lesbar zu sein. Wenn du auf deinem eigenen Handy die Augen zusammenkneifst, tun deine Kunden das auch.
Wie du das wirklich testest
Der häufigste Fehler von Händlern: Sie testen ihren eigenen Store auf ihrem eigenen Handy, zu Hause, im schnellen WLAN. Das ist nicht das Kundenerlebnis. So testet du wie ein echter Nutzer:
- Chrome DevTools Mobile-Emulation. Öffne deinen Store in Chrome, drücke F12, klicke das Geräte-Toolbar-Icon (oben links in den DevTools) und wähle „iPhone 14“ oder „Galaxy S22“. Das gibt dir den richtigen Viewport, simuliert aber kein Touch-Verhalten und keine echte Netzwerkgeschwindigkeit.
- Netzwerk-Drosselung. Im selben DevTools-Panel: Setze das Netzwerk-Dropdown auf „Slow 4G“. Lade deinen Store neu. Das kommt dem nahe, was jemand im Zug oder in einer Region mit schlechtem Empfang erlebt.
- Test auf echten Geräten. Leih dir ein Android-Handy von Freunden oder Familie. Die meisten Händler testen auf dem iPhone, aber Android macht mehr als 60 % des globalen Mobile-Marktes aus, und die Rendering-Eigenheiten sind unterschiedlich. Wer nur auf iPhone testet, testet für eine Minderheit seines Traffics.
- Der „Beobachte sie beim Kaufen“-Test. Bitte drei Personen, die deinen Store nicht kennen, eine Bestellung auf ihrem Handy zu machen. Hilf nicht. Erklär nichts. Schau einfach zu, wo sie tippen, wo sie zögern und wo sie sich verlaufen. Dieser eine Test zeigt mehr als jedes Analytics-Dashboard.
- Mobile-spezifische PageSpeed-Tests. Lies immer den Mobile-Tab auf pagespeed.web.dev separat vom Desktop-Tab. Die beiden Scores werden unterschiedlich berechnet, und ein guter Desktop-Score garantiert keinen guten Mobile-Score.
Wenn Optimierung nicht mehr reicht
Wenn du diese Checkliste durchgegangen bist und die meisten Punkte trotzdem nicht abgehakt sind, oder wenn jedes Mal, wenn du einen Punkt behebst, ein anderer kaputtgeht, dann fehlt nicht eine Einstellung. Dann wurde dein Theme nicht von Anfang an Mobile-First gebaut.
Typische Anzeichen, dass dein Theme das eigentliche Problem ist:
- Du hast Bilder optimiert, Skripte deferred und Apps deinstalliert, aber Mobile LCP liegt immer noch über 4 Sekunden
- Die mobile Menüstruktur passt nicht zur Desktop-Struktur, was darauf hindeutet, dass das mobile Erlebnis nachgereicht wurde
- Produktseiten auf Mobile haben eine völlig andere visuelle Hierarchie als auf Desktop, und nicht im positiven Sinne
- Jede neue Anpassung erfordert entweder eine neue App oder einen Workaround, weil das Theme zu starr ist
- Das Theme wurde vor 2022 entwickelt und nie grundlegend überarbeitet
In diesen Fällen bringt weitere Optimierung kaum noch etwas. Ein von Grund auf Mobile-First gebautes Theme lädt schneller, konvertiert besser, braucht weniger Apps und ist langfristig leichter zu warten - genau das ist der Kern unserer Shopify-Entwicklung.
Fazit: Mobile-First ist eine Entscheidung, keine Einstellung
Der Shift zu Mobile-First-Commerce ist keine Checkliste, die du einmal abarbeitest. Er ist eine Entscheidung darüber, wie dein Store überhaupt entworfen wird. Jeder Punkt in diesem Guide ist einzeln behebbar, aber wenn du am Ende weniger als die Hälfte abhaken kannst, liegt das Problem nicht an einem einzelnen Punkt. Es liegt an der Architektur darunter.
Fang an, indem du pagespeed.web.dev im Mobile-Modus auf drei deiner wichtigsten Seiten laufen lässt. Geh dann diese Liste mit dem Handy in der Hand durch, nicht mit dem Laptop. Wo du scrollen, doppelt tippen oder die Augen zusammenkneifen musst, machen deine Kunden dasselbe. Jeder Fix summiert sich.
Und wenn das Audit zeigt, dass das größere Problem strukturell ist, ist das keine schlechte Nachricht, es ist Klarheit. Du weißt jetzt, was als Nächstes zu tun ist.
