Feldtyp: Nummernfeld
Beispiel Wert:
80
Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Responsive Skalierung"
Technischer Name:
twt-font-size-html-xs
Feldtyp: Nummernfeld
Beispiel Wert:
90
Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Responsive Skalierung"
Technischer Name:
twt-font-size-html-sm
Feldtyp: Nummernfeld
Beispiel Wert:
100
Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Responsive Skalierung"
Technischer Name:
twt-font-size-html-xl
Feldtyp: Schriftart
Beispiel Wert:
'Inter', sans-serif
Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Text"
Technischer Name:
sw-font-family-base
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
Feldtyp: Farbauswahl
Beispiel Wert:
#111111
Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Text"
Technischer Name:
sw-text-color
Feldtyp: Nummernfeld
Beispiel Wert:
16
Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Text"
Technischer Name:
twt-font-size-base
Feldtyp: Schriftart
Beispiel Wert:
'Inter', sans-serif
Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften"
Technischer Name:
sw-font-family-headline
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
Feldtyp: Farbauswahl
Beispiel Wert:
$sw-color-brand-primary
Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften"
Technischer Name:
sw-headline-color
Feldtyp: Nummernfeld
Beispiel Wert:
36
Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften"
Technischer Name:
twt-font-size-h1
Feldtyp: Nummernfeld
Beispiel Wert:
28
Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften"
Technischer Name:
twt-font-size-h2
Feldtyp: Nummernfeld
Beispiel Wert:
24
Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften"
Technischer Name:
twt-font-size-h3
Feldtyp: Nummernfeld
Beispiel Wert:
20
Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften"
Technischer Name:
twt-font-size-h4
Feldtyp: Nummernfeld
Beispiel Wert:
16
Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften"
Technischer Name:
twt-font-size-h5
Feldtyp: Nummernfeld
Beispiel Wert:
14
Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften"
Technischer Name:
twt-font-size-h6
Feldtyp: Farbauswahl
Beispiel Wert:
$sw-color-brand-primary
Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Links"
Technischer Name:
twt-link-color
Feldtyp: Nummernfeld
Beispiel Wert:
400
Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Strichstärke"
Technischer Name:
twt-font-weight-light
Feldtyp: Nummernfeld
Beispiel Wert:
400
Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Strichstärke"
Technischer Name:
twt-font-weight-normal
Feldtyp: Nummernfeld
Beispiel Wert:
600
Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Strichstärke"
Technischer Name:
twt-font-weight-bold
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
Feldtyp: Textfeld
Beispiel Wert:
400,600
Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Google Fonts"
Technischer Name:
twt-font-family-base-font-weight
Feldtyp: Textfeld
Beispiel Wert:
400,600
Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Google Fonts"
Technischer Name:
twt-font-family-headline-font-weight
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)
Um diese Icons in Ihrem Shop zu sehen, können sie testweise zugewiesen werden und sind dann im Shop sichtbar.
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
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
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
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
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)
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.
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.