Alle Seiten
Bereitgestellt von GitBook
1 von 16

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Sliders

Scroll-Up Button

Breadcrumb

Offcanvas-Navigation

Produkt-Badges

Inhalt

Cookie-Hinweis

Offcanvas (Warenkorb & Navigation)


Darstellungsart

Feldtyp: Auswahlfeld

Verfügbare Werte: • Shopware-Standard • ThemeWare®

Beispiel Wert: Shopware-Standard

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Offcanvas (Warenkorb & Navigation)"

Technischer Name: twt-offcanvas-layout-type

Wähle, wie Offcanves-Elemente (z.B. Warenkorb oder Navigation) dargestellt werden.

In der Darstellungsart "Shopware" verhalten sich Offcanves-Elemente wie ausgeliefert.

In der Darstellungsart "ThemeWare®" bekommen die Elemente z.B. einen Abstand nach außen und abgerundete Ecken.

Basiskonfiguration


Außenabstand [px]

Feldtyp: Nummernfeld

Beispiel Wert: 10

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Offcanvas (Warenkorb & Navigation)" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-offcanvas-margin


Feldtyp: Nummernfeld

Beispiel Wert: 3

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Offcanvas (Warenkorb & Navigation)" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-offcanvas-border-radius


Feldtyp: Farbauswahl

Beispiel Wert: rgba(0, 0, 0, 0.5)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Offcanvas (Warenkorb & Navigation)" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-offcanvas-backdrop-color


Feldtyp: Nummernfeld

Beispiel Wert: 0

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Offcanvas (Warenkorb & Navigation)" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-offcanvas-backdrop-effect-blur

Wähle den Abstand um Offcanvas-Elemente.

Hinweis: Diese Einstellung wird nur angewendet, wenn die Darstellungsart "ThemeWare®" gesetzt ist.

Abgerundete Ecken [px]

Wähle wie stark Ecken von Offcanvas-Elementen abgerundet werden.

Hinweis: Diese Einstellung wird nur angewendet, wenn die Darstellungsart "ThemeWare®" gesetzt ist.

Farbkonfiguration

Overlay-Farbe

Wähle die gewünschte Hintergrundfarbe vom Overlay (backdrop) aus.

Glaseffekt [px] (Overlay)

Gib die gewünschte Stärke für den Unschärfe-Effekt vom Overlay (backdrop) ein.

Konfiguration

Währungsauswahl


Label anzeigen

Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen

Beispiel Wert: nicht anzeigen

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Währungsauswahl"

Technischer Name: twt-offcanvas-nav-currencies-menu-text-show

Hinweis: Unterhalb von 320px Fensterbreite wird nur das Icon angezeigt.

Sprachauswahl


Label anzeigen

Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen

Beispiel Wert: nicht anzeigen

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Sprachauswahl"

Technischer Name: twt-offcanvas-nav-languages-menu-text-show


Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen

Beispiel Wert: nicht anzeigen

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Service-Menü [Pro-Edition]"

Technischer Name: twt-offcanvas-nav-service-menu-show


Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen

Beispiel Wert: anzeigen

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Service-Menü [Pro-Edition]"

Technischer Name: twt-offcanvas-nav-service-menu-icon-show


Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen

Beispiel Wert: nicht anzeigen

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Service-Menü [Pro-Edition]"

Technischer Name: twt-offcanvas-nav-service-menu-text-show


Feldtyp: Auswahlfeld

Verfügbare Werte: • Standard • Headerfarben • individuelle Farben (folgt...)

Beispiel Wert: Standard

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Dropdowns"

Technischer Name: twt-offcanvas-nav-dropdown-coloration

Konfiguration


Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht abgerundet • abgerundete Ecken (Standard) • runde Ecken

Beispiel Wert: abgerundete Ecken (Standard)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Scroll-Up Button" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-scroll-up-corner-type


Feldtyp: Textfeld

Hinweis: Unterhalb von 320px Fensterbreite wird nur das Icon angezeigt.

Service-Menü [Pro-Edition]

Service-Menü anzeigen

Shopware hat das Service-Menü mit Version 6.5 im Header entfernt und sieht dies nur noch als "Footer-Service-Navigation" vor. Mit dieser Konfiguration, kannst du die "Footer-Service-Navigation" wieder in der Offcanvas-Navigation anzeigen lassen.

Die Navigation selber muss im Verkaufskanal zugewiesen werden.

Um das Label zu bearbeiten oder übersetzen, nutze bitte den Textbaustein: header.indexLinkService

Icon anzeigen

Hinweis: Unterhalb von 320px Fensterbreite wird nur das Icon angezeigt.

Label anzeigen

Hinweis: Unterhalb von 320px Fensterbreite wird nur das Icon angezeigt.

Dropdowns

Färbung

Beispiel Wert: 1px 2px 6px

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Scroll-Up Button" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-scroll-up-box-shadow


Feldtyp: Farbauswahl

Beispiel Wert: rgba(0, 0, 0, 0.3)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Scroll-Up Button" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-scroll-up-box-shadow-color


Feldtyp: Farbauswahl

Beispiel Wert: #ffffff

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Scroll-Up Button" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-scroll-up-color


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Scroll-Up Button" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-scroll-up-border-color


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Scroll-Up Button" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-scroll-up-background-color


Feldtyp: Farbauswahl

Beispiel Wert: #ffffff

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Scroll-Up Button" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-scroll-up-color-hover


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Scroll-Up Button" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-scroll-up-border-color-hover


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Scroll-Up Button" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-scroll-up-background-color-hover

