# Collection-Logo-Bereich > **Was Sie lernen werden** > > * So konfigurieren Sie den Collection-Logo-Bereich für ein verbessertes Branding der Kategorieseite > * Erweiterte Funktionen einschließlich Mobilmenü, Filterbuttons und Warenkorbintegration > * Umfassende mobile Navigation und Menüanpassungsoptionen > * Best Practices zur Optimierung des Seitenkopfs der Kollektion und zur Benutzererfahrung *** ## 🎯 Was ist der Collection-Logo-Bereich? Die **Collection-Logo-Bereich** ist eine ausgefeilte Kopfzeilenkomponente, die speziell für Kategorieseiten entwickelt wurde und umfassende Navigation-, Branding- und Filterfunktionen bietet. Dieser Bereich geht über die einfache Anzeige eines Logos hinaus und umfasst ein vollständiges Mobilmenüsystem, Filtersteuerungen, Warenkorbintegration sowie für das Durchsuchen von Kollektionen optimierte Datums-/Zeitfunktionen. **Hauptfunktionen:** * Kategoriespezifische Logodarstellung mit benutzerdefinierter Größe * Interaktives Hamburger-Menü mit Filterfunktionalität * Umfassendes mobiles Menüsystem mit verschachtelter Navigation * Live-Warenkorbzähler mit anpassbarem Stil * Optionale Datum/Uhrzeit-Anzeige mit Zeitzonenunterstützung * Erweiterte mobile Navigation mit Wischgesten * Anpassbare Menüfarben, Typografie und Abstände * Integration mit Kategoriesuche und Filterung Verfügbar in: * ✅ Plain Jane v3.1+ * ✅ Plain Jane Interactive v2+ > 💡 **Hinweis**: Dieser Bereich ist speziell für Kategorieseiten konzipiert und enthält erweiterte mobile Navigationsfunktionen, die auf anderen Seitentypen nicht zu finden sind. *** ## 🔧 So fügen Sie den Collection-Logo-Bereich hinzu 1. Gehen Sie zu **Onlineshop > Themes > Anpassen** 2. Navigieren Sie zu **Kollektionen > \[Beliebige Kollektion]** 3. Klicken Sie **Sektion hinzufügen** 4. Wählen Sie **Collection-Logo-Bereich** (oder ähnliche Bezeichnung) 5. Konfigurieren Sie das Logo, das Menü, den Warenkorb und die mobilen Einstellungen 6. Positionieren Sie den Bereich oben im Layout der Kategorieseite > ⚠️ **Wichtig**: Dieser Bereich ist für Kategorieseiten optimiert und enthält spezialisierte Funktionen für Produktfilterung und Kategoriesnavigation. *** ## 🏢 Logo-Konfiguration ### **Logodarstellung auf Kategorieseiten** **Einstellungen für Collection-Logo** * Verwendet das in Design-Einstellungen → Logo → "Collection Page Logo" hochgeladene Logo * Fällt auf das Standardlogo zurück, wenn kein kategoriespezifisches Logo eingestellt ist * Unterstützt PNG-, JPG- und SVG-Formate * Unabhängig von Startseiten- und Produktseiten-Logos **Logogröße** * **Logo-Größe auf Kategoriescreens**: Über die Theme-Einstellungen anpassbar * Bereich typischerweise 50–200px Breite * Erhält automatisch das Seitenverhältnis * Responsives Skalieren für mobile Geräte **Logo-Verlinkung & Navigation** * Logo verlinkt automatisch zur Shop-Startseite * Bietet konsistente Seitennavigation von Kategorieseiten aus * Öffnet im selben Fenster für nahtloses Nutzererlebnis * Unterstützung für zugängliche Tastaturnavigation *** ## 🍔 Hamburger-Menü & Filterintegration ### **Filterbutton-Funktionalität** **Interaktive Filtersteuerung** * Hamburger-Menüsymbol, das als Filter-/Menü-Umschalter dient * SVG-basiertes Symbol mit anpassbarer Strichfarbe * Bedingte Anzeige basierend auf dem Kategorieskontext * Touch-optimiert für mobile Geräte **Styling des Filter-Icons** * **Hintergrundfarbe**: Anpassbare Strichfarbe für die Hamburger-Linien * Verwendet die Hintergrundfarbeneinstellungen des Bereichs * Skalierbares SVG für klare Darstellung in allen Größen * Konsistent mit dem allgemeinen Farbschema des Bereichs **Filterverhalten** * Klick öffnet die mobile Menü-Überlagerung * Integriert in das Kategoriesystem für Filterung * Bietet Zugriff auf die Kategoriesnavigation * Für Touch-Interaktionen optimiert *** ## 📱 Fortgeschrittenes mobiles Menüsystem ### **Struktur des Mobilmenüs** **Anzeigemodus des Navigationsmenüs** * Vollbildige mobile Menü-Überlagerung * Unterstützung für hierarchische Menüstrukturen * Benutzerdefinierte Menüzuweisung aus Shopify Navigation * Verschachtelte Navigation mit Untermenüs **Farben des Mobilmenüs** * **Hintergrundfarbe der mobilen Navigation**: Hintergrund des Hauptmenüs * **Linkfarbe der mobilen Navigation**: Textfarbe für Menülinks * **Hover-Farbe der Links in der mobilen Navigation**: Hover-Textfarbe * **Hintergrundfarbe der Links in der mobilen Navigation**: Hover-Hintergrundfarbe * **Farbe der Schließen-Schaltfläche**: X-Schaltflächen-Farbe zum Schließen des Menüs ### **Typografie & Layout** **Mobile Texteinstellungen** * **Textausrichtung**: Linksbündig, zentriert oder rechtsbündig * **Schriftgröße**: Einstellbarer Bereich 10-26px (Standard: 16px) * **Vertikaler Abstand**: Einstellbarer Abstand 0-36px zwischen Menüeinträgen **Menüinteraktion** * Sanfte Öffnen/Schließen-Animationen * Touch-freundliche Menüpunkte * Barrierefreie Navigationsstruktur * Unterstützung für Wischgesten *** ## 🛒 Warenkorbintegration ### **Warenkorb-Anzeige & Funktionalität** **Integration des Warenkorbumschlags** * Vollständige Shopify-Commerce-Warenkorbintegration * Funktionalität als rechter Seitenleisten-Warenkorb * Konfigurierbare Warenkorbdauer (Standard: 1000ms) * Echtzeit-Warenkorbaktualisierungen **Anzeige des Warenkorbzählers** * Zeigt die aktuelle Anzahl der Warenkorbartikel an * Aktualisiert sich automatisch, wenn Produkte hinzugefügt/entfernt werden * Integriert in das gesamte Warenkorbsystem * Konsistent mit der Warenkorbfunktionalität des Themes **Styling-Optionen für den Warenkorb** * Erbt das Styling aus den Farboptionen des Mobilmenüs * Koordiniert mit den Farben des Filterbuttons * Responsives Design für alle Bildschirmgrößen * Touch-optimiert für mobile Interaktionen *** ## ⏰ Datums- & Uhrzeitanzeige ### **Zeitzoneninformation** **Datum/Uhrzeit umschalten** * **Datum/Zeit anzeigen**: Zeitzonenanzeige aktivieren/deaktivieren * Standard: Variiert je nach Theme-Konfiguration * Nützlich für zeitliche Kollektionseinführungen oder Shop-Kontext **Datums- & Zeitfarben** * **Datumfarbe**: Anpassbare Farbe für Datumstext * **Uhrzeitfarbe**: Anpassbare Farbe für Uhrzeittext * Konsistent mit dem Styling des Logo-Bereichs * Aktualisiert automatisch basierend auf der Shop-Zeitzone **Positionierung von Datum/Uhrzeit** * In das Warenkorb- und Logolayout integriert * Responsives Positionieren für mobile Geräte * Koordiniert mit anderen Kopfzeilenelementen *** ## 🎨 Layout- & Design-Konfiguration ### **Abschnittsstruktur** **Kopfzeilenlayout** * Logo auf der linken Seite positioniert * Hamburger-Menü/Filterbutton ganz links * Warenkorb und Datum/Uhrzeit auf der rechten Seite positioniert * Saubere, organisierte Kopfzeilen-Hierarchie **Container-Styling** * Benutzerdefinierte CSS-Klasse: "logo-container collection" * Speziell für Kategorieseiten optimiert * Responsive Designmuster * Konsistente Abstände und Ausrichtung ### **Visuelle Hierarchie** **Element-Priorität** 1. **Filter-/Menübutton** - Primäre Navigationssteuerung 2. **Logo** - Markenpräsenz und Link zur Startseite 3. **Warenkorbzähler** - Einkaufsfunktionalität 4. **Datum/Uhrzeit** - Unterstützende Informationen **Farbkoordination** * Einheitliches Farbschema über alle Elemente hinweg * Anpassbare Hintergrund- und Textfarben * Hover-Zustands-Styling für interaktive Elemente * Kontrastverhältnisse konform mit Barrierefreiheitsstandards *** ## 📱 Mobiloptimierung ### **Touch-First-Design** **Mobile Oberfläche** * Große Touch-Ziele für alle interaktiven Elemente * Optimiertes Hamburger-Menü für Daumenbedienung * Sanfte Animationen und Übergänge * Unterstützung für gestenbasierte Navigation **Responsives Verhalten** * Logo skaliert angemessen für mobile Bildschirme * Menübutton behält touch-freundliche Größe bei * Warenkorbzähler bleibt sichtbar und zugänglich * Datum/Uhrzeit-Anzeige passt sich dem verfügbaren Platz an **Performance-Überlegungen** * Optimiertes Laden des mobilen Menüs * Effiziente CSS-Animationen * Minimaler JavaScript-Overhead * Schnelle Warenkorbintegration *** ## 🔄 Integration mit der Kategoriesuche ### **Verbesserung der Kategoriesnavigation** **Filterintegration** * Hamburger-Menü bietet Zugriff auf Kategoriesfilter * Nahtlose Integration mit Suchfunktionen * Produkt-Sortier- und Filteroptionen * Kategorienavigation innerhalb von Kollektionen **Optimierung des Einkaufsflusses** * Schneller Zugriff auf den Warenkorb beim Durchsuchen von Kollektionen * Markenkonsistenz innerhalb der Kategoriesnavigation * Effiziente Produktentdeckung durch Menüsystem * Optimierter Pfad von Kollektion zu Produktseiten ### **Kategoriespezifische Funktionen** **Kontextbewusste Funktionalität** * Unterschiedliches Verhalten auf Kategorieseiten vs. anderen Seiten * Kategoriespezifische Menüoptionen * Integration mit Layouts der Kategorieseiten * Optimiert für das Produktsuch- und -durchsuchen-Erlebnis *** ## 🎛️ Erweiterte Anpassungsoptionen ### **Anpassung des Menüsystems** **Einrichtung des Navigationsmenüs** 1. Gehen Sie zu **Onlineshop > Navigation** im Shopify-Admin 2. Erstellen oder Bearbeiten des Menüs für Kategoriesnavigation 3. Kollektionslinks, Kategorien und Filter hinzufügen 4. Hierarchische Menüstruktur organisieren 5. Menü in den Theme-Abschnittseinstellungen zuweisen **Farbstrategie** * Menüfarben mit dem Design der Kategorieseite abstimmen * Ausreichenden Kontrast für mobile Anzeige sicherstellen * Filterbutton-Farben mit Menü-Styling abgleichen * Ein kohärentes visuelles Erlebnis schaffen ### **Erweiterungen für das Mobilmenü** **Erweiterte Funktionen** * Benutzerdefinierte Hintergrundbilder für die Menü-Überlagerung * Animierte Menüübergänge * Unterstützung für verschachtelte Untermenüs * Integration mit Kategoriesfilterung * Suchfunktion innerhalb des Menüs **Typografie-Anpassung** * Responsives Schriftgrößen-Management für mobile Geräte * Konsistente Typografie mit Kategorieseiten * Lesbare Hierarchie für Menü-Navigation * Optimierte Abstände für Touch-Interaktion *** ## 🔧 Fehlerbehebung ### **Logo wird nicht angezeigt** **Häufige Probleme** * Collection-Logo nicht in Design-Einstellungen hochgeladen * Einstellung "Collection Page Logo anzeigen" deaktiviert * Logo-Dateiformat wird nicht unterstützt * Konflikte mit anderen Kategoriesektionen **Lösungen** * Logo in Design-Einstellungen → Logo → Collection Page Logo hochladen * Toggle "Collection Page Logo anzeigen" aktivieren * Verwenden Sie PNG-, JPG- oder SVG-Formate * Auf Abschnittskonflikte auf Kategorieseiten prüfen * Browser-Cache nach Logoänderungen leeren ### **Mobiles Menü funktioniert nicht** **Mögliche Probleme** * JavaScript-Konflikte mit anderen Apps * Menü nicht in den Abschnittseinstellungen zugewiesen * Mobile CSS-Konflikte * Probleme mit Touch-Interaktionen **Lösungen** * Auf App-Konflikte prüfen, die das mobile Menü beeinträchtigen * Navigationsmenü in den Abschnittseinstellungen zuweisen * Mobiles Menü in verschiedenen Browsern testen * Überprüfen, ob Touch-Ziele angemessen dimensioniert sind * Auf CSS-Konflikte mit benutzerlichem Code prüfen ### **Probleme mit dem Filterbutton** **Häufige Probleme** * Filterbutton reagiert nicht auf Klicks * Ikonfarben werden nicht korrekt angezeigt * Filterfunktionalität funktioniert nicht * Mobile Interaktionsprobleme **Lösungen** * Hintergrundfarbeinstellungen für das Icon überprüfen * Auf JavaScript-Konflikte prüfen * Filterfunktion auf realen Geräten testen * Richtige Integration mit der Kategoriesfilterung sicherstellen * Mobile Touch-Zielgrößen überprüfen ### **Probleme mit Warenkorbintegration** **Mögliche Probleme** * Warenkorbzähler wird nicht aktualisiert * Konflikte mit dem Warenkorb-Drawer * Integration mit Hinzufügen-zum-Warenkorb in Kollektionen * Mobile Warenkorb-Interaktionsprobleme **Lösungen** * Warenkorbfunktionalität im gesamten Theme überprüfen * Kompatibilität der Einstellungen des Warenkorb-Drawers verifizieren * Warenkorbaktualisierungen von Kategorieseiten testen * Richtige JavaScript-Integration des Warenkorbs sicherstellen * Mobile Warenkorb-Interaktionsabfolge überprüfen *** ## 📊 Performance-Auswirkungen ### **Ladeeffizienz** **Optimierte Leistung** * Leichter Abschnitt mit minimalem JavaScript * Effizientes CSS für mobile Menüanimationen * SVG-Icons für skalierbare Grafiken * Optimierte Warenkorbintegration **Mobile Leistung** * Schnell ladendes mobiles Menü * Sanfte Animationen ohne Verzögerung * Effiziente Verarbeitung von Touch-Ereignissen * Minimale Auswirkung auf Ladezeiten der Kategorieseite **SEO-Überlegungen** * Angemessene Überschriftenhierarchie für Navigation * Barrierefreie Menüstruktur * Logo bietet Branding-Kontext * Saubere HTML-Struktur für Suchmaschinen *** ## 🎯 Zusammenfassung der Best Practices ### **Einrichtungs-Checklist** ``` ✅ Laden Sie ein kategoriespezifisches Logo in den Design-Einstellungen hoch ✅ Aktivieren Sie die Einstellung "Collection Page Logo anzeigen" ✅ Erstellen und weisen Sie ein Navigationsmenü für die mobile Oberfläche zu ✅ Konfigurieren Sie die Farben des Hamburger-Menüs für gute Sichtbarkeit ✅ Richten Sie die Warenkorbintegration ein und testen Sie die Funktionalität ✅ Konfigurieren Sie die Anzeige von Datum/Uhrzeit bei Verwendung zeitlicher Aktionen ✅ Testen Sie die Funktionalität des mobilen Menüs auf echten Geräten ✅ Vergewissern Sie sich, dass Touch-Ziele angemessen dimensioniert sind ✅ Prüfen Sie den Farbkontrast auf Barrierefreiheitskonformität ✅ Testen Sie die Integration mit der Kategoriesfilterung ✅ Verifizieren Sie, dass sich der Warenkorbzähler korrekt aktualisiert ✅ Sorgen Sie für flüssige Animationen des mobilen Menüs ``` ### **Laufende Optimierung** **Regelmäßige Wartung** * Überwachen Sie die Leistung des Mobilmenüs bei Traffic-Spitzen * Aktualisieren Sie die Struktur des Navigationsmenüs, wenn sich Kollektionen ändern * Testen Sie neue mobile Geräte auf Kompatibilität * Überprüfen Sie Farbschemata bei Aktualisierung der Markenrichtlinien * Verifizieren Sie die Warenkorbintegration nach Theme-Updates **Conversion-Optimierung** * Analysieren Sie Nutzungs-muster des Mobilmenüs * Testen Sie verschiedene Menüstrukturen auf Navigationseffizienz * Überwachen Sie Warenkorb-Konversionsraten von Kategorieseiten * Optimieren Sie die Sichtbarkeit des Filterbuttons für bessere Interaktion * Verfolgen Sie die Nutzerinteraktion mit datums-/zeitbasierten Promotion-Elementen *** ## 🚀 Erweiterte Anwendungsfälle ### **Saisonale Kollektionen** **Dynamisches Branding** * Wechseln Sie Kategoriesymbole für saisonale Kampagnen * Stimmen Sie Menüfarben mit saisonalen Themen ab * Verwenden Sie Datums-/Zeit-Anzeige für limitierte Kollektionseinführungen * Erstellen Sie ein stimmiges saisonales Kollektionserlebnis ### **Produktstart-Strategie** **Optimierung von Produkteinführungen** * Heben Sie Einführungszeiten mit Datums-/Zeit-Anzeige hervor * Nutzen Sie das Mobilmenü für exklusiven Kollektion-Zugang * Stimmen Sie Warenkorb-Styling auf die Launch-Kampagne ab * Erzeugen Sie Dringlichkeit durch visuelle Designelemente ### **Mehrkategorie-Shops** **Komplexe Navigation** * Organisieren Sie umfangreiche Menüstrukturen für große Kataloge * Verwenden Sie verschachtelte Menüs für Kategorienhierarchien * Optimieren Sie die mobile Navigation für komplexe Produktauswahlen * Vereinfachen Sie die Navigation von Kollektion zu Kollektion *** Der Collection-Logo-Bereich bietet essenzielle Navigations- und Branding-Funktionen, die speziell für Kategorieseiten optimiert sind und ein verbessertes Durchsauerlebnis schaffen, das die Produktentdeckung unterstützt, die Markenpräsenz bewahrt und einfachen Zugriff auf Warenkorb- und Navigationsfunktionen bietet. ### **Brauchen Sie Hilfe?** * 💬 **Treten Sie unserer Community auf Discord bei:** * 📧 **Schreiben Sie uns eine E-Mail an:** * 💻 **Chatten Sie live mit uns:** Verfügbar Montag–Freitag, 10:00–18:00 EST, direkt auf unserer Website --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.openspaces.design/german/readme-1/sections-and-features/collection-logo-section.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.