Responsive Skalierung
Schriftgröße in % @Phone (<576px)
Feldtyp:
Nummernfeld
Beispiel Wert:80
Pfad zur Einstellung:
Tab "Layout" => Bereich "Typografie" => Abschnitt "Responsive Skalierung"
Technischer Name:twt-font-size-html-xs
Mit dieser Konfiguration kannst du die Standard-Schriftgröße im entsprechenden Viewport prozentual verkleinern.
Bitte beachte aus Gründen der Barrierefreiheit, dass die Schrift nicht kleiner als 16px sein sollte.
Beispiel: 80
Schriftgröße in % @Phone (landscape) (≥576px)
Feldtyp:
Nummernfeld
Beispiel Wert:90
Pfad zur Einstellung:
Tab "Layout" => Bereich "Typografie" => Abschnitt "Responsive Skalierung"
Technischer Name:twt-font-size-html-sm
Mit dieser Konfiguration kannst du die Standard-Schriftgröße im entsprechenden Viewport prozentual verkleinern.
Bitte beachte aus Gründen der Barrierefreiheit, dass die Schrift nicht kleiner als 16px sein sollte.
Beispiel: 90
Schriftgröße in % @Desktop (≥1200px)
Feldtyp:
Nummernfeld
Beispiel Wert:100
Pfad zur Einstellung:
Tab "Layout" => Bereich "Typografie" => Abschnitt "Responsive Skalierung"
Technischer Name:twt-font-size-html-xl
Mit dieser Konfiguration kannst du die Standard-Schriftgröße im entsprechenden Viewport prozentual verkleinern.
Bitte beachte aus Gründen der Barrierefreiheit, dass die Schrift nicht kleiner als 16px sein sollte.
Beispiel: 100
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.
Welche Schriften mitgeliefert werden, steht im Abschnitt Google Fonts, wie die Schriftkonfiguration funktioniert in der Wissensdatenbank.
Beispiel: 'Inter', sans-serif
Größenkorrektur
Feldtyp:
Nummernfeld
Beispiel Wert:100
Mögliche Werte:75 bis 125
Pfad zur Einstellung:
Tab "Layout" => Bereich "Typografie" => Abschnitt "Text"
Technischer Name:twt-font-family-base-size-adjust
Skaliert die oben gewählte Schriftart, ohne die Schriftgrößen anzupassen. 100 = keine Korrektur. Der Wert gilt für die Schriftart selbst, also überall dort, wo sie im Shop verwendet wird. Wirkt nicht bei Inter (wird von Shopware geladen), nicht bei aktiviertem Google-Fonts-Import und nicht bei eigenen Schriften.
Die Korrektur vergrößert nur die Buchstaben, nicht die Flächen um sie herum. Ein Button oder ein Badge behält seine Höhe, weil sich die Zeilenhöhe an der Schriftgröße orientiert und die bleibt unverändert. Der Text wird also größer, der Abstand zum Rand kleiner.
Die Breite wächst dagegen mit. Prüfe nach einer Änderung Buttons, Badges und die Navigation auf umbrechende Beschriftungen.
Ab etwa 120 rücken bei mehrzeiligem Fließtext die Zeilen sichtbar zusammen, weil auch der Zeilenabstand unverändert bleibt.
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.
Welche Schriften mitgeliefert werden, steht im Abschnitt Google Fonts, wie die Schriftkonfiguration funktioniert in der Wissensdatenbank.
Beispiel: 'Inter', sans-serif
Größenkorrektur
Feldtyp:
Nummernfeld
Beispiel Wert:100
Mögliche Werte:75 bis 125
Pfad zur Einstellung:
Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften"
Technischer Name:twt-font-family-headline-size-adjust
Skaliert die oben gewählte Schriftart, ohne die Schriftgrößen anzupassen. 100 = keine Korrektur. Der Wert gilt für die Schriftart selbst, also überall dort, wo sie im Shop verwendet wird. Wirkt nicht bei Inter (wird von Shopware geladen), nicht bei aktiviertem Google-Fonts-Import und nicht bei eigenen Schriften.
Die Korrektur vergrößert nur die Buchstaben, nicht die Flächen um sie herum. Ein Button oder ein Badge behält seine Höhe, weil sich die Zeilenhöhe an der Schriftgröße orientiert und die bleibt unverändert. Der Text wird also größer, der Abstand zum Rand kleiner.
Die Breite wächst dagegen mit. Prüfe nach einer Änderung Buttons, Badges und die Navigation auf umbrechende Beschriftungen.
Ab etwa 120 rücken bei mehrzeiligem Fließtext die Zeilen sichtbar zusammen, weil auch der Zeilenabstand unverändert bleibt.
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