Configuration


Individual styling

Field type: Select

Available values: • don't use (default) • use individual styling

Example value: don't use (default)

Path to the configuration: Tab "Shopping Experiences" => Block "Image slider (Category "Images")"

Technical name: twt-image-slider-controls-individual

In the tab "Content" you can configure all sliders globally.

Arrow navigation (Individual styling)


Layout type

Field type: Select

Available values: • Rectangle (default) • Square/Circle

Example value: Rectangle (default)

Path to the configuration: Tab "Shopping Experiences" => Block "Image slider (Category "Images")" => Section "Arrow navigation (Individual styling)"

Technical name: twt-image-slider-controls-style


Corner type

Field type: Select

Available values: • not rounded • rounded corners (default) • round corners

Example value: rounded corners (default)

Path to the configuration: Tab "Shopping Experiences" => Block "Image slider (Category "Images")" => Section "Arrow navigation (Individual styling)"

Technical name: twt-image-slider-controls-corner-type

rounded corners Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")

round corners Uses a predefined radius for round corners.


Hover effect

Field type: Select

Available values: • no effect (default) • fade in

Example value: fade in

Path to the configuration: Tab "Shopping Experiences" => Block "Image slider (Category "Images")" => Section "Arrow navigation (Individual styling)"

Technical name: twt-image-slider-controls-hover-type


Text colour

Field type: Color picker

Example value: $sw-color-brand-primary

Path to the configuration: Tab "Shopping Experiences" => Block "Image slider (Category "Images")" => Section "Arrow navigation (Individual styling)"

Technical name: twt-image-slider-controls-color


Border colour

Field type: Color picker

Example value: transparent

Path to the configuration: Tab "Shopping Experiences" => Block "Image slider (Category "Images")" => Section "Arrow navigation (Individual styling)"

Technical name: twt-image-slider-controls-border-color


Background colour

Field type: Color picker

Example value: transparent

Path to the configuration: Tab "Shopping Experiences" => Block "Image slider (Category "Images")" => Section "Arrow navigation (Individual styling)"

Technical name: twt-image-slider-controls-background-color


Text colour @hover

Field type: Color picker

Example value: $sw-color-brand-secondary

Path to the configuration: Tab "Shopping Experiences" => Block "Image slider (Category "Images")" => Section "Arrow navigation (Individual styling)"

Technical name: twt-image-slider-controls-color-hover


Border colour @hover

Field type: Color picker

Example value: darken($twt-image-slider-controls-border-color, 10%)

Path to the configuration: Tab "Shopping Experiences" => Block "Image slider (Category "Images")" => Section "Arrow navigation (Individual styling)"

Technical name: twt-image-slider-controls-border-color-hover


Background colour @hover

Field type: Color picker

Example value: darken($twt-image-slider-controls-background-color, 7.5%)

Path to the configuration: Tab "Shopping Experiences" => Block "Image slider (Category "Images")" => Section "Arrow navigation (Individual styling)"

Technical name: twt-image-slider-controls-background-color-hover

Dots navigation (Individual styling)


Horizontal alignment

Field type: Select

Available values: • align left • align right • align center (default)

Example value: align center (default)

Path to the configuration: Tab "Shopping Experiences" => Block "Image slider (Category "Images")" => Section "Dots navigation (Individual styling)"

Technical name: twt-image-slider-navigation-dots-alignment

Last updated

Logo

© 2024 by ThemeWare® | Made with 💙 by TC-Innovations GmbH