Basic configuration
Here you set the layout type of the form fields.
Layout type
Field type:
Select
Available values:
• default
• clean
• underlined
Example value:underlined
Path to the configuration:
Tab "Layout" => Block "Forms" => Section "Basic configuration"
Technical name:twt-forms-layout-type
default: Form fields with a border all around.
clean: Form fields as a coloured area without a border, defined by the background colours only (on focus the background colour @focus).
underlined: Form fields with a line at the bottom only.
Applies to input fields, selection fields and the quantity selection (-/+).
Colour configuration
The colours of the input and selection fields, each also for hover and focus.
Text colour
Field type:
Color picker
Example value:#222222
Path to the configuration:
Tab "Layout" => Block "Forms" => Section "Colour configuration"
Technical name:twt-forms-input-color
Text colour @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-color-hover
Text colour @focus
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
Border colour
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
Has no effect with the layout type "clean", which has no border.
Border colour @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-border-color-hover
Has no effect with the layout type "clean", which has no border.
Border colour @focus
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
Has no effect with the layout type "clean", which has no border.
Background colour
Field type:
Color picker
Example value:#f4f4f4
Path to the configuration:
Tab "Layout" => Block "Forms" => Section "Colour configuration"
Technical name:twt-forms-input-background-color
Background colour @hover
Field type:
Color picker
Example value:#e7e7e7
Path to the configuration:
Tab "Layout" => Block "Forms" => Section "Colour configuration"
Technical name:twt-forms-input-background-color-hover
Background colour @focus
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
Placeholder colour
Field type:
Color picker
Example value:#666666
Path to the configuration:
Tab "Layout" => Block "Forms" => Section "Colour configuration"
Technical name:twt-forms-input-placeholder-color
Typography
The font size of the input and selection fields.
Font size
Field type:
Number field
Example value:15
Path to the configuration:
Tab "Layout" => Block "Forms" => Section "Typography"
Technical name:twt-forms-input-font-size
Label
Text colour and font size of the labels above the form fields.
Text colour
Field type:
Color picker
Example value:#515151
Path to the configuration:
Tab "Layout" => Block "Forms" => Section "Label"
Technical name:twt-forms-label-color
Font size
Field type:
Number field
Example value:14
Path to the configuration:
Tab "Layout" => Block "Forms" => Section "Label"
Technical name:twt-forms-label-font-size
Checks & radios
The colours of the checkboxes and radio buttons.
Background colour
Field type:
Color picker
Example value:#cccccc
Path to the configuration:
Tab "Layout" => Block "Forms" => Section "Checks & radios"
Technical name:twt-forms-check-input-background-color
Background colour @checked
Field type:
Color picker
Example value:$sw-color-brand-primary
Path to the configuration:
Tab "Layout" => Block "Forms" => Section "Checks & radios"
Technical name:twt-forms-check-input-checked-background-color
Quantity selection (-/+)
Separation and colours of the -/+ buttons of the quantity selection on the product page, Quickview, product box and in the shopping cart.
Separation
Field type:
Select
Available values:
• none (default)
• separated
Example value:none (default)
Path to the configuration:
Tab "Layout" => Block "Forms" => Section "Quantity selection (-/+)"
Technical name:twt-forms-quantity-selector-separation
Separates the -/+ buttons from the input field. How the separation looks depends on the layout type of the form fields:
default: lines between the buttons and the input field, in the border colour of the form fields (on hover the border colour @hover).
clean and underlined: buttons and input field stand as separate areas or lines with a small distance.
none: no separation, as in Shopware.
Background colour
Field type:
Color picker
Example value:#ffffff
Path to the configuration:
Tab "Layout" => Block "Forms" => Section "Quantity selection (-/+)"
Technical name:twt-forms-quantity-selector-btn-background-color
Background colour of the -/+ buttons. Applies wherever a quantity selection appears: product page, Quickview, product box and shopping cart.
Border and layout type (standard/clean/underlined) follow the form fields.
Tip: With the background colour of the form fields, input field and buttons look like one field.
Background colour @hover
Field type:
Color picker
Example value:#e7e7e7
Path to the configuration:
Tab "Layout" => Block "Forms" => Section "Quantity selection (-/+)"
Technical name:twt-forms-quantity-selector-btn-background-color-hover
Background colour of the -/+ buttons on hover.
Icon colour
Field type:
Color picker
Example value:#4a545b
Path to the configuration:
Tab "Layout" => Block "Forms" => Section "Quantity selection (-/+)"
Technical name:twt-forms-quantity-selector-btn-color
Colour of the - and + icons.
Icon colour @hover
Field type:
Color picker
Example value:$sw-color-brand-primary
Path to the configuration:
Tab "Layout" => Block "Forms" => Section "Quantity selection (-/+)"
Technical name:twt-forms-quantity-selector-btn-color-hover
Colour of the - and + icons on hover.