Field type: Number field
Example value:
80
Path to the configuration: Tab "Layout" => Block "Typography" => Section "Responsive scaling"
Technical name:
twt-font-size-html-xs
With this configuration, you can reduce the default font size in the corresponding viewport as a percentage.
For accessibility reasons, please note that the font should not be smaller than 16px.
Example: 80
Field type: Number field
Example value:
90
Path to the configuration: Tab "Layout" => Block "Typography" => Section "Responsive scaling"
Technical name:
twt-font-size-html-sm
Field type: Number field
Example value:
100
Path to the configuration: Tab "Layout" => Block "Typography" => Section "Responsive scaling"
Technical name:
twt-font-size-html-xl
Field type: Font family
Example value:
'Inter', sans-serif
Path to the configuration: Tab "Layout" => Block "Typography" => Section "Text"
Technical name:
sw-font-family-base
Field type: Color picker
Example value:
#111111
Path to the configuration: Tab "Layout" => Block "Typography" => Section "Text"
Technical name:
sw-text-color
Field type: Number field
Example value:
16
Path to the configuration: Tab "Layout" => Block "Typography" => Section "Text"
Technical name:
twt-font-size-base
Field type: Font family
Example value:
'Inter', sans-serif
Path to the configuration: Tab "Layout" => Block "Typography" => Section "Headlines"
Technical name:
sw-font-family-headline
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Layout" => Block "Typography" => Section "Headlines"
Technical name:
sw-headline-color
Field type: Number field
Example value:
36
Path to the configuration: Tab "Layout" => Block "Typography" => Section "Headlines"
Technical name:
twt-font-size-h1
Field type: Number field
Example value:
28
Path to the configuration: Tab "Layout" => Block "Typography" => Section "Headlines"
Technical name:
twt-font-size-h2
Field type: Number field
Example value:
24
Path to the configuration: Tab "Layout" => Block "Typography" => Section "Headlines"
Technical name:
twt-font-size-h3
Field type: Number field
Example value:
20
Path to the configuration: Tab "Layout" => Block "Typography" => Section "Headlines"
Technical name:
twt-font-size-h4
Field type: Number field
Example value:
16
Path to the configuration: Tab "Layout" => Block "Typography" => Section "Headlines"
Technical name:
twt-font-size-h5
Field type: Number field
Example value:
14
Path to the configuration: Tab "Layout" => Block "Typography" => Section "Headlines"
Technical name:
twt-font-size-h6
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Layout" => Block "Typography" => Section "Links"
Technical name:
twt-link-color
Field type: Number field
Example value:
400
Path to the configuration: Tab "Layout" => Block "Typography" => Section "Font weight"
Technical name:
twt-font-weight-light
Field type: Number field
Example value:
400
Path to the configuration: Tab "Layout" => Block "Typography" => Section "Font weight"
Technical name:
twt-font-weight-normal
Field type: Number field
Example value:
600
Path to the configuration: Tab "Layout" => Block "Typography" => Section "Font weight"
Technical name:
twt-font-weight-bold
Field type: Select
Available values: • no • yes
Example value:
no
Path to the configuration: Tab "Layout" => Block "Typography" => Section "Google Fonts"
Technical name:
twt-google-font-import
Field type: Text field
Example value:
400,600
Path to the configuration: Tab "Layout" => Block "Typography" => Section "Google Fonts"
Technical name:
twt-font-family-base-font-weight
Field type: Text field
Example value:
400,600
Path to the configuration: Tab "Layout" => Block "Typography" => Section "Google Fonts"
Technical name:
twt-font-family-headline-font-weight
Field type: Select
Available values: • default (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
Example value:
default (Shopware 6)
Path to the configuration: Tab "Layout" => Block "Typography" => Section "Iconset"
Technical name:
twt-iconset
Field type: Select
Available values: • Shopping bag (default) • Shopping basket • Shopping cart
Example value:
Shopping bag (default)
Path to the configuration: Tab "Layout" => Block "Typography" => Section "Iconset"
Technical name:
twt-icon-cart
Field type: Select
Available values: • Arrow right (default) • Envelope • Paper plane
Example value:
Envelope
Path to the configuration: Tab "Layout" => Block "Typography" => Section "Iconset"
Technical name:
twt-icon-newsletter-submit
Field type: Select
Available values: • Checkmark (default) • Heart • Star • Trophy
Example value:
Checkmark (default)
Path to the configuration: Tab "Layout" => Block "Typography" => Section "Iconset"
Technical name:
twt-icon-benefits
With this configuration, you can reduce the default font size in the corresponding viewport as a percentage.
For accessibility reasons, please note that the font should not be smaller than 16px.
Example: 90
With this configuration, you can reduce the default font size in the corresponding viewport as a percentage.
For accessibility reasons, please note that the font should not be smaller than 16px.
Example: 100
Theme fonts are loaded automatically from your server. Other fonts must be added individually.
For more information about the font configuration, watch our video tutorial.
Example: 'Inter', sans-serif
ThemeWare® variables ($twt-...) are currently not possible in this field.
Variable: $sw-text-color
Theme fonts are loaded automatically from your server. Other fonts must be added individually.
For more information about the font configuration, watch our video tutorial.
Example: 'Inter', sans-serif
ThemeWare® variables ($twt-...) are currently not possible in this field.
Variable: $sw-headline-color
Select the desired colour for general links in the Storefront.
Beta: This configuration is in a testing phase, feel free to give it a try.
Note: The hover colour is also generated from this colour.
Select the desired font weight: 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)
Select the desired font weight: 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)
Select the desired font weight: 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)
Select whether Google Fonts should be loaded via the Google Fonts API (yes) or not (no).
Important: Before using font APIs such as Google Fonts, be sure to obtain legal advice regarding the General Data Protection Regulation (GDPR).
Select the desired font weights: 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)
Example: 400,600
Select the desired font weights: 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)
Example: 400,600
Here you can choose between different iconsets.
Individual icons can be selected with separate configuration fields.
Note: With the "default" iconset, the icons are not modified and cannot be changed.
Replaces the default icon from the cart button in the header if the icon is available in the selected iconset.
Note: With the "default" iconset, the icon is not changed.
Replaces the default icon from the submit button in the newsletter widget if the icon is available in the selected iconset.
Note: With the "default" iconset, the icon is not changed.