Überblick

Der Großteil des Shopify-Traffics kommt von Mobilgeräten. Daher können bereits kleine Verbesserungen der Benutzerfreundlichkeit (UX) zu überdurchschnittlich hohen Umsätzen führen. In diesem Leitfaden erfahren Sie, wie Sie die Navigation optimieren, um die Anzahl der Klicks zu reduzieren, gestochen scharfe, responsive Bilder ohne Layoutverschiebungen bereitstellen und die Theme-Performance verbessern, sodass sich Seiten auf Smartphones schnell und stabil anfühlen.

Inhalt

Überblick
Schritt 1 – Überprüfen Sie Ihr mobiles Erlebnis
Schritt 2 – Navigation und Menüs vereinfachen
Schritt 3 – Fixierte Kopfzeilen und Schubladen konfigurieren
Schritt 4 – Bilder responsiv und schnell gestalten
Schritt 5 – Layoutverschiebung durch Bilder verhindern
Schritt 6 – Leistung messen und verbessern
Best Practices und Checkliste für mobile UX
Häufig gestellte Fragen und Fehlerbehebung
Ergebnis – so sieht Erfolg aus

Schritt 1 – Überprüfen Sie Ihr mobiles Erlebnis

Betrachten Sie Ihren Shop zunächst aus der Perspektive Ihrer Kunden. Öffnen Sie Ihre Shopseite auf einem echten Smartphone und im Geräteemulator Ihres Browsers. Ihr Ziel ist es, mögliche Probleme aufzudecken: unübersichtliche Menüs, schwer zu bedienende Elemente, langsame Bildladezeiten und Layoutverschiebungen.

Überprüfen Sie das Verhalten der Kopfzeile: Bleibt das Menüsymbol sichtbar und öffnet und schließt sich die Menüleiste erwartungsgemäß?
Tippziele sollten mit dem Daumen leicht zu erreichen sein. Zu nah beieinander liegende Links und Symbole führen zu Fehltippungen.
Beobachten Sie die Bilder beim Laden der Seite. Wenn der Inhalt springt, liegt das wahrscheinlich an einer Layoutverschiebung aufgrund nicht spezifizierter Bildabmessungen.
Messen Sie die grundlegende Leistung: Verwenden Sie Chrome DevTools Lighthouse und notieren Sie sich Largest Contentful Paint und Cumulative Layout Shift.

Viele Probleme auf mobilen Geräten entstehen durch zu viele Menüpunkte oder doppelte Menüpfade. Ein übersichtliches Hauptmenü reduziert die Anzahl der Klicks und hilft Kunden, wichtige Kategorien schnell zu finden.

Beschränken Sie sich auf eine primäre Navigation. Vermeiden Sie es, dieselben Links an mehreren Stellen zu duplizieren.
Reduzieren Sie die Verschachtelung auf Mobilgeräten. Zwei Ebenen reichen in der Regel für die meisten Kataloge aus.
Priorisieren Sie die Shopping-Links: Shop, Kollektionen, Bestseller und Sale vor Über uns oder Blog.
Verwenden Sie kurze, prägnante Etiketten. Ersetzen Sie ausgefallene Namen durch einfache, verständliche Begriffe.

So aktualisieren Sie Menüs im Shopify-Adminbereich

Sie verwalten die Navigation in Shopify und verbinden dann das Menü mit dem Header Ihres Themes.

Gehen Sie im Shopify-Adminbereich zu „Onlineshop“ und dann zu „Navigation“. Öffnen Sie Ihr Hauptmenü.
Entfernen Sie doppelte oder selten genutzte Links. Ordnen Sie die Links so an, dass Shopping-Links an erster Stelle stehen.
Fügen Sie nur unbedingt notwendige verschachtelte Elemente für große Kategorien hinzu. Halten Sie die Struktur flach.
Öffnen Sie den Online-Shop, dann „Designs“ und anschließend „Anpassen“. Wählen Sie im Bereich „Kopfzeile“ Ihr Hauptmenü aus und speichern Sie die Einstellungen.

Schritt 3 – Fixierte Kopfzeilen und Schubladen konfigurieren

Eine gut konfigurierte Kopfzeile spart Zeit auf Mobilgeräten. Fixierte Kopfzeilen halten Suche und Menü in Reichweite, während ein gut funktionierendes Menü-Drawer versehentliches Schließen verhindert.