Basiskonfiguration

Ecken

abgerundete Ecken Verwendet die Konfiguration "Abgerundete Ecken". ("Layout" > "Layout" > "Abgerundete Ecken")

runde Ecken Verwendet einen vordefinierten Radius für runde Ecken.

Schlagschatten

Schattenfarbe

Farbkonfiguration

Iconfarbe

Rahmenfarbe

Hintergrundfarbe

Iconfarbe @hover

Rahmenfarbe @hover

Hintergrundfarbe @hover

Konfiguration

Basiskonfiguration


Darstellungsart

Feldtyp: Auswahlfeld

Verfügbare Werte: • Navigation (Standard) • Buttons

Beispiel Wert: Navigation (Standard)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Paginierung" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-pagination-style

Navigation Standard-Darstellung mit zusammengefassten Buttons.

Buttons Darstellung mit sepraten Buttons.

Farbkonfiguration


Textfarbe

Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Paginierung" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-pagination-color


Feldtyp: Farbauswahl

Beispiel Wert: #bcc1c7

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Paginierung" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-pagination-border-color


Feldtyp: Farbauswahl

Beispiel Wert: #ffffff

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Paginierung" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-pagination-background-color


Feldtyp: Farbauswahl

Beispiel Wert: darken($sw-color-brand-primary, 15%)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Paginierung" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-pagination-hover-color


Feldtyp: Farbauswahl

Beispiel Wert: #bcc1c7

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Paginierung" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-pagination-hover-border-color


Feldtyp: Farbauswahl

Beispiel Wert: #eeeeee

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Paginierung" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-pagination-hover-background-color


Feldtyp: Farbauswahl

Beispiel Wert: #ffffff

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Paginierung" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-pagination-active-color


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Paginierung" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-pagination-active-border-color


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Paginierung" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-pagination-active-background-color


Feldtyp: Farbauswahl

Beispiel Wert: #798490

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Paginierung" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-pagination-disabled-color


Feldtyp: Farbauswahl

Beispiel Wert: #bcc1c7

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Paginierung" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-pagination-disabled-border-color


Feldtyp: Farbauswahl

Beispiel Wert: #eeeeee

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Paginierung" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-pagination-disabled-background-color


Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht abgerundet • abgerundete Ecken (Standard) • runde Ecken

Beispiel Wert: abgerundete Ecken (Standard)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Paginierung" => Abschnitt "Darstellungsart: Navigation"

Technischer Name: twt-pagination-corner-type


Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht abgerundet • abgerundete Ecken • runde Ecken • Pill

Beispiel Wert: abgerundete Ecken

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Paginierung" => Abschnitt "Darstellungsart: Buttons"

Technischer Name: twt-pagination-buttons-corner-type

Konfiguration


Feldtyp: Auswahlfeld

Verfügbare Werte: • Rechteck (Standard) • Quadrat/Kreis

Beispiel Wert: Rechteck (Standard)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Sliders" => Abschnitt "Pfeile-Navigation"

Technischer Name: twt-base-slider-controls-style


Feldtyp: Auswahlfeld

Rahmenfarbe

Hintergrundfarbe

Textfarbe @hover

Rahmenfarbe @hover

Hintergrundfarbe @hover

Textfarbe @active

Rahmenfarbe @active

Hintergrundfarbe @active

Textfarbe @disabled

Rahmenfarbe @disabled

Hintergrundfarbe @disabled

Darstellungsart "Navigation"

Ecken

abgerundete Ecken Verwendet die Konfiguration "Abgerundete Ecken". ("Layout" > "Layout" > "Abgerundete Ecken")

runde Ecken Verwendet einen vordefinierten Radius für runde Ecken.

Darstellungsart "Buttons"

Ecken

abgerundete Ecken Verwendet die Konfiguration "Abgerundete Ecken". ("Layout" > "Layout" > "Abgerundete Ecken")

runde Ecken Verwendet einen vordefinierten Radius für runde Ecken.

Verfügbare Werte: • nicht abgerundet • abgerundete Ecken (Standard) • runde Ecken

Beispiel Wert: abgerundete Ecken (Standard)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Sliders" => Abschnitt "Pfeile-Navigation"

Technischer Name: twt-base-slider-controls-corner-type


Feldtyp: Auswahlfeld

Verfügbare Werte: • kein Effekt (Standard) • fade in

Beispiel Wert: fade in

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Sliders" => Abschnitt "Pfeile-Navigation"

Technischer Name: twt-base-slider-controls-hover-type


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Sliders" => Abschnitt "Pfeile-Navigation"

Technischer Name: twt-base-slider-controls-color


Feldtyp: Farbauswahl

Beispiel Wert: transparent

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Sliders" => Abschnitt "Pfeile-Navigation"

Technischer Name: twt-base-slider-controls-border-color


Feldtyp: Farbauswahl

Beispiel Wert: transparent

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Sliders" => Abschnitt "Pfeile-Navigation"

Technischer Name: twt-base-slider-controls-background-color


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-secondary

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Sliders" => Abschnitt "Pfeile-Navigation"

Technischer Name: twt-base-slider-controls-color-hover


Feldtyp: Farbauswahl

Beispiel Wert: darken($twt-base-slider-controls-border-color, 10%)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Sliders" => Abschnitt "Pfeile-Navigation"

Technischer Name: twt-base-slider-controls-border-color-hover


Feldtyp: Farbauswahl

