Benutzererfahrungseinstellungen

Ausgewählte Links

1. Company XYZ-Dokumentation zu Einstellungen zur Benutzererfahrung
2. Shopify-Dokumentation zum Theme-Editor

Hilfreiche Videos

Shopify Academy-Video: Ihren Store anpassen

Shopify Academy-Video: Ihren Store anpassen

Mit diesen Einstellungen steuern Sie, wie sich Browsing- und Shopping-Interaktionen im gesamten Theme anfühlen. Sie prägen typische Kundentouchpoints wie das Hinzufügen von Produkten zum Warenkorb, die Navigation über den Header, die Anzeige von Produktbildern und das Wechseln zwischen Seiten. Einen umfassenderen Überblick über den Editor finden Sie in Shopify-Dokumentation zum Theme-Editor

Für eine Funktionsübersicht von Company XYZ siehe Benutzererfahrung.

Warenkorbverhalten

Der Stil zum Hinzufügen zum Warenkorb bestimmt, was Kundinnen und Kunden unmittelbar nach dem Hinzufügen eines Artikels sehen. Diese Wahl kann spürbar beeinflussen, wie schnell sie weiter stöbern oder zum Checkout wechseln.

1. Wählen Sie Show mini cart, wenn Sie direktes Feedback wünschen, ohne die aktuelle Seite zu verlassen.
2. Wählen Sie Redirect to cart, wenn die Warenkorbseite wichtige Hinweise, Upsells oder nächste Schritte enthält.
3. Wählen Sie Update icon only, wenn Sie die geringste Unterbrechung und den schnellsten Browsing-Ablauf wünschen.

Wählen Sie das Warenkorbverhalten auf Grundlage Ihres Verkaufsablaufs und nicht nur nach dem Aussehen. Eine Weiterleitung ist expliziter, während leichtere Reaktionen das weitere Einkaufen unterstützen.

Visuelles Feedback und Bewegung

Overlay-Blur, Hover-Effekte und Seitenübergänge tragen alle dazu bei, wie ausgereift sich der Storefront anfühlt. Zusammen verwendet, können sie das Erlebnis verfeinern, zu viele Effekte können das Browsing jedoch unruhig wirken lassen.

Overlay-Blur mildert die Seite hinter Drawern oder mehrschichtigen Interaktionen ab. Er funktioniert am besten, wenn der aktive Inhalt sich weiterhin klar vom Hintergrund abhebt.

Seitenübergänge sorgen für flüssigere Bewegungen zwischen Seiten. Ein dezenter Übergang kann dazu beitragen, dass der Store zusammenhängend wirkt, besonders bei designorientierten Storefronts; einfachere Bewegung fühlt sich jedoch meist schneller und klarer an.

Tipp

Wenn Sie mehrere Bewegungseffekte verwenden, halten Sie jeden einzelnen dezent, damit die Produktentdeckung leicht überschaubar bleibt.

Anzeige von Produktbildern

Der Galerie-Zoom steuert, wie Kundinnen und Kunden Produktbilder genauer betrachten. Eine Lightbox ist besonders nützlich, wenn die Fotografie wichtige Details wie Textur, Finish, Maßstab oder Verarbeitung zeigt.

Wenn Ihre Bilder bereits schlicht, eng zugeschnitten oder auf der Seite groß genug sind, kann das Deaktivieren des Zooms ein klareres Erlebnis schaffen. Prüfen Sie diese Einstellung sowohl auf dem Desktop als auch auf dem mobilen Gerät, damit die Bildanzeige weiterhin natürlich wirkt.

Hover-Effekte für Karten

Die Hover-Einstellungen für Karten beeinflussen, wie Produkt- und Inhaltskarten beim Browsing reagieren. Das Vergrößern von Karten beim Hover fügt Bewegung und Gewichtung hinzu, während Bildfilterung einen stärker geschichteten visuellen Effekt erzeugen kann.

Diese Einstellungen eignen sich gut, wenn Sie einen interaktiveren Storefront wünschen. Wenn Ihr Markenstil minimal ist oder Ihre Bildsprache bereits visuell dicht wirkt, verbessert eine dezentere Hover-Behandlung oft die Klarheit.

Hinweis

Hover-Effekte sind auf geräte mit Zeigegerät am deutlichsten sichtbar. Daher sollte sich der Karteninhalt auch ohne Hover-Feedback klar und vollständig anfühlen.

Header-Verhalten

Das Sticky-Header-Verhalten verändert, wie die Navigation verfügbar bleibt, während Kundinnen und Kunden scrollen. Da der Header in großen Teilen des Storefront angezeigt wird, kann diese Einstellung einen breiten Einfluss auf den Browsing-Komfort haben.

1. Wählen Sie Fixed, wenn der ständige Zugriff auf Navigation, Suche oder Warenkorb am wichtigsten ist.
2. Wählen Sie Hide on scroll, wenn Sie ein Gleichgewicht zwischen Sichtbarkeit und Bildschirmfläche wünschen.
3. Wählen Sie Off, wenn Sie die sauberste Seitendarstellung bevorzugen und die Navigation bereits leicht erreichbar ist.

Ein Sticky-Header ist besonders auf Mobilgeräten oft hilfreich, weil die Rückkehr zur Navigation dort mehr Aufwand erfordern kann.

Nutzungshinweise

1. Warenkorbablauf an die Absicht anpassen. Verwenden Sie ein leichteres Feedback beim Hinzufügen zum Warenkorb für weiteres Browsing, und nutzen Sie eine Weiterleitung zum Warenkorb, wenn die Warenkorbseite die Conversion unterstützt.
2. Bewegung abgestimmt einsetzen. Kombinieren Sie Blur, Hover-Effekte und Übergänge sorgfältig, damit der Storefront ausgereift und nicht ablenkend wirkt.
3. Zoom dort einsetzen, wo Details verkaufen. Aktivieren Sie den Bildzoom, wenn Kundinnen und Kunden von einer genauen Betrachtung profitieren, und verzichten Sie darauf, wenn er wenig Mehrwert bietet.
4. Zugriff auf Navigation sichern. Wählen Sie ein Header-Verhalten, das zu Ihrer Menü-Tiefe, der mobilen Nutzung und der Häufigkeit passt, mit der Kundinnen und Kunden schnellen Zugriff auf Suche oder Warenkorb benötigen.
5. Auswirkungen auf das Layout prüfen. Testen Sie das Sticky-Header-Verhalten mit dem umliegenden Seitenlayout und der Viewport-Größe, damit wichtige Inhalte sichtbar bleiben, statt beengt zu wirken.
6. Gemeinsame Touchpoints überprüfen. Prüfen Sie nach Änderungen an diesen Einstellungen Produktseiten, Kollektionsseiten, Karten, Navigation und Warenkorb-Interaktionen zusammen, da sie mehrere Bereiche des Themes beeinflussen können.