Aktivieren Sie den fixierten Header, falls Ihr Theme dies unterstützt. Testen Sie ihn auf kleinen Bildschirmen, um sicherzustellen, dass er keine Inhalte verdeckt.
Überprüfen Sie das Scroll- und Fokusverhalten des Menüs. Beim Öffnen sollte der Hintergrund nicht scrollen und der Fokus sollte im Menü bleiben, bis es geschlossen wird.
Stellen Sie sicher, dass die Warenkorb- und Kontosymbole gut sichtbar und groß genug sind, um bequem angetippt werden zu können.

Behebung von Problemen mit dem Header

Wenn Ihre Kopfzeile den Inhalt überlappt, verringern Sie deren Höhe in den Theme-Einstellungen oder deaktivieren Sie die Fixierung auf kleinen Bildschirmen, falls Ihr Theme diese Option bietet. Wenn die Navigationsleiste im Hintergrund scrollt, überprüfen Sie die Navigationsleisteneinstellungen Ihres Themes und aktualisieren Sie es auf die neueste Version.

Schritt 4 – Bilder responsiv und schnell gestalten

Große, nicht optimierte Bilder sind eine der Hauptursachen für langsame Seiten auf Mobilgeräten. Shopify-Themes und die Plattform generieren automatisch verschiedene Bildgrößen. Ihre Aufgabe ist es, sinnvolle Größen und Seitenverhältnisse auszuwählen und das Theme die jeweils passende Datei für jedes Gerät ausliefern zu lassen.

Verwenden Sie hochwertige, aber nicht überdimensionierte Bilddateien. Laden Sie die Quellbilder in etwa der doppelten benötigten maximalen Anzeigegröße hoch.
Verwenden Sie für Fotos vorzugsweise das JPG-Format und für Grafiken mit einfarbigen Flächen das PNG- oder SVG-Format. Bei unterstützten Designs werden AVIF oder WebP möglicherweise automatisch verwendet.
Legen Sie in den Abschnittseinstellungen das Bildseitenverhältnis so fest, dass vor dem Laden der Datei ein reservierter Bereich im Layout vorhanden ist.
Aktivieren Sie Lazy Loading für Bilder unterhalb des sichtbaren Bereichs, um die wahrgenommene Geschwindigkeit zu verbessern.

Aktualisieren Sie die Bildeinstellungen in den Abschnitten

Öffnen Sie den Online-Shop, dann „Designs“ und anschließend „Anpassen“. Wählen Sie eine Vorlage aus, bei der die Bilder langsam laden.
Wählen Sie den Bildbereich aus. Legen Sie ein mobilfreundliches Seitenverhältnis wie 3:4 oder quadratisch fest, sofern Ihr Inhalt dies zulässt.
Stellen Sie sicher, dass Lazy Loading für Bilder, die nicht im Hero-Bereich erscheinen, aktiviert ist. Viele Themes bieten eine entsprechende Einstellung.
Ersetzen Sie zu große Uploads durch komprimierte Versionen. Überprüfen Sie die Dateigrößen und halten Sie diese so klein wie möglich.

Schritt 5 – Layoutverschiebung durch Bilder verhindern

Eine Layoutverschiebung tritt auf, wenn der Browser die Abmessungen eines Bildes nicht im Voraus kennt. Dadurch wird der Inhalt beim Laden der Bilder nach unten verschoben, was auf Mobilgeräten störend wirkt. Sie können dies verhindern, indem Sie Platz über Breite und Höhe oder die Seitenverhältnis-Einstellungen reservieren.

Wählen Sie Abschnittsblöcke, die ein Seitenverhältnis oder eine feste Höhe für Bilder ermöglichen.
Verwenden Sie CSS nicht allein, um Bilder ohne Angabe von Seitenverhältnissen zu skalieren. Der Browser benötigt die intrinsischen Abmessungen.
Überprüfen Sie wichtige Vorlagen wie Produkt- und Kollektionsseiten, um sicherzustellen, dass die Bilder den korrekten Platz einhalten.

Kurze Checkliste für die Stabilität des Layouts

