# Produkt-Header-Bereich > **Was Sie lernen werden** > > * So konfigurieren Sie den Produktkopfbereich für Branding und Navigation > * Erweiterte Typografie- und Farb-Anpassungsoptionen für Produkttext-Elemente > * So richten Sie die Preisanzeigeformatierung und die Gestaltung von Verkaufspreisen ein > * Best Practices für Text-Hierarchie und Lesbarkeit auf Produktseiten *** ## 🎯 Was ist der Produktkopfbereich? Die **Produkt-Header-Bereich** ist ein spezialisiertes Steuerungssystem für Typografie und Farbe, das speziell für Produktseiten entwickelt wurde. Im Gegensatz zu einem traditionellen Seitenkopf konzentriert sich dieser Abschnitt auf die visuelle Gestaltung wichtiger Produktinformations-Elemente, einschließlich Titel, Beschreibungen, Preisen und Verkaufskennzeichnungen. **Hauptfunktionen:** * Erweiterte Typografie-Steuerungen für Produkttitel und Beschreibungen * Anpassbare Preisanzeigeformatierung mit Währungsoptionen * Gestaltung von Verkaufspreisen mit hervorgehobenen Farben * Konsistente Verwaltung von Textfarben über alle Produktelemente hinweg * Mobil-responsives Skalieren der Typografie * Integration mit Produktseiten-Layouts Verfügbar in: * ✅ Plain Jane v3.1+ * ✅ Plain Jane Interactive v2+ > 💡 **Hinweis**: Dieser Abschnitt steuert die Gestaltung von Produkttext-Elementen und nicht die Layoutstruktur. Er arbeitet in Verbindung mit Produktabschnitt-Layouts. *** ## 🔧 So konfigurieren Sie den Produktkopfbereich 1. Gehen Sie zu **Onlineshop > Themes > Anpassen** 2. Navigieren Sie zu **Produkte > Standardprodukt** 3. Suchen Sie nach **Produktkopf** oder **Textfarben** Abschnitt 4. Konfigurieren Sie die Typografie- und Farbeinstellungen 5. Vorschau von Änderungen an verschiedenen Produkten, um Konsistenz sicherzustellen > ⚠️ **Wichtig**: Dieser Abschnitt beeinflusst die Gestaltung von Produkttext-Elementen in allen Produktseiten-Layouts (Showcase, Thumbnail, etc.). *** ## ✏️ Typografie- & Farbsteuerungen ### **Gestaltung des Produkttitels** **Farbe des Produktnamens** * Legen Sie die Primärfarbe für Produktnamen fest * Sollte starken Kontrast zum Seitenhintergrund bieten * Verwendet typischerweise die Markenprimärfarbe oder eine neutrale dunkle Farbe * Standard: #000000 (Schwarz) **Best Practices:** * Verwenden Sie kontraststarke Farben für Barrierefreiheit * Bewahren Sie Konsistenz mit dem übergeordneten Markenfarbschema * Testen Sie die Lesbarkeit auf hellen und dunklen Hintergründen * Berücksichtigen Sie Mobilbetrachtungsbedingungen ### **Gestaltung der Produktbeschreibung** **Farbe der Produktbeschreibung** * Steuert die Farbe des Produktbeschreibungs-Textes * In der Regel ein etwas hellerer Farbton als der Titel zur Hierarchiebildung * Sollte gut lesbar bleiben, während sie weniger prominent als der Titel ist * Standard: #000000 (Schwarz) **Inhaltsrichtlinien:** * Halten Sie Beschreibungen prägnant und gut scannbar * Verwenden Sie einen konsistenten Ton und Stil über Produkte hinweg * Fügen Sie wichtige Merkmale und Vorteile hinzu * Optimieren Sie für mobiles Lesen *** ## 💰 Preisanzeige-Konfiguration ### **Gestaltung des Hauptpreises** **Preisfarbe** * Legen Sie die Farbe für reguläre Produktpreise fest * Passt oft zur Produkttitel-Farbe für Konsistenz * Kann die Markenakzentfarbe zur Hervorhebung des Preises verwenden * Standard: #000000 (Schwarz) **Schriftgröße des Preises** * Einstellbarer Bereich: 10-30px * Standard: 24px * Sollte ausreichend prominent sein, um leicht gesehen zu werden * Berücksichtigen Sie die Bedeutung des Preises für die Kaufentscheidung ### **Währungsformat-Optionen** **Anzeigeeinstellungen für Währung** * **Mit Währung**: Zeigt das vollständige Währungssymbol an (z. B. "$24.99") * **Ohne Währung**: Zeigt nur den numerischen Wert an (z. B. "24.99") * Standard: Ohne Währung **Wann welches Format verwenden:** * **Mit Währung**: Internationale Shops, mehrere Währungen, Klarheit für neue Kunden * **Ohne Währung**: Sauberes, minimalistisches Erscheinungsbild, inländische Shops, Platzbeschränkungen *** ## 🏷️ Gestaltung von Verkaufspreisen & Aktionen ### **Konfiguration des Verkaufstextes** **Farbe des Verkaufstextes** * Farbe für "War" oder "Ursprünglich" Text vor durchgestrichenen Preisen * In der Regel ein neutrales Grau oder ein gedämpfter Farbton * Sollte lesbar, aber weniger prominent als der Verkaufspreis sein * Standard: #000000 (Schwarz) **Typische Beispiele für Verkaufstexte:** * "War $XX.XX" * "Ursprünglich $XX.XX" * "UVP $XX.XX" * "Vergleichspreis $XX.XX" ### **Gestaltung des Verkaufspreises** **Farbe des Verkaufspreises** * Farbe für den hervorgehobenen Verkaufs- oder Rabattpreis * Verwendet häufig Rot, Orange oder die Markenakzentfarbe * Sollte visuelle Dringlichkeit erzeugen und gleichzeitig lesbar bleiben * Standard: #FF0000 (Rot) **Schriftgröße des Verkaufspreises** * Einstellbarer Bereich: 10-30px * Standard: 16px * Oft kleiner als der reguläre Preis, um einen Vergleich zu zeigen * Sollte die visuelle Hierarchie mit dem aktuellen Preis wahren *** ## 🎨 Best Practices zur visuellen Hierarchie ### **Farbstrategie** **Reihenfolge der Informationspriorität:** 1. **Produktname** - Höchster Kontrast, am prominentesten 2. **Aktueller Preis** - Fett, klar, Markenfarbe 3. **Produktbeschreibung** - Lesbar, aber sekundär 4. **Verkaufspreis** - Auffällige Akzentfarbe 5. **Verkaufstext** - Gedämpft, unterstützende Information ### **Typografische Hierarchie** **Empfehlungen für Schriftgrößen:** * **Produktname**: Größte, typischerweise 24-32px auf Desktop * **Aktueller Preis**: Prominent, 20-28px auf Desktop * **Beschreibung**: Lesbar, 14-16px auf Desktop * **Verkaufspreis**: Unterstützend, 14-18px auf Desktop ### **Richtlinien zum Farbkontrast** **Barrierefreiheitsstandards:** * Mindestkontrastverhältnis 4,5:1 für normalen Text * Mindestkontrastverhältnis 3:1 für großen Text (18px+ fett oder 24px+) * Testen Sie mit Barrierefreiheits-Tools wie dem WebAIM Contrast Checker * Berücksichtigen Sie farbenblinde Nutzer mit ausreichendem Helligkeitskontrast *** ## 📱 Mobiloptimierung ### **Responsive Typografie** **Mobile Überlegungen:** * Alle Schriftgrößen skalieren automatisch für mobile Geräte * Text-Hierarchie bleibt über Bildschirmgrößen hinweg konsistent * Touch-freundliche Abstände werden um klickbare Elemente beibehalten * Lesedistanz für mobile Betrachtung optimiert **Mobile-spezifische Anpassungen:** * Leicht kleinere Schriftgrößen für Platzersparnis * Erhöhte Zeilenhöhe für bessere Lesbarkeit * Optimierter Farbkontrast für Außenbedingungen * Berücksichtigung der Daumen-Navigation rund um Textelemente ### **Mobile Leistung** **Ladeoptimierung:** * CSS-Farbwerte werden sofort mit der Seite geladen * Keine zusätzlichen Bildressourcen für Textgestaltung erforderlich * Geringe Auswirkungen auf die Seitenladegeschwindigkeit * Effiziente Darstellung auf allen mobilen Geräten *** ## 🔄 Integration mit Produkt-Layouts ### **Integration in Showcase-Layout** Bei Verwendung des Produktabschnitts (Showcase): * Textfarben werden konsistent im traditionellen Layout angewendet * Typografie skaliert angemessen für die nebeneinander Anzeige * Preisgestaltung integriert sich mit der Positionierung in der Thumbnail-Galerie * Beschreibungformatierung funktioniert mit erweiterten Textbereichen ### **Integration in Thumbnail-Layout** Bei Verwendung des Produktabschnitts (Thumbnail): * Farben funktionieren nahtlos mit modernem gitterbasiertem Layout * Typografie optimiert für das Bottom-Modal-Erlebnis auf Mobilgeräten * Preisdisplay passt sich an erweiterte Variantenauswahl an * Verkaufspreise integrieren sich mit dem Abzeichen-System *** ## 💡 Erweiterte Anpassungstipps ### **Markenkonsistenz** **Farbkoordination:** * Passen Sie Produkttitelfarben an die Markenprimärfarben an * Verwenden Sie Verkaufspreisfarben, die zur Aktionsmarke passen * Koordinieren Sie mit Buttonfarben und Akzent-Elementen * Bewahren Sie Konsistenz über alle Produktseiten hinweg **Typografie-Koordination:** * Richten Sie Schriftgrößen am typografischen Maßstab des Gesamtthemas aus * Berücksichtigen Sie, wie Produkttexte zu Abschnittsüberschriften in Beziehung stehen * Erhalten Sie eine lesbare Hierarchie über die gesamte Seite hinweg * Testen Sie mit verschiedenen Produkttitellängen ### **Conversion-Optimierung** **Preispsychologie:** * Verwenden Sie Rot oder Orange für Verkaufspreise, um Dringlichkeit zu erzeugen * Machen Sie reguläre Preise prominent und vertrauenswürdig * Erwägen Sie, Währungssymbole für eine sauberere Ästhetik auszublenden * Testen Sie verschiedene Farbkombinationen auf Konversionswirkung **Benutzererlebnis:** * Stellen Sie die schnelle Erfassbarkeit der wichtigsten Informationen sicher * Priorisieren Sie mobile Lesbarkeit für unterwegs einkaufende Kunden * Machen Sie Preisangaben sofort klar und vertrauenswürdig * Schaffen Sie einen visuellen Fluss vom Titel zum Preis zur Aktion *** ## 🔧 Fehlerbehebung ### **Farbe wird nicht angewendet** **Häufige Probleme:** * Der Browser-Cache muss nach Farbänderungen möglicherweise geleert werden * Einige Drittanbieter-Apps können Theme-Farben überschreiben * Benutzerdefiniertes CSS könnte mit Theme-Einstellungen in Konflikt stehen * Stellen Sie sicher, dass Änderungen gespeichert und veröffentlicht sind **Lösungen:** * Leeren Sie den Browser-Cache und aktualisieren Sie die Seite * Überprüfen Sie auf App-Konflikte im Theme-Code * Überprüfen Sie benutzerdefiniertes CSS auf Farbüberschreibungen * Testen Sie im Inkognito-/Privatmodus des Browsers ### **Probleme mit Textlesbarkeit** **Barrierefreiheitsprobleme:** * Unzureichender Kontrast zwischen Text und Hintergrund * Schriftgrößen zu klein für komfortables Lesen * Farbkombinationen schwierig für farbenblinde Nutzer * Herausforderungen bei der mobilen Betrachtung **Lösungen:** * Verwenden Sie Kontrastprüf-Tools, um Barrierefreiheit zu überprüfen * Testen Sie Schriftgrößen auf tatsächlichen mobilen Geräten * Berücksichtigen Sie farbenblindenfreundliche Farbkombinationen * Holen Sie Feedback von Nutzern mit besonderen Zugänglichkeitsanforderungen ein ### **Anzeigeprobleme auf Mobilgeräten** **Häufige Probleme:** * Text erscheint auf mobilen Geräten zu klein * Farbkontrast unzureichend bei hellem Umgebungslicht * Typografische Hierarchie auf kleinen Bildschirmen unklar * Touch-Ziele zu nah an Textelementen **Lösungen:** * Testen Sie auf tatsächlichen mobilen Geräten, nicht nur durch Ändern der Browsergröße * Erhöhen Sie Schriftgrößen, wenn die mobile Lesbarkeit schlecht ist * Überprüfen Sie den Farbkontrast unter verschiedenen Lichtbedingungen * Stellen Sie ausreichenden Abstand um klickbare Elemente sicher *** ## 📊 Performance-Auswirkungen ### **Ladeeffizienz** **Geringer Ressourcenverbrauch:** * Textgestaltung verwendet effiziente CSS-Eigenschaften * Keine zusätzlichen Bild- oder Schriftladevorgänge erforderlich * Sofortige Anwendung von Farbänderungen * Für grundlegende Funktionalität ist kein JavaScript erforderlich **SEO-Vorteile:** * Saubere HTML-Struktur erhält die Lesbarkeit für Suchmaschinen * Richtige Überschriftenhierarchie unterstützt SEO * Barrierefreier Farbkontrast verbessert Signale zur Nutzererfahrung * Schnelles Laden trägt zu Page-Speed-Werten bei *** ## 🎯 Zusammenfassung der Best Practices ### **Einrichtungs-Checklist** ``` ✅ Stellen Sie die Produkttitelfarbe mit hohem Kontrast ein ✅ Konfigurieren Sie die Preisfarbe für klare Sichtbarkeit ✅ Wählen Sie eine Verkaufspreisfarbe, die Dringlichkeit erzeugt ✅ Testen Sie die Währungsformat-Präferenz (mit/ohne Symbol) ✅ Vergewissern Sie sich, dass die Beschreibungsfarbe gute Lesbarkeit bietet ✅ Prüfen Sie alle Farben auf Barrierefreiheitskonformität ✅ Testen Sie die typografische Hierarchie auf mobilen Geräten ✅ Stellen Sie die Integration mit dem gewählten Produktlayout sicher ✅ Überprüfen Sie die Konsistenz über verschiedene Produkttypen ✅ Testen Sie mit tatsächlichen Produktinhalten und Bildern ``` ### **Laufende Wartung** * Überprüfen Sie regelmäßig Farbwahl auf Marken-Konsistenz * Testen Sie neue Produkte mit vorhandenen Typografie-Einstellungen * Überwachen Sie Kundenfeedback zur Lesbarkeit * Aktualisieren Sie Farben beim Auffrischen der Markenrichtlinien * Stellen Sie die Barrierefreiheitskonformität bei Änderungen sicher *** Der Produktkopfbereich bietet die Grundlage für die Erstellung professioneller, gut lesbarer und auf Konversion optimierter Produktseiten. Eine korrekte Konfiguration stellt sicher, dass Kunden schnell die wichtigsten Produktinformationen finden und verstehen können, während Ihr Markenästhetik erhalten bleibt. ### **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/product-header-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.