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