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


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

Logo

© 2024 by ThemeWare® | Made with 💙 by TC-Innovations GmbH