Beispiel Wert: darken($twt-base-slider-controls-background-color, 7.5%)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Sliders" => Abschnitt "Pfeile-Navigation"

Technischer Name: twt-base-slider-controls-background-color-hover


Feldtyp: Auswahlfeld

Verfügbare Werte: • Rechteck • Quadrat/Kreis (Standard)

Beispiel Wert: Quadrat/Kreis (Standard)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Sliders" => Abschnitt "Punkte-Navigation"

Technischer Name: twt-base-slider-navigation-dots-style


Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht abgerundet • abgerundete Ecken • runde Ecken (Standard)

Beispiel Wert: runde Ecken (Standard)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Sliders" => Abschnitt "Punkte-Navigation"

Technischer Name: twt-base-slider-navigation-dots-type


Feldtyp: Auswahlfeld

Verfügbare Werte: • Standard • vergrößern • umranden • ausfüllen • kreisförmig umranden

Beispiel Wert: Standard

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Sliders" => Abschnitt "Punkte-Navigation"

Technischer Name: twt-base-slider-navigation-dots-hover-type


Feldtyp: Auswahlfeld

Verfügbare Werte: • links ausrichten • rechts ausrichten • zentriert ausrichten (Standard)

Beispiel Wert: zentriert ausrichten (Standard)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Sliders" => Abschnitt "Punkte-Navigation"

Technischer Name: twt-base-slider-navigation-dots-alignment


Feldtyp: Farbauswahl

Beispiel Wert: #bcc1c7

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Sliders" => Abschnitt "Punkte-Navigation"

Technischer Name: twt-base-slider-navigation-dots-background-color


Feldtyp: Farbauswahl

Beispiel Wert: #798490

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Sliders" => Abschnitt "Punkte-Navigation"

Technischer Name: twt-base-slider-navigation-dots-background-color-active

Pfeile-Navigation

Darstellungsart

Im Tab "Erlebniswelten" kannst du verschiedene Slider individuell konfigurieren.

Ecken

abgerundete Ecken Verwendet die Konfiguration "Abgerundete Ecken". ("Layout" > "Layout" > "Abgerundete Ecken")

runde Ecken Verwendet einen vordefinierten Radius für runde Ecken.

Hover-Effekt

Textfarbe

Rahmenfarbe

Hintergrundfarbe

Textfarbe @hover

Rahmenfarbe @hover

Hintergrundfarbe @hover

Punkte-Navigation

Darstellungsart

Ecken

abgerundete Ecken Verwendet die Konfiguration "Abgerundete Ecken". ("Layout" > "Layout" > "Abgerundete Ecken")

runde Ecken Verwendet einen vordefinierten Radius für runde Ecken.

Hover-Effekt

Horizontale Ausrichtung

Farbe (Primär)

Farbe (Sekundär) @active/hover

Konfiguration


Cookie-Hinweis anzeigen

Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen (Standard)

Beispiel Wert: anzeigen (Standard)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Cookie-Hinweis"

Technischer Name: twt-cookie-permission-show

Basiskonfiguration


Darstellungsart

Feldtyp: Auswahlfeld

Verfügbare Werte: • Banner: unten (Standard) • Banner: oben • Card: unten rechts • Modal: unten (mit Overlay) • Modal: unten rechts (mit Overlay) • Modal: zentriert (mit Overlay) • Modal: oben (mit Overlay)

Beispiel Wert: Banner: unten (Standard)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Cookie-Hinweis" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-cookie-permission-position


Feldtyp: Nummernfeld

Beispiel Wert: 10

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Cookie-Hinweis" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-cookie-permission-padding


Feldtyp: Textfeld

Beispiel Wert: 0 0 30px

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Cookie-Hinweis" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-cookie-permission-box-shadow


Feldtyp: Farbauswahl

Beispiel Wert: rgba(0, 0, 0, 0.2)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Cookie-Hinweis" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-cookie-permission-box-shadow-color


Feldtyp: Farbauswahl

Beispiel Wert: rgba(0, 0, 0, 0.5)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Cookie-Hinweis" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-cookie-permission-overlay-color


Feldtyp: Nummernfeld

Beispiel Wert: 0

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Cookie-Hinweis" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-cookie-permission-overlay-effect-blur


Feldtyp: Nummernfeld

Beispiel Wert: 40

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Cookie-Hinweis" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-cookie-permission-top


Feldtyp: Nummernfeld

Beispiel Wert: 25

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Cookie-Hinweis" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-cookie-permission-left


Feldtyp: Nummernfeld

Beispiel Wert: 40

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Cookie-Hinweis" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-cookie-permission-bottom


Feldtyp: Nummernfeld

Beispiel Wert: 25

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Cookie-Hinweis" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-cookie-permission-right


Feldtyp: Auswahlfeld

Verfügbare Werte: • Container-Max-Width (Full-width-boxed) • 100% (Full-width)

Beispiel Wert: Container-Max-Width (Full-width-boxed)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Cookie-Hinweis" => Abschnitt "Darstellungsart: 'Banner: unten (Standard)' und 'Banner: oben'"

Technischer Name: twt-cookie-permission-width


Feldtyp: Textfeld

Beispiel Wert: 260

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Cookie-Hinweis" => Abschnitt "Darstellungsart: 'Card: unten rechts'"

Technischer Name: twt-cookie-permission-max-width


Feldtyp: Farbauswahl

Beispiel Wert: #555555

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Cookie-Hinweis" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-cookie-permission-color


