Suche
Service Portal
Wissensdatenbank
Sonstiges
EnglishSupport anfordern

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

PreviousTypografieNextE-Commerce

Last updated

Was this helpful?