Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Field type: Color picker
Example value:
#fedc70
Path to the configuration: Tab "Layout" => Block "Product rating" => Section "Colour configuration"
Technical name:
twt-product-review-point-color
Field type: Color picker
Example value:
#bcc1c7
Path to the configuration: Tab "Layout" => Block "Product rating" => Section "Colour configuration"
Technical name:
twt-product-review-point-blank-color
Field type: Color picker
Example value:
rgba(0, 0, 0, 0.5)
Path to the configuration: Tab "Layout" => Block "Modals" => Section "Colour configuration"
Technical name:
twt-modal-backdrop-color
Select the desired background colour of the backdrop.
Field type: Number field
Example value:
0
Path to the configuration: Tab "Layout" => Block "Modals" => Section "Colour configuration"
Technical name:
twt-modal-backdrop-effect-blur
Enter the desired value for the blur effect of the backdrop.
Field type: Color picker
Example value:
#3cc261
Path to the configuration: Tab "Layout" => Block "Status messages"
Technical name:
sw-color-success
ThemeWare® variables ($twt-...) are currently not possible in this field.
Variable: $sw-color-success
Field type: Color picker
Example value:
#26b6cf
Path to the configuration: Tab "Layout" => Block "Status messages"
Technical name:
sw-color-info
Field type: Color picker
Example value:
#ffbd5d
Path to the configuration: Tab "Layout" => Block "Status messages"
Technical name:
sw-color-warning
Field type: Color picker
Example value:
#e52427
Path to the configuration: Tab "Layout" => Block "Status messages"
Technical name:
sw-color-danger
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Layout" => Block "Buttons" => Section "Colour configuration"
Technical name:
twt-color-primary-button
Here you can configure the background colour for the primary button.
Text colour / hover effect: According to Bootstrap, the text colour is automatically inverted from this colour value. For the hover effect, this colour value is automatically darkened.
Variable: $twt-color-primary-button
Field type: Color picker
Example value:
$sw-color-brand-secondary
Path to the configuration: Tab "Layout" => Block "Buttons" => Section "Colour configuration"
Technical name:
twt-color-secondary-button
Field type: Color picker
Example value:
#f9f9f9
Path to the configuration: Tab "Layout" => Block "Buttons" => Section "Colour configuration"
Technical name:
twt-color-light-button
Field type: Color picker
Example value:
$sw-color-brand-secondary
Path to the configuration: Tab "Layout" => Block "E-Commerce"
Technical name:
sw-color-price
ThemeWare® variables ($twt-...) are currently not possible in this field.
Variable: $sw-color-price
Field type: Color picker
Example value:
#3d7f53
Path to the configuration: Tab "Layout" => Block "E-Commerce"
Technical name:
sw-color-buy-button
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Layout" => Block "E-Commerce"
Technical name:
sw-color-buy-button-text
Field type: Color picker
Example value:
#f9f9f9
Path to the configuration: Tab "Layout" => Block "E-Commerce"
Technical name:
twt-color-details-button
Field type: Color picker
Example value:
#000000
Path to the configuration: Tab "Layout" => Block "Dropdowns" => Section "Colour configuration"
Technical name:
twt-dropdown-color
Select the text colour in dropdown menus.
Note: Please note that selected dropdowns (e.g. in the header) have a separate configuration.
Field type: Color picker
Example value:
#000000
Path to the configuration: Tab "Layout" => Block "Dropdowns" => Section "Colour configuration"
Technical name:
twt-dropdown-link-color
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Layout" => Block "Dropdowns" => Section "Colour configuration"
Technical name:
twt-dropdown-link-color-hover
Field type: Color picker
Example value:
#e0e0e0
Path to the configuration: Tab "Layout" => Block "Dropdowns" => Section "Colour configuration"
Technical name:
twt-dropdown-border-color
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Layout" => Block "Dropdowns" => Section "Colour configuration"
Technical name:
twt-dropdown-background-color
Field type: Select
Available values: • no shadow (default) • ThemeWare® default • Small shadow (Bootstrap) • Regular shadow (Bootstrap) • Larger shadow (Bootstrap)
Example value:
no shadow (default)
Path to the configuration: Tab "Layout" => Block "Dropdowns" => Section "Drop shadow"
Technical name:
twt-dropdown-box-shadow-type
Field type: Media selection
Example value:
app/storefront/src/assets/logo/modern-logo.webp
Path to the configuration: Tab "Layout" => Block "Media"
Technical name:
sw-logo-desktop
Field type: Media selection
Example value:
app/storefront/src/assets/logo/modern-logo.webp
Path to the configuration: Tab "Layout" => Block "Media"
Technical name:
sw-logo-tablet
Field type: Media selection
Example value:
app/storefront/src/assets/logo/modern-logo.webp
Path to the configuration: Tab "Layout" => Block "Media"
Technical name:
sw-logo-mobile
Field type: Media selection
Example value:
app/storefront/src/assets/logo/modern-share-icon.png
Path to the configuration: Tab "Layout" => Block "Media"
Technical name:
sw-logo-share
Field type: Media selection
Example value:
app/storefront/src/assets/logo/modern-favicon.png
Path to the configuration: Tab "Layout" => Block "Media"
Technical name:
sw-logo-favicon
Field type: Media selection
Example value:
app/storefront/src/assets/logo/modern-logo.webp
Path to the configuration: Tab "Layout" => Block "Media"
Technical name:
twt-sticky-nav-main-logo-image
Field type: Media selection
Example value:
app/storefront/src/assets/logo/modern-logo.webp
Path to the configuration: Tab "Layout" => Block "Media"
Technical name:
twt-shopping-experiences-header-logo-image
Field type: Color picker
Example value:
#0c72a7
Path to the configuration: Tab "Layout" => Block "Main colours"
Technical name:
sw-color-brand-primary
Field type: Color picker
ThemeWare® variables ($twt-...) are currently not possible in this field.
Variable: $sw-color-info
ThemeWare® variables ($twt-...) are currently not possible in this field.
Variable: $sw-color-warning
ThemeWare® variables ($twt-...) are currently not possible in this field.
Variable: $sw-color-danger
Here you can configure the background colour for the secondary button.
Text colour / hover effect: According to Bootstrap, the text colour is automatically inverted from this colour value. For the hover effect, this colour value is automatically darkened.
Variable: $twt-color-secondary-button
Here you can configure the background colour for the light button.
Text colour / hover effect: According to Bootstrap, the text colour is automatically inverted from this colour value. For the hover effect, this colour value is automatically darkened.
Variable: $twt-color-light-button
ThemeWare® variables ($twt-...) are currently not possible in this field.
Variable: $sw-color-buy-button
ThemeWare® variables ($twt-...) are currently not possible in this field.
Here you can configure the background colour for the details button.
Text colour / hover effect: According to Bootstrap, the text colour is automatically inverted from this colour value. For the hover effect, this colour value is automatically darkened.
Variable: $twt-color-details-button
Select the link colour in dropdown menus.
Note: Please note that selected dropdowns (e.g. in the header) have a separate configuration.
Select the link colour @hover in dropdown menus.
Note: Please note that selected dropdowns (e.g. in the header) have a separate configuration.
Select the border colour of dropdown menus.
Note: Please note that selected dropdowns (e.g. in the header) have a separate configuration.
Select the background colour of dropdown menus.
Note: Please note that selected dropdowns (e.g. in the header) have a separate configuration.
Select the drop shadow of dropdown menus.
Only available with header position "Shopping Experience behind the header" (see "Shopping Experiences" > "All types" > "Basic configuration" > "Header position (Home)")
#404b58Path to the configuration: Tab "Layout" => Block "Main colours"
Technical name:
sw-color-brand-secondary
Field type: Color picker
Example value:
#eaeaf0
Path to the configuration: Tab "Layout" => Block "Main colours"
Technical name:
sw-border-color
Field type: Color picker
Example value:
#fafafa
Path to the configuration: Tab "Layout" => Block "Main colours"
Technical name:
sw-background-color
Field type: Color picker
Example value:
#2a96cf
Path to the configuration: Tab "Layout" => Block "Main colours"
Technical name:
twt-color-brand-primary-light
Field type: Color picker
Example value:
#104d6e
Path to the configuration: Tab "Layout" => Block "Main colours"
Technical name:
twt-color-brand-primary-dark
Field type: Color picker
Example value:
#4b5867
Path to the configuration: Tab "Layout" => Block "Main colours"
Technical name:
twt-color-brand-secondary-light
Field type: Color picker
Example value:
#353e49
Path to the configuration: Tab "Layout" => Block "Main colours"
Technical name:
twt-color-brand-secondary-dark
ThemeWare® variables ($twt-...) are currently not possible in this field.
Variable: $sw-color-brand-primary
ThemeWare® variables ($twt-...) are currently not possible in this field.
Variable: $sw-color-brand-secondary
ThemeWare® variables ($twt-...) are currently not possible in this field.
Variable: $sw-border-color
ThemeWare® variables ($twt-...) are currently not possible in this field.
Variable: $sw-background-color
A bright shade of the primary colour.
Variable: $twt-color-brand-primary-light
A darker shade of the primary colour.
Variable: $twt-color-brand-primary-dark
A bright shade of the secondary colour.
Variable: $twt-color-brand-secondary-light
A darker shade of the secondary colour.
Variable: $twt-color-brand-secondary-dark
Field type: Select
Available values: • default • underlined
Example value:
underlined
Path to the configuration: Tab "Layout" => Block "Forms" => Section "Basic configuration"
Technical name:
twt-forms-layout-type
Field type: Color picker
Example value:
#222222
Path to the configuration: Tab "Layout" => Block "Forms" => Section "Colour configuration"
Technical name:
twt-forms-input-color
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Layout" => Block "Forms" => Section "Colour configuration"
Technical name:
twt-forms-input-color-hover
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Layout" => Block "Forms" => Section "Colour configuration"
Technical name:
twt-forms-input-focus-color
Field type: Color picker
Example value:
#cccccc
Path to the configuration: Tab "Layout" => Block "Forms" => Section "Colour configuration"
Technical name:
twt-forms-input-border-color
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Layout" => Block "Forms" => Section "Colour configuration"
Technical name:
twt-forms-input-border-color-hover
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Layout" => Block "Forms" => Section "Colour configuration"
Technical name:
twt-forms-input-focus-border-color
Field type: Color picker
Example value:
#fafafa
Path to the configuration: Tab "Layout" => Block "Forms" => Section "Colour configuration"
Technical name:
twt-forms-input-background-color
Field type: Color picker
Example value:
#e7e7e7
Path to the configuration: Tab "Layout" => Block "Forms" => Section "Colour configuration"
Technical name:
twt-forms-input-focus-background-color
Field type: Color picker
Example value:
#8e8e8e
Path to the configuration: Tab "Layout" => Block "Forms" => Section "Colour configuration"
Technical name:
twt-forms-input-placeholder-color
Field type: Color picker
Example value:
#cccccc
Path to the configuration: Tab "Layout" => Block "Forms" => Section "Colour configuration (Checks & radios)"
Technical name:
twt-forms-check-input-background-color
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Layout" => Block "Forms" => Section "Colour configuration (Checks & radios)"
Technical name:
twt-forms-check-input-checked-background-color
Field type: Number field
Example value:
15
Path to the configuration: Tab "Layout" => Block "Forms"
Technical name:
twt-forms-input-font-size
Note: This is a special color that only applies to certain layouts.
Note: This is a special color that only applies to certain layouts.
Field type: Color picker
Example value:
#333333
Path to the configuration: Tab "Layout" => Block "Tables" => Section "Colour configuration"
Technical name:
twt-table-body-color
Field type: Color picker
Example value:
#eeeeee
Path to the configuration: Tab "Layout" => Block "Tables" => Section "Colour configuration"
Technical name:
twt-table-body-border-color
Field type: Color picker
Example value:
transparent
Path to the configuration: Tab "Layout" => Block "Tables" => Section "Colour configuration"
Technical name:
twt-table-body-background-color
Field type: Color picker
Example value:
transparent
Path to the configuration: Tab "Layout" => Block "Tables" => Section "Colour configuration"
Technical name:
twt-table-accent-background-color
Field type: Color picker
Example value:
$twt-table-body-color
Path to the configuration: Tab "Layout" => Block "Tables" => Section "Colour configuration"
Technical name:
twt-table-hover-color
Field type: Color picker
Example value:
rgba(0, 0, 0, 0.075)
Path to the configuration: Tab "Layout" => Block "Tables" => Section "Colour configuration"
Technical name:
twt-table-hover-background-color
Field type: Color picker
Example value:
$twt-table-hover-background-color
Path to the configuration: Tab "Layout" => Block "Tables" => Section "Colour configuration"
Technical name:
twt-table-active-background-color
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Layout" => Block "Tables" => Section "Table head (light tables) [deprecated]"
Technical name:
twt-table-head-color
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Layout" => Block "Tables" => Section "Table head (light tables) [deprecated]"
Technical name:
twt-table-head-background-color
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Layout" => Block "Tables" => Section "Dark tables [deprecated]"
Technical name:
twt-table-dark-color
Field type: Color picker
Example value:
#5b6770
Path to the configuration: Tab "Layout" => Block "Tables" => Section "Dark tables [deprecated]"
Technical name:
twt-table-dark-border-color
Field type: Color picker
Example value:
#4a545b
Path to the configuration: Tab "Layout" => Block "Tables" => Section "Dark tables [deprecated]"
Technical name:
twt-table-dark-background-color
Field type: Color picker
Example value:
rgba(255, 255, 255, 0.05)
Path to the configuration: Tab "Layout" => Block "Tables" => Section "Dark tables [deprecated]"
Technical name:
twt-table-dark-accent-background-color
Field type: Color picker
Example value:
$twt-table-dark-color
Path to the configuration: Tab "Layout" => Block "Tables" => Section "Dark tables [deprecated]"
Technical name:
twt-table-dark-hover-color
Field type: Color picker
Example value:
rgba(255, 255, 255, 0.075)
Path to the configuration: Tab "Layout" => Block "Tables" => Section "Dark tables [deprecated]"
Technical name:
twt-table-dark-hover-background-color
Field type: Color picker
Example value:
#dddddd
Path to the configuration: Tab "Layout" => Block "Tables" => Section "Extended tables [deprecated]"
Technical name:
twt-table-border-color
Field type: Color picker
Example value:
rgba(0, 0, 0, 0)
Path to the configuration: Tab "Layout" => Block "Tables" => Section "Extended tables [deprecated]"
Technical name:
twt-table-body-border-bottom-color
Field type: Color picker
Example value:
$twt-table-body-border-color
Path to the configuration: Tab "Layout" => Block "Tables" => Section "Extended tables [deprecated]"
Technical name:
twt-table-head-border-bottom-color
Field type: Color picker
Example value:
$twt-table-dark-border-color
Path to the configuration: Tab "Layout" => Block "Tables" => Section "Extended tables [deprecated]"
Technical name:
twt-table-dark-head-border-bottom-color
Field type: Select
Available values: • Full-width • Full-width Boxed • Boxed
Example value:
Full-width Boxed
Path to the configuration: Tab "Layout" => Block "Layout" => Section "Basic configuration"
Technical name:
twt-container-layout
Select the sizing mode of the container.
Field type: Number field
Example value:
2
Path to the configuration: Tab "Layout" => Block "Layout" => Section "Basic configuration"
Technical name:
twt-border-radius
Field type: Media selection
Example value: ``
Path to the configuration: Tab "Layout" => Block "Layout" => Section "Background-image"
Technical name:
twt-background-image
Field type: Select
Available values: • don't show • show
Example value:
show
Path to the configuration: Tab "Layout" => Block "Layout" => Section "Background-image"
Technical name:
twt-background-image-show
Field type: Select
Available values: • Initial size (auto) • Cover background completely (cover) • Cover background completely (contain)
Example value:
Initial size (auto)
Path to the configuration: Tab "Layout" => Block "Layout" => Section "Background-image"
Technical name:
twt-background-image-size
Field type: Select
Available values: • left, top • left, center • left, bottom • right, top • right, center • right, bottom • center, top • center, center • center, bottom
Example value:
left, top
Path to the configuration: Tab "Layout" => Block "Layout" => Section "Background-image"
Technical name:
twt-background-image-position
Field type: Select
Available values: • No repeat (no-repeat) • Horizontal and vertical (repeat) • Horizontal (repeat-x) • Vertical (repeat-y)
Example value:
Horizontal and vertical (repeat)
Path to the configuration: Tab "Layout" => Block "Layout" => Section "Background-image"
Technical name:
twt-background-image-repeat
Field type: Select
Available values: • Background image scrolls with the page (scroll) • Background image stays fixed (fixed)
Example value:
Background image stays fixed (fixed)
Path to the configuration: Tab "Layout" => Block "Layout" => Section "Background-image"
Technical name:
twt-background-image-attachment
Field type: Number field
Example value:
1400
Path to the configuration: Tab "Layout" => Block "Layout" => Section "Container"
Technical name:
twt-container-max-width
Field type: Number field
Example value:
10
Path to the configuration: Tab "Layout" => Block "Layout" => Section "Container"
Technical name:
twt-container-padding-left-right
Field type: Number field
Example value:
30
Path to the configuration: Tab "Layout" => Block "Layout" => Section "Container (Basic layout "boxed")"
Technical name:
twt-container-layout-margin-top-bottom
Field type: Text field
Example value:
0 0 30px
Path to the configuration: Tab "Layout" => Block "Layout" => Section "Container (Basic layout "boxed")"
Technical name:
twt-container-layout-box-shadow
Field type: Color picker
Example value:
rgba(0, 0, 0, 0.3)
Path to the configuration: Tab "Layout" => Block "Layout" => Section "Container (Basic layout "boxed")"
Technical name:
twt-container-layout-box-shadow-color
Field type: Number field
Example value:
20
Path to the configuration: Tab "Layout" => Block "Layout" => Section "Container (Non-CMS pages)"
Technical name:
twt-container-main-margin-top
Field type: Number field
Example value:
20
Path to the configuration: Tab "Layout" => Block "Layout" => Section "Container (Non-CMS pages)"
Technical name:
twt-container-main-margin-bottom
Field type: Number field
Example value:
8
Path to the configuration: Tab "Layout" => Block "Layout" => Section "Container (Non-CMS pages)"
Technical name:
twt-container-main-padding-phone-xs
Field type: Number field
Example value:
15
Path to the configuration: Tab "Layout" => Block "Layout" => Section "Container (Non-CMS pages)"
Technical name:
twt-container-main-padding-phone
Field type: Number field
Example value:
20
Path to the configuration: Tab "Layout" => Block "Layout" => Section "Container (Non-CMS pages)"
Technical name:
twt-container-main-padding-tablet
Field type: Number field
Example value:
30
Path to the configuration: Tab "Layout" => Block "Layout" => Section "Container (Non-CMS pages)"
Technical name:
twt-container-main-padding
Field type: Color picker
Example value:
#eeeeee
Path to the configuration: Tab "Layout" => Block "Layout" => Section "Container (Non-CMS pages)"
Technical name:
twt-container-main-border-color
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Layout" => Block "Layout" => Section "Container (Non-CMS pages)"
Technical name:
twt-container-main-background-color
auto The auto keyword scales the background image in the appropriate direction to maintain the initial aspect ratio.
cover The image is sized to maintain its aspect ratio while filling the element's entire content box.
contain The image is sized to maintain its aspect ratio while fitting within the element's content box.
Scroll: The background image scrolls with the page.
Fixed: The background image stays fixed relative to the viewport.
Set the outer spacing (left and right) of the main container on non-CMS pages.
default: 20
Just until "Container" > "Maximum width" reached.
Set the margin top of the main container on non-CMS pages.
Set the margin bottom of the main container on non-CMS pages.
Set the padding in the main container on non-CMS pages.
Set the padding in the main container on non-CMS pages.
Set the padding in the main container on non-CMS pages.
Set the padding in the main container on non-CMS pages.
Select the border colour of the main container on non-CMS pages.
Select the background colour of the main container on non-CMS pages.
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.