Feldtyp: Farbauswahl

Beispiel Wert: #cccccc

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Cookie-Hinweis" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-cookie-permission-border-color


Feldtyp: Farbauswahl

Beispiel Wert: #ffffff

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Cookie-Hinweis" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-cookie-permission-background-color


Feldtyp: Farbauswahl

Beispiel Wert: $sw-border-color

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Cookie-Hinweis" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-cookie-permission-deny-btn-background-color


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-secondary

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Cookie-Hinweis" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-cookie-permission-configuration-btn-background-color


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Cookie-Hinweis" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-cookie-permission-accept-all-btn-background-color

Innenabstand [px]

Schlagschatten

CSS box-shadow Eigenschaft (z.B. '0 0 30px').

Schattenfarbe

Hintergrundfarbe (Overlay)

Wähle die gewünschte Hintergrundfarbe vom Overlay (backdrop) aus.

Darstellungsart:

  • Modal mit Overlay

Glaseffekt [px] (Overlay)

Gib die gewünschte Stärke für den Unschärfe-Effekt vom Overlay (backdrop) ein.

Darstellungsart:

  • Modal mit Overlay

Abstand oben [px]

Darstellungsart:

  • Modal: oben (mit Overlay)

Abstand links [px]

Wird derzeit nicht verwendet.

Abstand unten [px]

Darstellungsart:

  • Card: unten rechts

  • Modal: unten (mit Overlay)

  • Modal: unten rechts (mit Overlay)

Abstand rechts [px]

Darstellungsart:

  • Card: unten rechts

  • Modal: unten rechts (mit Overlay)

Banner: unten (Standard) und oben

Breite

Wähle den Größenmodus vom "Cookie-Hinweis" aus.

Darstellungsart:

  • Banner: unten (Standard)

  • Banner: oben

Card: unten rechts

Maximale Breite [px]

Darstellungsart:

  • Card: unten rechts

Farbkonfiguration

Text-/Linkfarbe

Rahmenfarbe

Hintergrundfarbe

Farbe (Button "Ablehnen")

Der Button "Ablehnen" sollte keine prägnante Farbe haben.

Farbe (Button "Konfiguration")

Farbe (Button "Alle Cookies akzeptieren")

Konfiguration

Basiskonfiguration


Ecken

Feldtyp: Auswahlfeld

Verfügbare Werte: • Standard • abgerundete Ecken • runde Ecken

Beispiel Wert: runde Ecken

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Produkt-Badges" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-product-badges-corner-type

abgerundete Ecken Verwendet die Konfiguration "Abgerundete Ecken". (siehe "Layout" > "Layout" > "Abgerundete Ecken")

runde Ecken Verwendet einen vordefinierten Radius für runde Ecken.


Schriftgröße

Feldtyp: Nummernfeld

Beispiel Wert: 16

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Produkt-Badges" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-product-badges-font-size


Feldtyp: Auswahlfeld

Verfügbare Werte: • Lagerbestand ober-/unterhalb des Schwellwerts anzeigen • Lagerbestand immer anzeigen

Beispiel Wert: Lagerbestand ober-/unterhalb des Schwellwerts anzeigen

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Produkt-Badges" => Abschnitt "Badge: Lagerbestand-Badge"

Technischer Name: twt-product-badges-stock-badge-mode


Feldtyp: Nummernfeld

Beispiel Wert: 10

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Produkt-Badges" => Abschnitt "Badge: Lagerbestand-Badge"

Technischer Name: twt-product-badges-stock-badge-threshold-lowstock


Feldtyp: Nummernfeld

Beispiel Wert: 500

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Produkt-Badges" => Abschnitt "Badge: Lagerbestand-Badge"

Technischer Name: twt-product-badges-stock-badge-threshold-highstock


Feldtyp: Auswahlfeld

Verfügbare Werte: • Standard • Standard, kontrastreich • Standard, hell • individuelle Färbung

Beispiel Wert: Standard

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Produkt-Badges" => Abschnitt "Badge: Lagerbestand-Badge"

Technischer Name: twt-product-badges-stock-badge-coloration


Feldtyp: Farbauswahl

Beispiel Wert: #f1c40f

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Produkt-Badges" => Abschnitt "Badge: Lagerbestand-Badge"

Technischer Name: twt-product-badges-stock-badge-background-color


Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen

Beispiel Wert: nicht anzeigen

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Produkt-Badges" => Abschnitt "Badge: Lagerbestand-Badge"

Technischer Name: twt-product-badges-stock-badge-icon-show


Feldtyp: Auswahlfeld

Verfügbare Werte: • Standard • Standard, kontrastreich • Standard, hell • individuelle Färbung

Beispiel Wert: Standard

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Produkt-Badges" => Abschnitt "Badge: Ausverkauft-Badge"

Technischer Name: twt-product-badges-sold-badge-coloration


Feldtyp: Farbauswahl

Beispiel Wert: #e74c3c

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Produkt-Badges" => Abschnitt "Badge: Ausverkauft-Badge"

Technischer Name: twt-product-badges-sold-badge-background-color


Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen

Beispiel Wert: nicht anzeigen

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Produkt-Badges" => Abschnitt "Badge: Ausverkauft-Badge"

Technischer Name: twt-product-badges-sold-badge-icon-show


Feldtyp: Auswahlfeld

Verfügbare Werte: • Standard • Standard, kontrastreich • Standard, hell • individuelle Färbung

