Produkt-Header-Bereich
Für Plain Jane und Plain Jane Interactive
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
Gehen Sie zu Onlineshop > Themes > Anpassen
Navigieren Sie zu Produkte > Standardprodukt
Suchen Sie nach Produktkopf oder Textfarben Abschnitt
Konfigurieren Sie die Typografie- und Farbeinstellungen
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:
Produktname - Höchster Kontrast, am prominentesten
Aktueller Preis - Fett, klar, Markenfarbe
Produktbeschreibung - Lesbar, aber sekundär
Verkaufspreis - Auffällige Akzentfarbe
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
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: https://discord.gg/hcc2GvgZc6
📧 Schreiben Sie uns eine E-Mail an: [email protected]
💻 Chatten Sie live mit uns: Verfügbar Montag–Freitag, 10:00–18:00 EST, direkt auf unserer Website
Zuletzt aktualisiert