Hero-Bilder reservieren Platz durch ein definiertes Seitenverhältnis.
Die Vorschaubilder in der Produktgalerie führen nicht zu einer unerwarteten Größenänderung des Hauptbildes.
App-Blöcke, die spät geladen werden, verschieben keine Inhalte nach unten. Blenden Sie sie bei Bedarf aus oder verschieben Sie sie nach unten.

Schritt 6 – Leistung messen und verbessern

Die Performance ist ein fortlaufender Prozess aus Messen, Anpassen und erneutem Messen. Konzentrieren Sie sich zunächst auf Largest Contentful Paint (LCP) und Cumulative Layout Shift (CLS), da diese Werte stark mit der subjektiven Geschwindigkeitswahrnehmung Ihrer Website durch die Kunden korrelieren.

Nutzen Sie Lighthouse in den Chrome-Entwicklertools, um schnell einen Ausgangswert zu erhalten. Notieren Sie die Werte und wiederholen Sie den Vorgang nach jeder Änderung.
Deaktivieren oder entfernen Sie nicht benötigte Abschnitte oder App-Blöcke in der Vorlage, wenn diese für die Conversion nicht entscheidend sind. Verwenden Sie die Einstellungen zur Geräte-Sichtbarkeit des Themes nur, wenn Ihr Theme diese bietet.
Hero-Bilder komprimieren und in der Größe anpassen. Die Verkleinerung des größten Bildes bringt oft den größten Erfolg.
Nicht unbedingt notwendige Skripte und Animationen, die das Rendern blockieren, sollten verschoben oder entfernt werden.

Shopify-Anleitungen und -Tools nutzen

Shopify bietet klare Empfehlungen für die Theme-Performance und die Mediendarstellung. Befolgen Sie diese zuerst, bevor Sie erweiterte Optimierungen vornehmen. Einfache Änderungen wie die Anpassung der Bildgröße und das Entfernen von Blöcken führen in der Regel zu den größten Verbesserungen.

Best Practices und Checkliste für mobile UX

Sobald die größten Probleme behoben sind, erstellen Sie für jeden neuen Bereich oder jede neue App eine kurze Checkliste. Vermeiden Sie Fehler, indem Sie auf einem echten Smartphone und mit einem langsamen Netzwerkprofil testen.

Ein primäres Menü, das dem Header mit prägnanten Bezeichnungen zugeordnet ist.
Flache Navigationshierarchie mit Shopping-orientierten Links an erster Stelle.
Hero- und Beitragsbilder mit definierten Seitenverhältnissen und komprimierten Dateien.
Lazy Loading für Medien unterhalb der Falte aktiviert.
Minimale Animationen und verzögerte Ausführung nicht essentieller Skripte auf Mobilgeräten.
Wiederholen Sie die Lighthouse-Tests nach jeder Änderungsgruppe und verfolgen Sie die Ergebnisse im Laufe der Zeit.

Häufig gestellte Fragen und Fehlerbehebung

Verringern Sie die Höhe der Kopfzeile in den Theme-Einstellungen oder stellen Sie die Navigationsleiste auf ein Overlay in voller Höhe um, falls Ihr Theme dies unterstützt. Achten Sie darauf, dass das Schließen-Symbol fixiert und groß genug ist, um es bequem antippen zu können.

Bilder wirken auf Retina-Bildschirmen unscharf.

Laden Sie ein Quellbild hoch, das etwa doppelt so groß wie die maximale Anzeigegröße ist, und lassen Sie das Theme anschließend eine passende Darstellung bereitstellen. Dadurch bleibt die Bildschärfe erhalten, ohne dass eine riesige Datei an jedes Gerät gesendet werden muss.

Lighthouse-Wertung sank nach Hinzufügen einer App

Deaktivieren oder entfernen Sie den App-Block in Vorlagen, in denen er nicht unbedingt erforderlich ist, oder verschieben Sie ihn unter den sichtbaren Bereich. Viele Apps enthalten Skripte, die das Rendern verzögern können. Messen Sie die Auswirkungen vor und nach der Änderung.

Ergebnis – so sieht Erfolg aus

Nach diesen Änderungen finden Kunden Produkte schneller, Seiten laden flüssiger und Bilder werden scharf und klar dargestellt. Die meisten Shops verzeichnen eine höhere Interaktionsrate auf Kategorie- und Produktseiten sowie weniger Absprünge aufgrund langsamer Ladezeiten im Hero-Bereich.