Beispiel Wert: Standard

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Produkt-Badges" => Abschnitt "Badge: Versandkostenfrei-Badge"

Technischer Name: twt-product-badges-shipping-free-badge-coloration


Feldtyp: Farbauswahl

Beispiel Wert: #4aa3df

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Produkt-Badges" => Abschnitt "Badge: Versandkostenfrei-Badge"

Technischer Name: twt-product-badges-shipping-free-badge-background-color


Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen

Beispiel Wert: nicht anzeigen

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Produkt-Badges" => Abschnitt "Badge: Versandkostenfrei-Badge"

Technischer Name: twt-product-badges-shipping-free-badge-icon-show


Feldtyp: Auswahlfeld

Verfügbare Werte: • % (Standard) • -25 % • 25 % gespart • -35 € • 35 € gespart

Beispiel Wert: % (Standard)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Produkt-Badges" => Abschnitt "Badge: Rabatt-Badge"

Technischer Name: twt-product-badges-discount-badge-type


Feldtyp: Auswahlfeld

Verfügbare Werte: • 0.12 (Standard) • 0.1 • 0

Beispiel Wert: 0.12 (Standard)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Produkt-Badges" => Abschnitt "Badge: Rabatt-Badge"

Technischer Name: twt-product-badges-discount-badge-round


Feldtyp: Auswahlfeld

Verfügbare Werte: • Standard • Standard, kontrastreich • Standard, hell • individuelle Färbung

Beispiel Wert: Standard

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Produkt-Badges" => Abschnitt "Badge: Rabatt-Badge"

Technischer Name: twt-product-badges-discount-badge-coloration


Feldtyp: Farbauswahl

Beispiel Wert: #e74c3c

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Produkt-Badges" => Abschnitt "Badge: Rabatt-Badge"

Technischer Name: twt-product-badges-discount-badge-background-color


Feldtyp: Auswahlfeld

Verfügbare Werte: • Standard • Standard, kontrastreich • Standard, hell • individuelle Färbung

Beispiel Wert: Standard

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Produkt-Badges" => Abschnitt "Badge: Topseller-Badge"

Technischer Name: twt-product-badges-topseller-badge-coloration


Feldtyp: Farbauswahl

Beispiel Wert: #f1c40f

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Produkt-Badges" => Abschnitt "Badge: Topseller-Badge"

Technischer Name: twt-product-badges-topseller-badge-background-color


Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen

Beispiel Wert: nicht anzeigen

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Produkt-Badges" => Abschnitt "Badge: Topseller-Badge"

Technischer Name: twt-product-badges-topseller-badge-icon-show


Feldtyp: Auswahlfeld

Verfügbare Werte: • Standard • Standard, kontrastreich • Standard, hell • individuelle Färbung

Beispiel Wert: Standard

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Produkt-Badges" => Abschnitt "Badge: Neu-Badge"

Technischer Name: twt-product-badges-new-badge-coloration


Feldtyp: Farbauswahl

Beispiel Wert: #2ecc71

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Produkt-Badges" => Abschnitt "Badge: Neu-Badge"

Technischer Name: twt-product-badges-new-badge-background-color


Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen

Beispiel Wert: nicht anzeigen

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Produkt-Badges" => Abschnitt "Badge: Neu-Badge"

Technischer Name: twt-product-badges-new-badge-icon-show

Badge: Lagerbestand-Badge

Modus

Wähle, wann die Badge angezeigt wird: nur um den Schwellenwert oder immer.

Schwellwert (geringer Bestand)

Bei Produkten mit einem niedrigeren Lagerbestand wird eine Badge angezeigt.

Schwellwert (hoher Bestand)

Bei Produkten mit einem größeren Lagerbestand wird eine Badge angezeigt.

Färbung

Standard: Standard-Farbe von Shopware 6 mit weißer Textfarbe.

Standard, hell: Helle Farbnuance der Standard-Farbe von Shopware 6 mit einer ausreichend kontrastreichen Textfarbe.

Standard, kontrastreich: Standard-Farbe von Shopware 6 mit einer ausreichend kontrastreichen Textfarbe.

individuelle Färbung: Wähle eine individuelle Hintergrundfarbe. Eine ausreichend kontrastreiche Textfarbe wird automatisch generiert.

Hintergrundfarbe (individuelle Färbung)

Hinweis: Diese Konfiguration bezieht sich auf die Färbung "individuelle Färbung".

Für einen ausreichenden Kontrast mit weißem Text, empfehlen wir #a06b00.

Icon anzeigen

Um das Icon zu bearbeiten oder übersetzen, nutze bitte den Textbaustein: twt.extension.stockBadge.lowStock.icon bzw. twt.extension.stockBadge.highStock.icon

Badge: Ausverkauft-Badge

Färbung

Standard: Standard-Farbe von Shopware 6 mit weißer Textfarbe.

Standard, hell: Helle Farbnuance der Standard-Farbe von Shopware 6 mit einer ausreichend kontrastreichen Textfarbe.

Standard, kontrastreich: Standard-Farbe von Shopware 6 mit einer ausreichend kontrastreichen Textfarbe.

individuelle Färbung: Wähle eine individuelle Hintergrundfarbe. Eine ausreichend kontrastreiche Textfarbe wird automatisch generiert.

Hintergrundfarbe (individuelle Färbung)

Hinweis: Diese Konfiguration bezieht sich auf die Färbung "individuelle Färbung".

Für einen ausreichenden Kontrast mit weißem Text, empfehlen wir #e52427.

Icon anzeigen

