Design
Design
Feldtyp:
Auswahlfeld
Verfügbare Werte:
• Clean
• Clean mit Linie
• Fläche
• Fläche mit Linie
• Fläche mit Schatten
Beispiel Wert:Fläche
Pfad zur Einstellung:
Tab "Header" => Bereich "Minimaler Header (im Checkout)" => Abschnitt "Design"
Technischer Name:twt-header-minimal-design
Wähle, wie sich der Header vom Seiteninhalt abhebt: Clean ohne eigene Fläche, Fläche mit der Hintergrundfarbe aus dem Abschnitt "Fläche", jeweils wahlweise mit Linie oder Schatten.
Hinweis: Passe die Farben passend zum gewählten Design an - die Standardfarben sind auf die Standard-Darstellung abgestimmt.
Anordnung
Feldtyp:
Auswahlfeld
Verfügbare Werte:
• Standard (Logo, Text, Button)
• Standard (Logo, Text in farbiger Box, Button)
• Gruppiert (Text am Logo, mit Trennlinie)
• Gruppiert (Text in farbiger Box am Logo)
• Einfach (nur Logo und Button)
Beispiel Wert:Standard (Logo, Text, Button)
Pfad zur Einstellung:
Tab "Header" => Bereich "Minimaler Header (im Checkout)" => Abschnitt "Design"
Technischer Name:twt-header-minimal-arrangement
Wähle, wie Logo, Text und Zurück-Button angeordnet sind.
Standard: Logo links, Text mittig, Button rechts.
Gruppiert: Der Text steht direkt neben dem Logo (ab 992px).
Einfach: Nur Logo und Button, ohne Textbereich.
Auf Smartphones werden nur Logo und Button angezeigt.
Basiskonfiguration
Mindesthöhe
Feldtyp:
Textfeld
Beispiel Wert:90
Pfad zur Einstellung:
Tab "Header" => Bereich "Minimaler Header (im Checkout)" => Abschnitt "Basiskonfiguration"
Technischer Name:twt-header-minimal-height
Der Header wächst mit seinem Inhalt, wenn dieser mehr Platz braucht.
Logo
Logo
Feldtyp:
Medienauswahl
Beispiel Wert:
``
Pfad zur Einstellung:
Tab "Header" => Bereich "Minimaler Header (im Checkout)" => Abschnitt "Logo"
Technischer Name:twt-header-minimal-logo-image
Optional: ein eigenes Logo für den minimalen Header. Bleibt das Feld leer, wird das Shop-Logo verwendet.
Breite
Feldtyp:
Textfeld
Beispiel Wert:140
Pfad zur Einstellung:
Tab "Header" => Bereich "Minimaler Header (im Checkout)" => Abschnitt "Logo"
Technischer Name:twt-header-minimal-logo-width
Maximale Breite des Logos in Pixeln. Sie sollte nicht größer sein als die tatsächliche Bildbreite.
Tipp: Stelle nur einen der beiden Werte ein, Breite oder Höhe, und lass den anderen auf "auto". So behält das Logo seine Proportionen und wird nicht verzerrt. Willst du die Größe über die Höhe steuern, trage hier "auto" ein.
Höhe
Feldtyp:
Textfeld
Beispiel Wert:auto
Pfad zur Einstellung:
Tab "Header" => Bereich "Minimaler Header (im Checkout)" => Abschnitt "Logo"
Technischer Name:twt-header-minimal-logo-height
Höhe des Logos in Pixeln. Lass sie auf "auto", solange du die Größe über die Breite einstellst.
Tipp: Trägst du hier eine Höhe ein, stelle die Breite auf "auto" - sonst kann das Logo verzerrt werden.
Textbereich
Textausrichtung
Feldtyp:
Auswahlfeld
Verfügbare Werte:
• zentriert ausrichten
• links ausrichten
Beispiel Wert:zentriert ausrichten
Pfad zur Einstellung:
Tab "Header" => Bereich "Minimaler Header (im Checkout)" => Abschnitt "Textbereich"
Technischer Name:twt-header-minimal-content-alignment
Wirkt nur bei den Anordnungen "Standard". Bei "Gruppiert" steht der Text immer linksbündig am Logo.
Textfarbe
Feldtyp:
Farbauswahl
Beispiel Wert:#555555
Pfad zur Einstellung:
Tab "Header" => Bereich "Minimaler Header (im Checkout)" => Abschnitt "Textbereich"
Technischer Name:twt-header-minimal-color
Linkfarbe
Feldtyp:
Farbauswahl
Beispiel Wert:#555555
Pfad zur Einstellung:
Tab "Header" => Bereich "Minimaler Header (im Checkout)" => Abschnitt "Textbereich"
Technischer Name:twt-header-minimal-link-color
Linkfarbe @hover
Feldtyp:
Farbauswahl
Beispiel Wert:#222222
Pfad zur Einstellung:
Tab "Header" => Bereich "Minimaler Header (im Checkout)" => Abschnitt "Textbereich"
Technischer Name:twt-header-minimal-link-color-hover
Hintergrundfarbe (Box)
Feldtyp:
Farbauswahl
Beispiel Wert:#e9ecef
Pfad zur Einstellung:
Tab "Header" => Bereich "Minimaler Header (im Checkout)" => Abschnitt "Textbereich"
Technischer Name:twt-header-minimal-content-background-color
Wirkt nur bei den Anordnungen "Text in farbiger Box".
Ecken (Box)
Feldtyp:
Auswahlfeld
Verfügbare Werte:
• nicht abgerundet
• abgerundete Ecken
Beispiel Wert:abgerundete Ecken
Pfad zur Einstellung:
Tab "Header" => Bereich "Minimaler Header (im Checkout)" => Abschnitt "Textbereich"
Technischer Name:twt-header-minimal-content-corner-type
Wirkt nur bei den Anordnungen "Text in farbiger Box". Die Rundung folgt dem globalen Eckenradius.
Farbe der Trennlinie
Feldtyp:
Farbauswahl
Beispiel Wert:mix(black, $sw-border-color, 10%)
Pfad zur Einstellung:
Tab "Header" => Bereich "Minimaler Header (im Checkout)" => Abschnitt "Textbereich"
Technischer Name:twt-header-minimal-content-divider-color
Wirkt nur bei der Anordnung "Gruppiert (Text am Logo, mit Trennlinie)".
Zurück-Button
Darstellungsart
Feldtyp:
Auswahlfeld
Verfügbare Werte:
• Shopware (Standard)
• Button
• Button (Outline)
Beispiel Wert:Button
Pfad zur Einstellung:
Tab "Header" => Bereich "Minimaler Header (im Checkout)" => Abschnitt "Zurück-Button"
Technischer Name:twt-header-minimal-back-btn-layout-type
Shopware (Standard): Der Button bleibt genau so, wie Shopware ihn ausliefert - kein ThemeWare®-Markup, keine ThemeWare®-Styles, die Buttonfarbe wirkt nicht.
Button / Button (Outline): Button mit Pfeil-Icon, auf Smartphones nur das Icon.
Der Zurück-Button in allen Darstellungsarten und Buttonfarben
Buttonfarbe
Feldtyp:
Auswahlfeld
Verfügbare Werte:
• individuelle Färbung
• Hell
• Primär
• Sekundär
• Dunkel
Beispiel Wert:individuelle Färbung
Pfad zur Einstellung:
Tab "Header" => Bereich "Minimaler Header (im Checkout)" => Abschnitt "Zurück-Button"
Technischer Name:twt-header-minimal-back-btn-color-type
Die Farben konfigurierst du im Tab "Layout" => Bereich "Buttons" => Abschnitt "Farbkonfiguration".
individuelle Färbung: Der Button nutzt die Farben dieses Abschnitts.
Hinweis: Wähle für "Button (Outline)" eine Farbe mit ausreichend Kontrast zum Hintergrund, sonst ist der Button kaum zu sehen.
Hinweis: In der Darstellungsart "Shopware (Standard)" hat diese Konfiguration keine Wirkung.
Textfarbe (Zurück-Button)
Feldtyp:
Farbauswahl
Beispiel Wert:#444444
Pfad zur Einstellung:
Tab "Header" => Bereich "Minimaler Header (im Checkout)" => Abschnitt "Zurück-Button"
Technischer Name:twt-header-minimal-home-btn-color
Wirkt nur bei der Buttonfarbe "individuelle Färbung".
Textfarbe (Zurück-Button) @hover
Feldtyp:
Farbauswahl
Beispiel Wert:#666666
Pfad zur Einstellung:
Tab "Header" => Bereich "Minimaler Header (im Checkout)" => Abschnitt "Zurück-Button"
Technischer Name:twt-header-minimal-home-btn-color-hover
Wirkt nur bei der Buttonfarbe "individuelle Färbung".
Rahmenfarbe (Zurück-Button)
Feldtyp:
Farbauswahl
Beispiel Wert:#e9e9e9
Pfad zur Einstellung:
Tab "Header" => Bereich "Minimaler Header (im Checkout)" => Abschnitt "Zurück-Button"
Technischer Name:twt-header-minimal-home-btn-border-color
Wirkt nur bei der Buttonfarbe "individuelle Färbung".
Rahmenfarbe (Zurück-Button) @hover
Feldtyp:
Farbauswahl
Beispiel Wert:#d4d4d4
Pfad zur Einstellung:
Tab "Header" => Bereich "Minimaler Header (im Checkout)" => Abschnitt "Zurück-Button"
Technischer Name:twt-header-minimal-home-btn-border-color-hover
Wirkt nur bei der Buttonfarbe "individuelle Färbung".
Hintergrundfarbe (Zurück-Button)
Feldtyp:
Farbauswahl
Beispiel Wert:#ffffff
Pfad zur Einstellung:
Tab "Header" => Bereich "Minimaler Header (im Checkout)" => Abschnitt "Zurück-Button"
Technischer Name:twt-header-minimal-home-btn-background-color
Wirkt nur bei der Buttonfarbe "individuelle Färbung".
Hintergrundfarbe (Zurück-Button) @hover
Feldtyp:
Farbauswahl
Beispiel Wert:#f1f1f1
Pfad zur Einstellung:
Tab "Header" => Bereich "Minimaler Header (im Checkout)" => Abschnitt "Zurück-Button"
Technischer Name:twt-header-minimal-home-btn-background-color-hover
Wirkt nur bei der Buttonfarbe "individuelle Färbung".
Fläche
Hintergrundfarbe
Feldtyp:
Farbauswahl
Beispiel Wert:#fafafa
Pfad zur Einstellung:
Tab "Header" => Bereich "Minimaler Header (im Checkout)" => Abschnitt "Fläche"
Technischer Name:twt-header-minimal-background-color
Wirkt nur bei den Designs "Fläche".
Rahmenfarbe unten
Feldtyp:
Farbauswahl
Beispiel Wert:#eeeeee
Pfad zur Einstellung:
Tab "Header" => Bereich "Minimaler Header (im Checkout)" => Abschnitt "Fläche"
Technischer Name:twt-header-minimal-border-bottom-color
Wirkt nur bei den Designs "mit Linie".