Erfolgreich
Warenkorb
Fügen Sie Ihrer Navigation ein Warenkorbsymbol hinzu und passen Sie dessen Platzierung und Sichtbarkeit für jedes Gerät an.
Verwenden Sie diesen Block, um dem Hauptmenü ein Warenkorbsymbol hinzuzufügen und es für Ihr Header-Layout zu positionieren. Einen umfassenderen Überblick darüber, wie Theme-Blöcke funktionieren, finden Sie in der Shopify-Dokumentation zu Abschnitten und Blöcken. Er eignet sich gut für einfache Header, aufgeteilte Navigations-Layouts und benutzerdefinierte mobile Anordnungen, bei denen der Warenkorb auf verschiedenen Bildschirmgrößen an einer anderen Stelle platziert werden muss.
Ausrichtungseinstellungen
Abschnitt betitelt „Ausrichtungseinstellungen“Diese Einstellungen steuern, wie der Warenkorb-Block innerhalb des verfügbaren Bereichs positioniert wird. Sie fallen besonders auf, wenn der Block über zusätzlichen Platz gestreckt oder in eine eigene Reihe mit voller Breite verschoben wird.
Wenn Änderungen an der Ausrichtung nur geringfügig erscheinen, prüfen Sie zuerst die Layouteinstellungen. Eine kompakte Platzierung links, mittig oder rechts lässt weniger Raum für sichtbare Änderungen an der Ausrichtung.
Layouteinstellungen
Abschnitt betitelt „Layouteinstellungen“Verwenden Sie diese Einstellungen, um festzulegen, wo der Warenkorb-Block auf Desktop und Mobilgeräten erscheint. Links, mittig und rechts behalten ihn in der Hauptmenüzeile, während Full-width ihn in eine separate Zeile darunter verschiebt.
Fill available space streckt den Block über die verbleibende Breite der Desktop-Zeile. Das ist nützlich, wenn der Warenkorbbereich helfen soll, den Header-Abstand auszugleichen, macht die Ausrichtungseinstellungen aber auch wichtiger, da das Symbol in einem größeren Bereich sitzt.
Wenn Sie je nach Gerät unterschiedliche Header-Strukturen wünschen, legen Sie Desktop- und Mobile-Layouts separat in der Shopify-Dokumentation zum Theme-Editor fest. So können Sie beispielsweise den Warenkorb auf dem Desktop sauber in der Hauptzeile gruppiert lassen, ihm auf Mobilgeräten aber eine eigene Zeile geben. Verwenden Sie die Referenz Navigation layout settings für zusätzliche Details zur Platzierung.
Wählen Sie das Layout vor der Feinabstimmung der Ausrichtung. Die Platzierung hat den größten Einfluss darauf, wie sich der Warenkorb-Block im Header anfühlt.
Standard-Block-Einstellungen
Abschnitt betitelt „Standard-Block-Einstellungen“Farbeinstellungen
Abschnitt betitelt „Farbeinstellungen“Diese Einstellungen überschreiben die allgemeineren Theme-Farben für diesen Block und ermöglichen es Ihnen, das Warenkorbsymbol und den zugehörigen Text unabhängig zu gestalten. Das ist hilfreich, wenn der Warenkorb stärker hervorgehoben werden soll oder wenn Ihr Header eine benutzerdefinierte Farbgestaltung verwendet.
Halten Sie den Warenkorb gut erkennbar, ohne dass er sich vom Rest des Headers abgekoppelt anfühlt. Prüfen Sie den Kontrast sorgfältig, wenn Sie unterschiedliche Symbol- und Textfarben verwenden. Weitere Details finden Sie in der Referenz Farbeinstellungen.
Sichtbarkeitseinstellungen
Abschnitt betitelt „Sichtbarkeitseinstellungen“Verwenden Sie Sichtbarkeitssteuerungen, um den Warenkorb-Block nur auf Desktop oder nur auf Mobilgeräten anzuzeigen. Das ist nützlich für benutzerdefinierte responsive Header, insbesondere wenn auf einer Gerätegröße bereits ein anderer Zugang zum Warenkorb vorhanden ist.
Bevor Sie den Block auf einem Gerät ausblenden, stellen Sie sicher, dass Kundinnen und Kunden dort weiterhin einen klaren und vorhersehbaren Weg zum Warenkorb haben. Weitere Details finden Sie in der Referenz Sichtbarkeitseinstellungen.
Nutzungshinweise
Abschnitt betitelt „Nutzungshinweise“- Legen Sie zuerst das Layout fest. Wählen Sie die Platzierung für Desktop und Mobilgeräte aus, bevor Sie die Ausrichtung oder Farben anpassen.
- Nutzen Sie Full-width bewusst. Verschieben Sie den Block nur dann in eine eigene Zeile, wenn der Header von einem stärker gestapelten oder großzügigeren Layout profitiert.
- Strecken Sie mit Bedacht. Aktivieren Sie Fill available space, wenn der Warenkorb-Block helfen soll, den Abstand im Header auf dem Desktop auszugleichen.
- Sorgen Sie für Warenkorbzugriff. Wenn Sie diesen Block auf einer Gerätegröße ausblenden, stellen Sie sicher, dass dort ein anderer Warenkorb-Link oder ein anderes Symbol klar verfügbar ist.
- Prüfen Sie den Header-Kontrast. Testen Sie benutzerdefinierte Farben vor dem Header-Hintergrund, damit der Warenkorb leicht zu finden bleibt.
- Überprüfen Sie beide Ansichten. Desktop und Mobilgeräte können sich unterschiedlich verhalten. Bestätigen Sie daher Platzierung, Sichtbarkeit und Abstand auf jeder Bildschirmgröße.
- Behalten Sie das Fallback-Styling im Blick. Standardmäßige oder transparent wirkende Optionen fügen sich in der Regel in den Header ein, während eindeutige Farben den Warenkorb unabhängiger von benachbarten Elementen wirken lassen.