Um das Icon zu bearbeiten oder übersetzen, nutze bitte den Textbaustein: twt.extension.soldBadge.icon

Badge: Versandkostenfrei-Badge

Färbung

Standard: Standard-Farbe von Shopware 6 mit weißer Textfarbe.

Standard, hell: Helle Farbnuance der Standard-Farbe von Shopware 6 mit einer ausreichend kontrastreichen Textfarbe.

Standard, kontrastreich: Standard-Farbe von Shopware 6 mit einer ausreichend kontrastreichen Textfarbe.

individuelle Färbung: Wähle eine individuelle Hintergrundfarbe. Eine ausreichend kontrastreiche Textfarbe wird automatisch generiert.

Hintergrundfarbe (individuelle Färbung)

Hinweis: Diese Konfiguration bezieht sich auf die Färbung "individuelle Färbung".

Für einen ausreichenden Kontrast mit weißem Text, empfehlen wir #008199.

Icon anzeigen

Um das Icon zu bearbeiten oder übersetzen, nutze bitte den Textbaustein: twt.extension.shippingFreeBadge.icon

Badge: Rabatt-Badge

Layout

Zahl runden

Rundet Sie den Wert entweder auf oder ab (1,5 bis 2).

Färbung

Standard: Standard-Farbe von Shopware 6 mit weißer Textfarbe.

Standard, hell: Helle Farbnuance der Standard-Farbe von Shopware 6 mit einer ausreichend kontrastreichen Textfarbe.

Standard, kontrastreich: Standard-Farbe von Shopware 6 mit einer ausreichend kontrastreichen Textfarbe.

individuelle Färbung: Wähle eine individuelle Hintergrundfarbe. Eine ausreichend kontrastreiche Textfarbe wird automatisch generiert.

Hintergrundfarbe (individuelle Färbung)

Hinweis: Diese Konfiguration bezieht sich auf die Färbung "individuelle Färbung".

Für einen ausreichenden Kontrast mit weißem Text, empfehlen wir #e52427.

Badge: Topseller-Badge

Färbung

Standard: Standard-Farbe von Shopware 6 mit weißer Textfarbe.

Standard, hell: Helle Farbnuance der Standard-Farbe von Shopware 6 mit einer ausreichend kontrastreichen Textfarbe.

Standard, kontrastreich: Standard-Farbe von Shopware 6 mit einer ausreichend kontrastreichen Textfarbe.

individuelle Färbung: Wähle eine individuelle Hintergrundfarbe. Eine ausreichend kontrastreiche Textfarbe wird automatisch generiert.

Hintergrundfarbe (individuelle Färbung)

Hinweis: Diese Konfiguration bezieht sich auf die Färbung "individuelle Färbung".

Für einen ausreichenden Kontrast mit weißem Text, empfehlen wir #a06b00.

Icon anzeigen

Um das Icon zu bearbeiten oder übersetzen, nutze bitte den Textbaustein: twt.extension.topsellerBadge.icon

Badge: Neu-Badge

Färbung

Standard: Standard-Farbe von Shopware 6 mit weißer Textfarbe.

Standard, hell: Helle Farbnuance der Standard-Farbe von Shopware 6 mit einer ausreichend kontrastreichen Textfarbe.

Standard, kontrastreich: Standard-Farbe von Shopware 6 mit einer ausreichend kontrastreichen Textfarbe.

individuelle Färbung: Wähle eine individuelle Hintergrundfarbe. Eine ausreichend kontrastreiche Textfarbe wird automatisch generiert.

Hintergrundfarbe (individuelle Färbung)

Hinweis: Diese Konfiguration bezieht sich auf die Färbung "individuelle Färbung".

Für einen ausreichenden Kontrast mit weißem Text, empfehlen wir #00892d.

Icon anzeigen

Um das Icon zu bearbeiten oder übersetzen, nutze bitte den Textbaustein: twt.extension.newBadge.icon

Konfiguration


Breadcrumb anzeigen (Startseite)

Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen (Standard)

Beispiel Wert: nicht anzeigen

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb"

Technischer Name: twt-breadcrumb-show-home


Breadcrumb anzeigen (CMS-Shopseiten)

Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen (Standard)

Beispiel Wert: anzeigen (Standard)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb"

Technischer Name: twt-breadcrumb-show-cms-shop-pages


Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen (Standard)

Beispiel Wert: anzeigen (Standard)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb"

Technischer Name: twt-breadcrumb-show-cms-landing-pages


Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen (Standard)

Beispiel Wert: anzeigen (Standard)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb"

Technischer Name: twt-breadcrumb-show-cms-category-pages


Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen (Standard)

Beispiel Wert: anzeigen (Standard)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb"

Technischer Name: twt-breadcrumb-show-cms-product-pages

a## Basiskonfiguration


Feldtyp: Auswahlfeld

Verfügbare Werte: • Links (Standard) • Links mit Hintergrundfarbe • Buttons

Beispiel Wert: Links (Standard)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-breadcrumb-style


Feldtyp: Auswahlfeld

Verfügbare Werte: • Chevron (Standard) • Doppel-Chevron • Pfeil • Schrägstrich • Punkt • senkrechter Strich • Bindestrich

Beispiel Wert: Chevron (Standard)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-breadcrumb-separator-style


Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen (Standard) • Home-Icon anzeigen • Home-Link anzeigen • Text anzeigen ("Sie sind hier:") • Text und Home-Icon anzeigen • Text und Home-Link anzeigen

