Configuration
Text
Fonttype
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
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
Text colour
Field type: Color picker
Example value:
#111111
Path to the configuration: Tab "Layout" => Block "Typography" => Section "Text"
Technical name:
sw-text-color
ThemeWare® variables ($twt-...) are currently not possible in this field.
Variable: $sw-text-color
Font size
Field type: Number field
Example value:
16
Path to the configuration: Tab "Layout" => Block "Typography" => Section "Text"
Technical name:
twt-font-size-base
Headlines
Fonttype
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
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
Text colour
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
ThemeWare® variables ($twt-...) are currently not possible in this field.
Variable: $sw-headline-color
Font size (h1)
Field type: Number field
Example value:
36
Path to the configuration: Tab "Layout" => Block "Typography" => Section "Headlines"
Technical name:
twt-font-size-h1
Font size (h2)
Field type: Number field
Example value:
28
Path to the configuration: Tab "Layout" => Block "Typography" => Section "Headlines"
Technical name:
twt-font-size-h2
Font size (h3)
Field type: Number field
Example value:
24
Path to the configuration: Tab "Layout" => Block "Typography" => Section "Headlines"
Technical name:
twt-font-size-h3
Font size (h4)
Field type: Number field
Example value:
20
Path to the configuration: Tab "Layout" => Block "Typography" => Section "Headlines"
Technical name:
twt-font-size-h4
Font size (h5)
Field type: Number field
Example value:
16
Path to the configuration: Tab "Layout" => Block "Typography" => Section "Headlines"
Technical name:
twt-font-size-h5
Font size (h6)
Field type: Number field
Example value:
14
Path to the configuration: Tab "Layout" => Block "Typography" => Section "Headlines"
Technical name:
twt-font-size-h6
Links
Link colour
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
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.
Font weight
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-light
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)
Font weight (normal)
Field type: Number field
Example value:
400
Path to the configuration: Tab "Layout" => Block "Typography" => Section "Font weight"
Technical name:
twt-font-weight-normal
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)
Font weight (bold)
Field type: Number field
Example value:
600
Path to the configuration: Tab "Layout" => Block "Typography" => Section "Font weight"
Technical name:
twt-font-weight-bold
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)
Google Fonts
Import Google Fonts
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
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).
Font weight for Google Fonts (Text)
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
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
Font weight for Google Fonts (Headlines)
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
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
Iconset
Iconset
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
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.
Icon: Shopping cart
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
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.
Icon: Newsletter
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
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.
Icon: Benefits
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
Last updated
