Shopify mobile Ansicht ändern: Theme fürs Handy prüfen
Die mobile Ansicht deines Shopify-Shops änderst du im Theme-Editor, im selben Theme wie die Desktop-Ansicht. Abschnitte, Bilder und Texte gelten für Desktop und Handy; ob dein Theme eigene Einstellungen für Mobilgeräte hat, steht in seiner Dokumentation. Arbeite an einer Kopie des Themes, schick dir deren Vorschau aufs Handy und prüfe dort Schrift, Bilder, Buttons und Ladezeit, bevor du veröffentlichst.
Erst die Zahlen
Wie wichtig das Handy für deinen Shop ist, zeigt der Bericht „Sitzungen nach Gerät“ unter Statistiken > Berichte. Kommt der größte Teil der Besuche von Smartphones, prüfst du jede Änderung zuerst dort. Die Conversion-Rate nach Gerätetyp und die weiteren Hebel für mehr Käufe beschreibt unser Beitrag zur Conversion-Rate-Optimierung.
Mobile Ansicht im Theme-Editor
- Dupliziere unter Onlineshop > Themes dein veröffentlichtes Theme, damit Besucher:innen Zwischenstände nicht sehen.
- Öffne die Kopie im Theme-Editor und schalte die Vorschau auf die Handy-Ansicht um.
- Ändere Abschnitt für Abschnitt und sieh in den Einstellungen jedes Abschnitts nach, ob dein Theme dort Optionen für Mobilgeräte anbietet.
- Teile die Vorschau der Kopie und öffne den Link auf deinem eigenen Smartphone. Laut Shopifys Hilfe Themes hinzufügen, in der Vorschau anzeigen und kaufen lässt sich die Vorschau jedes unveröffentlichten Themes teilen, die des veröffentlichten Themes aber nicht.
- Veröffentliche die Kopie erst, wenn alle Seiten auf dem Handy funktionieren.
Die Vorschau im Editor zeigt nicht, wie sich Tastatur, Adressleiste und Touch auf einem echten Gerät verhalten. Teste deshalb mindestens auf einem iPhone und einem Android-Gerät. Hat dein Theme in der Themes-Liste das Abzeichen Canvas, öffnet es sich laut Shopify nur im separaten Editor Canvas und nicht im Theme-Editor. Was du im Theme-Editor ohne Code ändern kannst, zeigt unser Beitrag Shopify-Theme anpassen.
Was du für das Handy prüfst
Shopifys Hilfe Zugänglichkeit für Themes nennt Werte, die auf kleinen Bildschirmen besonders zählen:
| Element | Richtwert laut Shopify | Was du am Handy prüfst |
|---|---|---|
| Fließtext | mindestens 16 px, nicht im Blocksatz | Lässt sich die Beschreibung ohne Zoomen lesen? |
| Kontrast | Fließtext und Buttons 4,5:1, große Schrift ab 24 px 3:1 | Ist Text auf Bannerbildern in der Sonne lesbar? |
| Links | unterstrichen oder anders hervorgehoben, im selben Tab öffnen | Öffnet kein Link ein neues Fenster? |
| Slideshows und Videos | kein automatisches Abspielen; laufen sie doch automatisch, brauchen Slideshows Steuerelemente und Videos laufen ohne Ton | Lässt sich die Slideshow mit dem Daumen anhalten? |
Achte außerdem darauf, ob Preis, Varianten und Kaufen-Button auf der Produktseite ohne Scrollen sichtbar sind und ob sich die Menüpunkte mit dem Finger treffen lassen. Ob dein Theme Bannerbilder auf dem Handy anders zuschneidet und welche Bildgröße es für den mobilen Ausschnitt empfiehlt, steht in der Dokumentation des Themes; für Startseiten mit großem Bild haben wir den Aufbau im Beitrag zur Startseite beschrieben.
Ladezeit auf dem Handy
Laut Shopifys Hilfe Verbesserung der Leistung deines Onlineshops bremsen das Theme, installierte Apps und Code von Drittanbietern am meisten; auch zu viele Abschnitte auf einer Seite kosten Zeit. Die Web-Performance-Berichte unter Statistiken > Berichte zeigen Messwerte echter Besucher:innen, PageSpeed Insights prüft einzelne Seiten. Entferne Abschnitte, die auf dem Handy nur Platz kosten, und deinstalliere Apps, die du nicht mehr nutzt. Bilder, die erst beim Scrollen laden sollen, behandelt unser Beitrag zu Lazy Loading.