Beispiel Wert: nicht anzeigen (Standard)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-breadcrumb-further-information


Feldtyp: Farbauswahl

Beispiel Wert: #444444

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-breadcrumb-text-color


Feldtyp: Farbauswahl

Beispiel Wert: #444444

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-breadcrumb-link-color


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-breadcrumb-link-active-color


Feldtyp: Farbauswahl

Beispiel Wert: #444444

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-breadcrumb-divider-color


Feldtyp: Farbauswahl

Beispiel Wert: #bcc1c7

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-breadcrumb-buttons-border-color


Feldtyp: Farbauswahl

Beispiel Wert: #eeeeee

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-breadcrumb-buttons-background-color


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-breadcrumb-buttons-border-color-active


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-breadcrumb-buttons-background-color-active


Feldtyp: Auswahlfeld

Verfügbare Werte: • nein (Standard) • ja • nur @hover • nur im Ruhezustand

Beispiel Wert: nein (Standard)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Typografie"

Technischer Name: twt-breadcrumb-links-underline


Feldtyp: Auswahlfeld

Verfügbare Werte: • kein Container-Styling (Standard) • ThemeWare® CMS-Styling • Benutzerdefiniertes Container-Styling

Beispiel Wert: kein Container-Styling (Standard)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Breadcrumb-Container (Shopware-Standard-Breadcrumb)"

Technischer Name: twt-breadcrumb-container-styling


Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht abgerundet • abgerundete Ecken (Standard) • runde Ecken

Beispiel Wert: abgerundete Ecken (Standard)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Breadcrumb-Container (Shopware-Standard-Breadcrumb)"

Technischer Name: twt-breadcrumb-container-corner-type


Feldtyp: Auswahlfeld

Verfügbare Werte: • Container-Max-Width (Full-width-boxed) • 100% (Full-width)

Beispiel Wert: Container-Max-Width (Full-width-boxed)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Breadcrumb-Container (Shopware-Standard-Breadcrumb)"

Technischer Name: twt-breadcrumb-width


Feldtyp: Nummernfeld

Beispiel Wert: 10

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Breadcrumb-Container (Shopware-Standard-Breadcrumb)"

Technischer Name: twt-breadcrumb-margin-top


Feldtyp: Nummernfeld

Beispiel Wert: 10

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Breadcrumb-Container (Shopware-Standard-Breadcrumb)"

Technischer Name: twt-breadcrumb-margin-bottom


Feldtyp: Nummernfeld

Beispiel Wert: 1

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Breadcrumb-Container (Shopware-Standard-Breadcrumb)"

Technischer Name: twt-breadcrumb-padding-top-bottom


Feldtyp: Nummernfeld

Beispiel Wert: 1

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Breadcrumb-Container (Shopware-Standard-Breadcrumb)"

Technischer Name: twt-breadcrumb-padding-left-right


Feldtyp: Auswahlfeld

Verfügbare Werte: • links ausrichten • zentriert ausrichten • rechts ausrichten

Beispiel Wert: links ausrichten

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Breadcrumb-Container (Shopware-Standard-Breadcrumb)"

Technischer Name: twt-breadcrumb-justify-content


Feldtyp: Farbauswahl

Beispiel Wert: rgba(0, 0, 0, 0)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Breadcrumb-Container → Container-Styling: Benutzerdefiniertes Container-Styling"

Technischer Name: twt-breadcrumb-border-color


Feldtyp: Farbauswahl

Beispiel Wert: rgba(0, 0, 0, 0)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Breadcrumb-Container → Container-Styling: Benutzerdefiniertes Container-Styling"

Technischer Name: twt-breadcrumb-border-top-color


Feldtyp: Farbauswahl

Beispiel Wert: rgba(0, 0, 0, 0)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Breadcrumb-Container → Container-Styling: Benutzerdefiniertes Container-Styling"

Technischer Name: twt-breadcrumb-border-bottom-color


Feldtyp: Farbauswahl

Beispiel Wert: rgba(0, 0, 0, 0)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Breadcrumb-Container → Container-Styling: Benutzerdefiniertes Container-Styling"

Technischer Name: twt-breadcrumb-background-color


Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht abgerundet • abgerundete Ecken • runde Ecken

Beispiel Wert: abgerundete Ecken

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Darstellungsart: Links in farbiger Box"

Technischer Name: twt-breadcrumb-list-corner-type


Feldtyp: Farbauswahl

Beispiel Wert: #bcc1c7

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Darstellungsart: Links in farbiger Box"

Technischer Name: twt-breadcrumb-border-color-list


Feldtyp: Farbauswahl

Beispiel Wert: #eeeeee

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Darstellungsart: Links in farbiger Box"

Technischer Name: twt-breadcrumb-background-color-list


Feldtyp: Auswahlfeld

Verfügbare Werte: • nein • ja

Beispiel Wert: nein

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Darstellungsart: Buttons"

Technischer Name: twt-breadcrumb-buttons-separator-show


Feldtyp: Auswahlfeld

Verfügbare Werte: • nein • ja

Beispiel Wert: ja

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Darstellungsart: Buttons"

Technischer Name: twt-breadcrumb-buttons-border-show


Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht abgerundet • abgerundete Ecken • runde Ecken

Beispiel Wert: abgerundete Ecken

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Darstellungsart: Buttons"

Technischer Name: twt-breadcrumb-buttons-corner-type

Breadcrumb anzeigen (CMS-Landingpages)

Breadcrumb anzeigen (CMS-Kategorieseiten)

