Konfiguration
Text
Schriftart
Feldtyp: Schriftart
Beispiel Wert:
'Inter', sans-serif
Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Text"
Technischer Name:
sw-font-family-base
Theme-Schriften werden automatisch von deinem Server geladen. Andere Schriften müssen individuell hinzugefügt werden.
Für mehr Informationen zur Schriftkonfiguration, schaue dir unser Video-Tutorial an.
Beispiel: 'Inter', sans-serif
Textfarbe
Feldtyp: Farbauswahl
Beispiel Wert:
#111111
Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Text"
Technischer Name:
sw-text-color
In diesem Feld sind derzeit keine ThemeWare® Variablen ($twt-...) möglich.
Variable: $sw-text-color
Schriftgröße
Feldtyp: Nummernfeld
Beispiel Wert:
16
Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Text"
Technischer Name:
twt-font-size-base
Überschriften
Schriftart
Feldtyp: Schriftart
Beispiel Wert:
'Inter', sans-serif
Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften"
Technischer Name:
sw-font-family-headline
Theme-Schriften werden automatisch von deinem Server geladen. Andere Schriften müssen individuell hinzugefügt werden.
Für mehr Informationen zur Schriftkonfiguration, schaue dir unser Video-Tutorial an.
Beispiel: 'Inter', sans-serif
Textfarbe
Feldtyp: Farbauswahl
Beispiel Wert:
$sw-color-brand-primary
Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften"
Technischer Name:
sw-headline-color
In diesem Feld sind derzeit keine ThemeWare® Variablen ($twt-...) möglich.
Variable: $sw-headline-color
Schriftgröße (h1)
Feldtyp: Nummernfeld
Beispiel Wert:
36
Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften"
Technischer Name:
twt-font-size-h1
Schriftgröße (h2)
Feldtyp: Nummernfeld
Beispiel Wert:
28
Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften"
Technischer Name:
twt-font-size-h2
Schriftgröße (h3)
Feldtyp: Nummernfeld
Beispiel Wert:
24
Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften"
Technischer Name:
twt-font-size-h3
Schriftgröße (h4)
Feldtyp: Nummernfeld
Beispiel Wert:
20
Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften"
Technischer Name:
twt-font-size-h4
Schriftgröße (h5)
Feldtyp: Nummernfeld
Beispiel Wert:
16
Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften"
Technischer Name:
twt-font-size-h5
Schriftgröße (h6)
Feldtyp: Nummernfeld
Beispiel Wert:
14
Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften"
Technischer Name:
twt-font-size-h6
Links
Linkfarbe
Feldtyp: Farbauswahl
Beispiel Wert:
$sw-color-brand-primary
Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Links"
Technischer Name:
twt-link-color
Wähle die gewünschte Farbe für allgemeine Links in der Storefront.
Beta: Diese Konfiguration befindet sich in der Testphase, probiere Sie gerne einmal aus.
Hinweis: Die Hover-Farbe wird ebenfalls aus dieser Farbe generiert.
Strichstärke
Strichstärke (light)
Feldtyp: Nummernfeld
Beispiel Wert:
400
Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Strichstärke"
Technischer Name:
twt-font-weight-light
Wähle die gewünschte Schriftstärke: 100 = Thin (Hairline) 200 = Extra Light (Ultra Light) 300 = Light 400 = Normal (Regular) 500 = Medium 600 = Semi Bold (Demi Bold) 700 = Bold 800 = Extra Bold (Ultra Bold) 900 = Black (Heavy) 950 = Extra Black (Ultra Black)
Strichstärke (normal)
Feldtyp: Nummernfeld
Beispiel Wert:
400
Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Strichstärke"
Technischer Name:
twt-font-weight-normal
Wähle die gewünschte Schriftstärke: 100 = Thin (Hairline) 200 = Extra Light (Ultra Light) 300 = Light 400 = Normal (Regular) 500 = Medium 600 = Semi Bold (Demi Bold) 700 = Bold 800 = Extra Bold (Ultra Bold) 900 = Black (Heavy) 950 = Extra Black (Ultra Black)
Strichstärke (bold)
Feldtyp: Nummernfeld
Beispiel Wert:
600
Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Strichstärke"
Technischer Name:
twt-font-weight-bold
Wähle die gewünschte Schriftstärke: 100 = Thin (Hairline) 200 = Extra Light (Ultra Light) 300 = Light 400 = Normal (Regular) 500 = Medium 600 = Semi Bold (Demi Bold) 700 = Bold 800 = Extra Bold (Ultra Bold) 900 = Black (Heavy) 950 = Extra Black (Ultra Black)
Google Fonts
Google Fonts importieren
Feldtyp: Auswahlfeld
Verfügbare Werte: • nein • ja
Beispiel Wert:
nein
Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Google Fonts"
Technischer Name:
twt-google-font-import
Wähle aus, ob Google Fonts über die Google Fonts API geladen werden sollen (ja) oder nicht (nein).
Wichtig: Lasse Dich vor der Nutzung von Font APIs wie z.B. Google Fonts bezüglich Datenschutz-Grundverordnung (DSGVO) rechtlich beraten.
Strichstärke für Google Fonts (Text)
Feldtyp: Textfeld
Beispiel Wert:
400,600
Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Google Fonts"
Technischer Name:
twt-font-family-base-font-weight
Wähle die gewünschten Schriftstärken: 100 = Thin (Hairline) 200 = Extra Light (Ultra Light) 300 = Light 400 = Normal (Regular) 500 = Medium 600 = Semi Bold (Demi Bold) 700 = Bold 800 = Extra Bold (Ultra Bold) 900 = Black (Heavy) 950 = Extra Black (Ultra Black)
Beispiel: 400,600
Strichstärke für Google Fonts (Überschriften)
Feldtyp: Textfeld
Beispiel Wert:
400,600
Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Google Fonts"
Technischer Name:
twt-font-family-headline-font-weight
Wähle die gewünschten Schriftstärken: 100 = Thin (Hairline) 200 = Extra Light (Ultra Light) 300 = Light 400 = Normal (Regular) 500 = Medium 600 = Semi Bold (Demi Bold) 700 = Bold 800 = Extra Bold (Ultra Bold) 900 = Black (Heavy) 950 = Extra Black (Ultra Black)
Beispiel: 400,600
Iconset
Modifizierte Icons in ThemeWare®
Neben den Standard-Icons von Shopware bieten wir in ThemeWare® auch spezifisch gestaltete Icons, die die Standard-Icons überlagern. Diese modifizierten Icons gewährleisten eine einheitliche und markenspezifische Benutzeroberfläche. Hier sind einige der wichtigsten modifizierten Icons und deren Verwendung:
Home-Icon (home): Modifiziert für die Startseite, erscheint in der Kopfzeile (Klasse .home-link .icon-home)
Wunschzettel-Icon (heart): Verwendet in der Kopfzeile für die Wunschliste (Klasse .header-wishlist .icon-heart)
Benutzer-Icon (avatar): Angepasst für das Benutzerkonto-Menü, ebenfalls in der Kopfzeile (Klasse .account-menu .icon-avatar)
Warenkorb-Icon (cart): Zu sehen in der Kopfzeile für den Warenkorb (Klasse .header-cart .icon-bag)
Such-Icon (search): Zwei Verwendungen in der Kopfzeile, einmal für die allgemeine Suche (Klasse .header-search-icon .icon-search) und einmal für das Flyout-Suchfeld (Klasse .header-search-toggle-icon .icon-search)
Schließen-Icon (x): Verwendet im Flyout-Suchfeld zum Schließen (Klasse .header-search-toggle-icon .icon-x)
Newsletter-Submit-Icon (envelope): Im Footer für das Newsletter-Formular (Klasse .footer-column-newsletter .icon-arrow-head-right)
Hamburger-Menü-Icon (stack): Modifiziert für die mobile Navigation in der Kopfzeile (Klasse .nav-main-toggle-btn .icon-stack)
Service-Menü-Icon (help): Verwendet in der Kopfzeile für das Hilfemenü (Klasse .top-bar-nav-btn .icon-help)
Um diese Icons in Ihrem Shop zu sehen, können sie testweise zugewiesen werden und sind dann im Shop sichtbar.
Iconset
Feldtyp: Auswahlfeld
Verfügbare Werte: • Standard (Shopware 6) • ThemeWare® One • ThemeWare® One solid (new) • ThemeWare® One thin (new) • ThemeWare® Light • ThemeWare® Six (new) • ThemeWare® Six solid (new) • Boxicons • Boxicons (Variation) • Boxicons solid • Boxicons solid (Variation) • Font Awesome v5 • Font Awesome v5 (Variation) • Font Awesome v6 • Font Awesome v6 (Variation) • Feather • Material Icons • Shopware 6
Beispiel Wert:
Standard (Shopware 6)
Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Iconset"
Technischer Name:
twt-iconset
Hier kannst du zwischen verschiedenen Icons-Sets wählen.
Einzelne Icons können mit separaten Konfigurationsfeldern ausgewählt werden.
Hinweis: Beim Icons-Set "Standard" werden die Icons nicht modifiziert und sind nicht austauschbar.
Icon: Warenkorb
Feldtyp: Auswahlfeld
Verfügbare Werte: • Einkaufstasche (Standard) • Einkaufskorb • Einkaufswagen
Beispiel Wert:
Einkaufstasche (Standard)
Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Iconset"
Technischer Name:
twt-icon-cart
Tauscht das Standard-Icon vom "Warenkorb"-Button im Header aus, sofern das Icon im gewählten Iconsset verfügbar ist.
Hinweis: Beim Icons-Set "Standard" wird das Icon nicht geändert.
Icon: Newsletter
Feldtyp: Auswahlfeld
Verfügbare Werte: • Pfeil nach rechts (Standard) • Briefumschlag • Papierflugzeug
Beispiel Wert:
Briefumschlag
Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Iconset"
Technischer Name:
twt-icon-newsletter-submit
Tauscht das Standard-Icon vom "Senden"-Button im Newsletter-Widget aus, sofern das Icon im gewählten Iconsset verfügbar ist.
Hinweis: Beim Icons-Set "Standard" wird das Icon nicht geändert.
Icon: Vorteile
Feldtyp: Auswahlfeld
Verfügbare Werte: • Häkchen (Standard) • Herz • Stern • Trophäe
Beispiel Wert:
Häkchen (Standard)
Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Iconset"
Technischer Name:
twt-icon-benefits
Last updated