Breadcrumb anzeigen (CMS-Produktseite)

Darstellungsart

Links Links und Trennzeichen.

Links mit Hintergrundfarbe Links und Trennzeichen mit einem farbigen Hintergrund.

Buttons Links als Buttons, ohne Trennzeichen.

Darstellungsart (Trennzeichen)

Zusatzinformationen

Um den Text "Sie sind hier:" zu bearbeiten oder übersetzen, nutze bitte den Textbaustein: twt.breadcrumb.furtherInformation

Um den Text "Home-Link" zu bearbeiten nutze bitte den Textbaustein: general.homeLink

Farbkonfiguration

Textfarbe (Zusatzinformationen)

Linkfarbe

Linkfarbe @active

Iconfarbe (Trennzeichen)

Rahmenfarbe

Wird in der Standard-Breadcrumb verwendet. Die Hero-Section nutzt die Textfarbe des Elements.

Hintergrundfarbe

Wird in der Standard-Breadcrumb verwendet. Die Hero-Section nutzt die Textfarbe des Elements.

Rahmenfarbe @active

Wird in der Standard-Breadcrumb verwendet. Die Hero-Section nutzt die Textfarbe des Elements.

Hintergrundfarbe @active

Wird in der Standard-Breadcrumb verwendet. Die Hero-Section nutzt die Textfarbe des Elements.

Typografie

Links unterstreichen

Unterstreiche Breadcrumb-Links, damit klickbare Einträge von nicht-klickbaren strukturellen Seiten klar unterschieden werden und so die Barrierefreiheit verbessert wird.

Hinweis: Wirkt nur bei den Darstellungsarten "Links" und "Links in farbiger Box". Button-Stile sind nicht betroffen.

Diese Konfiguration kann durch die Barrierefreiheits-Konfiguration "Links unterstreichen" im Tab "Weiteres" => Bereich "Barrierefreiheit" => Abschnitt "Layout" überschrieben werden.

Breadcrumb-Container

Container-Styling

Ecken

abgerundete Ecken Verwendet die Konfiguration "Abgerundete Ecken". ("Layout" > "Layout" > "Abgerundete Ecken")

runde Ecken Verwendet einen vordefinierten Radius für runde Ecken.

Breite

Lege die Größenmodus der Breadcrumb-Container auf CMS-Seiten im Grundlayout "Full-width-boxed" fest.

Außenabstand oben

Lege den Außenabstand nach oben für den Breadcrumb-Container auf CMS-Seiten fest.

Außenabstand unten

Lege den Außenabstand nach unten für den Breadcrumb-Container auf CMS-Seiten fest.

Innenabstand oben/unten

Lege den Innenabstand nach oben/unten für den Breadcrumb-Container auf CMS-Seiten fest.

Wenn du eine Hintergrundfarbe nutzt ist '15' ein sinnvoller Wert.

Innenabstand links/rechts

Lege den Innenabstand nach links/rechts für den Breadcrumb-Container auf CMS-Seiten fest.

Wenn du eine Hintergrundfarbe nutzt ist '20' ein sinnvoller Wert.

Inhalt ausrichten

Wähle die gewünschte horizontale Ausrichtung aus.

links Elemente werden am Anfang des Containers positioniert.

rechts Elemente werden am Ende des Containers positioniert.

zentriert Die Elemente befinden sich in der Mitte des Containers.

space-between Elemente werden gleichmäßig verteilt. Das erste Element an den Start, das letzte an das Ende.

space-around Elemente werden gleichmäßig verteilt. Alle Elemente haben gleiche Abstände um sie herum.

Benutzerdefiniertes Container-Styling

Rahmenfarbe

Lege die Rahmenfarbe für den Breadcrumb-Container fest.

Rahmenfarbe oben

Lege die Rahmenfarbe oben für den Breadcrumb-Container fest.

Wird nur angewendet wenn dieser Farbwert von der Rahmenfarbe abweicht.

Rahmenfarbe unten

Lege die Rahmenfarbe unten für den Breadcrumb-Container fest.

Wird nur angewendet wenn dieser Farbwert von der Rahmenfarbe abweicht.

Hintergrundfarbe

Lege die Hintergrundfarbe für den Breadcrumb-Container fest.

Darstellungsart "Links mit Hintergrundfarbe"

Ecken

abgerundete Ecken Verwendet die Konfiguration "Abgerundete Ecken". ("Layout" > "Layout" > "Abgerundete Ecken")

runde Ecken Verwendet einen vordefinierten Radius für runde Ecken.

Rahmenfarbe

Lege die Rahmenfarbe für den Breadcrumb fest.

Wird bei Darstellungsarten mit Hintergrundfarbe benutzt.

Hintergrundfarbe

Lege die Hintergrundfarbe für den Breadcrumb fest.

Wird bei Darstellungsarten mit Hintergrundfarbe benutzt.

Darstellungsart "Buttons"

Trennzeichen anzeigen

Wähle ob das Trennzeichen-Icon in der Breadcrumb angezeigt werden soll.

Rahmen anzeigen

Wähle ob ein Rahmen um die Buttons angezeigt werden soll.

Die Farbe vom Rahmen kannst du unten konfigurieren.

Ecken

abgerundete Ecken Verwendet die Konfiguration "Abgerundete Ecken". ("Layout" > "Layout" > "Abgerundete Ecken")

runde Ecken Verwendet einen vordefinierten Radius für runde Ecken.

Paginierung