Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
This section contains configuration fields for the HC-Architecture® of ThemeWare®.
Due to our years of experience as a market-leading theme developer, we have gathered an extremely large amount of knowledge in the subject of themes for Shopware. Among other things, this is reflected in the ThemeWare® HC-Architecture®.
Huge plugin vendors also check ThemeWare®, the most popular purchase theme in the Shopware Store, for compatibility. Unfortunately, a couple of extensions (plugins or apps) focus on the default theme from Shopware. In case of incompatibility, you can solve problems yourself with just a few clicks by simply disabling the respective area in ThemeWare® and thereby resetting it to the Shopware defaults. In this case, you will no longer benefit from the corresponding feature of ThemeWare®, but you can use the corresponding extension (plugin or app).
This section contains configuration fields for "experts". You can add custom code here.
As custom code can cause considerable issues, we have purposely named this block "Expert settings". You should only use these configurations if you are absolutely sure of what you are doing!
Note: The "Expert settings" are "individual customisations". As part of the plugin support, we cannot provide support here, or only to a very limited extent.
Attention: Please note that custom code can cause considerable issues or potentially dangerous vulnerabilities!
Field type: Select
Available values: • no • yes
Example value:
no
Path to the configuration: Tab "Others" => Block "Deprecated"
Technical name:
twt-custom-css
Store individual CSS code in the snippet twt.custom.css.
These CSS code is loaded directly in the head area and has to be minimized with a CSS minifier tool.
Example: h1{font-size:50px}.my-class{color:#777}
Field type: Select
Available values: • no • yes
Example value:
no
Path to the configuration: Tab "Others" => Block "Deprecated"
Technical name:
twt-custom-css-deprecated-classes
This section contains "deprecated" configuration fields that are no longer needed and will be removed with a future update.
There are various reasons why configuration fields are being removed. Sometimes configuration fields are revised or changed in the course of daily development, are no longer necessary or have been replaced by other configuration fields.
So that the fields do not simply disappear, we save them in this section of the theme configuration. This makes a migration easier, if necessary, because you can see the old "values" even after an update. Notes about changes can be found in the "News and announcements" area of our Service Portal.
After a certain time, we then remove such configuration fields completely.
Adds some deprecated CSS classes for manual use in Shopping Experiences.
These classes will be removed soon. You can find the current classes in the documentation.
Example: twt-custom-cms-col-padding-0 or twt-custom-cms-headline-bath
In this section you will find brand new configuration fields. Some of the new features you get with the regular updates are quite complex. In rare cases a feature is not yet fully tested but basically working. We may release such features as a beta feature and invite you to try it out.
Note: Thanks to the ThemeWare® HC-Architecture®, beta features do not interfere with your shop because you can always choose whether to activate a feature or not.
This section contains configuration fields that go beyond the usual theme configuration. With these configurations you can exclude CSS code from unused classes, extensions or CMS blocks/elements to reduce the CSS code of the storefront.
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Expert settings"
Technical name:
twt-expert-mode
This configuration enables/disables the "Expert mode". Deactivate the "Expert mode" to be able to avoid errors.
Field type: Text field
Example value: ``
Path to the configuration: Tab "Others" => Block "Expert settings" => Section "Individual CSS class"
Technical name:
twt-body-class
{% hint style="info" %} Adds one or more CSS classes to the HTML body. Separate multiple classes with spaces.
Example: my-shop {% endhint %}
Field type: Teat area
Example value: ``
Path to the configuration: Tab "Others" => Block "Expert settings" => Section "Individual code"
Technical name:
twt-custom-css-code
Field type: Teat area
Example value: ``
Path to the configuration: Tab "Others" => Block "Expert settings" => Section "Individual code"
Technical name:
twt-custom-html-code
{% hint style="info" %} Individual HTML code in the <head> area to add <meta> or <style> tags, for example. Ideally, you should add HTML code via a template customisation.
Caution: This configuration can lead to errors if you enter a wrong value! Only use this if you are absolutely sure. {% endhint %}
Field type: Teat area
Example value: ``
Path to the configuration: Tab "Others" => Block "Expert settings" => Section "Individual code"
Technical name:
twt-custom-js-code
Field type: Select
Available values: • no • yes
Example value:
no
Path to the configuration: Tab "Others" => Block "Expert settings" => Section "CSS file"
Technical name:
twt-additional-css-file-load
Field type: URL
Example value:
demo.url/styles.css
Path to the configuration: Tab "Others" => Block "Expert settings" => Section "CSS file"
Technical name:
twt-additional-css-file
Field type: Select
Available values: • no • yes
Example value:
no
Path to the configuration: Tab "Others" => Block "Expert settings" => Section "JavaScript file "
Technical name:
twt-additional-js-file-load
Field type: URL
Example value:
demo.url/script.js
Path to the configuration: Tab "Others" => Block "Expert settings" => Section "JavaScript file "
Technical name:
twt-additional-js-file
Field type: Select
Available values: • no • yes
Example value:
no
Path to the configuration: Tab "Others" => Block "Expert settings" => Section "JavaScript file "
Technical name:
twt-additional-js-file-async
Field type: Select
Available values: • no • yes
Example value:
no
Path to the configuration: Tab "Others" => Block "Beta"
Technical name:
twt-quickview-show
Field type
Field type: Select
Available values: • no (inherited) • yes (overwrite)
Example value:
yes (overwrite)
Path to the configuration: Tab "Others" => Block "Accessibility" => Section "Layout"
Technical name:
twt-accessibility-underline-links
These CSS code is loaded directly in the head area and should be minimized with a CSS minifier tool. Ideally, you should add CSS code via a SCSS file, e.g. with a customising plugin.
Caution: This configuration can lead to errors if you enter a wrong value! Only use this if you are absolutely sure.
Add individual JavaScript code to the end of the HTML page. Enter the complete <script> tag here. Ideally, you should add JavaScript code via a JS file, e.g. with a customising plugin.
Caution: This configuration can lead to errors if you enter a wrong value! Only use this if you are absolutely sure.
Herewith you can load your own CSS file (e.g. FontAwesome) from your server.
Note: Access to external files is not recommended, be aware of Cross-Origin Resource Sharing for this.
Herewith you can load your own JS file from your server.
Please note that the file is not integrated into the cookie manager.
Note: Access to external files is not recommended, be aware of Cross-Origin Resource Sharing for this.
Available values: • no • yes
Example value:
no
Path to the configuration: Tab "Others" => Block "Beta"
Technical name:
twt-product-box-quantity-selection-show
Field type: Select
Available values: • no shadow (default) • Small shadow (Bootstrap) • Regular shadow (Bootstrap) • Larger shadow (Bootstrap)
Example value:
no shadow (default)
Path to the configuration: Tab "Others" => Block "Beta" => Section "Dropdown top navigation"
Technical name:
twt-nav-main-dropdown-box-shadow-type
Field type: Select
Available values: • no • yes
Example value:
no
Path to the configuration: Tab "Others" => Block "Beta" => Section "Top navigation flyout"
Technical name:
twt-nav-main-external-links-icon-show
Field type: Select
Available values: • no • yes
Example value:
no
Path to the configuration: Tab "Others" => Block "Beta" => Section "Product box"
Technical name:
twt-product-image-resizing
Field type: Select
Available values: • Phone (portrait) (<576px) • Phone (landscape) (<768px) • Tablet (portrait) (<992px) • Tablet (landscape) (<1200px) • Desktop (<1440px) • all viewports
Example value:
Phone (portrait) (<576px)
Path to the configuration: Tab "Others" => Block "Beta" => Section "Product box"
Technical name:
twt-product-image-resizing-breakpoint
Field type: Select
Available values: • no • yes
Example value:
no
Path to the configuration: Tab "Others" => Block "Beta" => Section "Product box"
Technical name:
twt-product-box-sold
Field type: Select
Available values: • reduce opacity • greyscale • greyscale + reduce opacity
Example value:
reduce opacity
Path to the configuration: Tab "Others" => Block "Beta" => Section "Product box"
Technical name:
twt-product-box-sold-style
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Beta" => Section "Product box"
Technical name:
twt-product-box-image-srcset-and-sizes
Activates a "Quickview" feature in product boxes.
Beta: This feature may change in an upcoming update, but feel free to test it and send us your feedback.
Activates a quantity selection in product boxes.
Beta: This feature may change in an upcoming update, but feel free to test it and send us your feedback.
Adds a drop shadow to the submenus.
Beta: This feature may change in an upcoming update, but feel free to test it and send us your feedback.
Beta: This feature may change in an upcoming update, but feel free to test it and send us your feedback.
Activate an improved resizing of product images in 1-column listings in mobile viewports.
Note: This configuration applies to the "Compact product boxes" function.
Beta: This feature may change in an upcoming update, but feel free to test it and send us your feedback.
Select the viewport up to which the improved resizing of product images should be applied.
Note: The "Product image resizing" is designed for 1-column listings in mobile viewports, but you can also use it in higher viewports. In this case we strongly recommend using a consistent image size for all product images.
Use this configuration to weaken products after clearance.
Products after clearance can also be completely hidden in the Shopware settings ("Settings" > "Shop" > "Products" > "Hide products after clearance").
Beta: This feature may change in an upcoming update, but feel free to test it and send us your feedback.
This configuration relates to the configuration "Weaken products after clearance".
Beta: This feature may change in an upcoming update, but feel free to test it and send us your feedback.
Use this configuration to optimise the image srcset and sizes according to the number of columns in the listing.
Beta: This feature may change in an upcoming update, but feel free to test it and send us your feedback.
Example value:
#000000
Path to the configuration: Tab "Others" => Block "Accessibility" => Section "Layout"
Technical name:
twt-skip-target-link-color
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Others" => Block "Accessibility" => Section "Forms"
Technical name:
twt-forms-input-btn-focus-color
Field type: Color picker
Example value:
#333333
Path to the configuration: Tab "Others" => Block "Accessibility" => Section "'Skip to Content' bar"
Technical name:
twt-skip-to-content-color
Field type: Color picker
Example value:
#eeeeee
Path to the configuration: Tab "Others" => Block "Accessibility" => Section "'Skip to Content' bar"
Technical name:
twt-skip-to-content-background-color
Field type: Select
Available values: • no • yes
Example value:
no
Path to the configuration: Tab "Others" => Block "Accessibility" => Section "ThemeWare® 'Hero slider' [Pro Edition]"
Technical name:
twt-cms-hero-slider-autoplay
To improve accessibility, certain links in the storefront can be underlined (e.g. in the footer navigation, breadcrumb, etc.).
inherited: The individual configuration of links is not overwritten by this configuration.
overwrite: The individual configuration of selected links is overwritten so that these links are underlined regardless of their configuration.
To improve accessibility, some CMS elements have a hidden "Skip element" link. You can adjust the text colour via this configuration.
To improve accessibility, some focused form fields have a box shadow. You can adjust the colour via this configuration.
Accessibility concerns: Enabling this feature may make parts of your storefront inaccessible to users with disabilities. This may result in non-compliance with accessibility laws applicable in your jurisdiction (e.g., the European Accessibility Act). By activating this configuration, you acknowledge this risk and accept full responsibility.
Field type: Select
Available values: • default • ThemeWare®
Example value:
ThemeWare®
Path to the configuration: Tab "Others" => Block "Compatibility (HC-Architecture®)" => Section "Header"
Technical name:
twt-header-type-compatibility
In progress! (does not work yet)
Resets the header to its default. This enables maximum compatibility with third-party plug-ins.
Please note that this overrides the corresponding ThemeWare® configuration.
Field type: Select
Available values: • default • ThemeWare®
Example value:
ThemeWare®
Path to the configuration: Tab "Others" => Block "Compatibility (HC-Architecture®)" => Section "Header"
Technical name:
twt-header-account-btn-compatibility
Field type: Select
Available values: • default • ThemeWare®
Example value:
ThemeWare®
Path to the configuration: Tab "Others" => Block "Compatibility (HC-Architecture®)" => Section "Header"
Technical name:
twt-header-cart-btn-compatibility
Field type: Select
Available values: • default • ThemeWare®
Example value:
ThemeWare®
Path to the configuration: Tab "Others" => Block "Compatibility (HC-Architecture®)" => Section "Header"
Technical name:
twt-header-wishlist-btn-compatibility
Field type: Select
Available values: • default • ThemeWare®
Example value:
ThemeWare®
Path to the configuration: Tab "Others" => Block "Compatibility (HC-Architecture®)" => Section "Header"
Technical name:
twt-nav-main-home-link-compatibility
Field type: Select
Available values: • default • ThemeWare®
Example value:
ThemeWare®
Path to the configuration: Tab "Others" => Block "Compatibility (HC-Architecture®)" => Section "Header"
Technical name:
twt-nav-main-menu-items-compatibility
Field type: Select
Available values: • default • ThemeWare®
Example value:
ThemeWare®
Path to the configuration: Tab "Others" => Block "Compatibility (HC-Architecture®)" => Section "Header"
Technical name:
twt-top-bar-compatibility
Field type: Select
Available values: • default • ThemeWare®
Example value:
ThemeWare®
Path to the configuration: Tab "Others" => Block "Compatibility (HC-Architecture®)" => Section "Content"
Technical name:
twt-product-badges-discount-badge-compatibility
Field type: Select
Available values: • default • ThemeWare®
Example value:
ThemeWare®
Path to the configuration: Tab "Others" => Block "Compatibility (HC-Architecture®)" => Section "Content"
Technical name:
twt-product-badges-topseller-badge-compatibility
Field type: Select
Available values: • default • ThemeWare®
Example value:
ThemeWare®
Path to the configuration: Tab "Others" => Block "Compatibility (HC-Architecture®)" => Section "Content"
Technical name:
twt-product-badges-new-badge-compatibility
Field type: Select
Available values: • default • ThemeWare®
Example value:
ThemeWare®
Path to the configuration: Tab "Others" => Block "Compatibility (HC-Architecture®)" => Section "Content"
Technical name:
twt-breadcrumb-compatibility
Field type: Select
Available values: • default • ThemeWare®
Example value:
ThemeWare®
Path to the configuration: Tab "Others" => Block "Compatibility (HC-Architecture®)" => Section "Product box"
Technical name:
twt-product-box-image-compatibility
Field type: Select
Available values: • default • ThemeWare®
Example value:
ThemeWare®
Path to the configuration: Tab "Others" => Block "Compatibility (HC-Architecture®)" => Section "Product page"
Technical name:
twt-product-detail-buy-widget-compatibility
Field type: Select
Available values: • default • ThemeWare®
Example value:
ThemeWare®
Path to the configuration: Tab "Others" => Block "Compatibility (HC-Architecture®)" => Section "Product page"
Technical name:
twt-product-detail-reviews-tab-compatibility
Field type: Select
Available values: • default • ThemeWare®
Example value:
ThemeWare®
Path to the configuration: Tab "Others" => Block "Compatibility (HC-Architecture®)" => Section "Footer"
Technical name:
twt-footer-type-compatibility
Field type: Select
Available values: • default • ThemeWare®
Example value:
ThemeWare®
Path to the configuration: Tab "Others" => Block "Compatibility (HC-Architecture®)" => Section "Footer"
Technical name:
twt-footer-logos-compatibility
Resets the account button to its default.
Block: 'layout_header_actions_account_widget_dropdown_button'
Resets the cart button to its default.
Block: 'layout_header_actions_cart_widget'
Resets the wishlist button to its default.
Block: 'layout_header_actions_wishlist_widget'
Resets the home link in the top navigation to its default.
Block: 'layout_main_navigation_menu_home'
Resets the menu items in the top navigation to its default.
Block: 'layout_main_navigation_menu_item'
Resets the 'Top bar' to its default.
Block: 'layout_header_top_bar_inner'
Resets the "Discount badge" to its default.
Block: 'component_product_badges_discount'.
Resets the "Topseller badge" to its default.
Block: 'component_product_badges_topseller'.
Resets the "New badge" to its default.
Block: 'component_product_badges_new'.
Resets the breadcrumb to its default.
Block: 'layout_breadcrumb_list'.
Resets the image in "Produkt boxes" to its default.
Block: 'component_product_box_image'.
Resets the 'Buy widget' to its default.
Block: 'buy_widget_buy_container'.
Resets the "Reviews" tab to its default.
Block: 'element_product_description_reviews_tabs_navigation_review' and 'element_product_description_reviews_tabs_content_review'.
In progress!
Resets the footer to its default. This enables maximum compatibility with third-party plug-ins.
Please note that this overrides the corresponding ThemeWare® configuration.
Resets the logos footer to its default.
Block: 'layout_footer_payment_shipping_logos'
Please note that Shopware currently doesn't support SVG graphics for payment/shipping methods in the logos footer.
Field type: Select
Available values: • no • yes (32 characters) • yes (7 characters)
Example value:
no
Path to the configuration: Tab "Others" => Block "Advanced settings"
Technical name:
twt-body-class-cms-page-id
Adds a CSS class with the ID of the current CMS page to the body. The 'unique' ID consists of 32 characters.
Alternatively, the ID can be shortened to 7 characters. The shorter ID is easier to handle in CSS but also somewhat less 'unique'.
Field type: Select
Available values: • no • yes (Bootstrap 4) • yes (Bootstrap 5)
Example value:
yes (Bootstrap 5)
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS classes"
Technical name:
twt-custom-cms-spacing-classes
Field type: Select
Available values: • no • yes
Example value:
no
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS classes"
Technical name:
twt-custom-cms-spacing-classes-more
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS classes"
Technical name:
twt-custom-cms-image-decoration-classes
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS classes"
Technical name:
twt-custom-cms-box-shadow-classes
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS classes"
Technical name:
twt-custom-cms-image-hover-classes
Field type: Select
Available values: • no • yes
Example value:
no
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS classes"
Technical name:
twt-cms-animations-more
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS classes"
Technical name:
twt-custom-cms-column-padding-classes
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS classes"
Technical name:
twt-custom-cms-headline-classes
Field type: Select
Available values: • no • yes
Example value:
no
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS classes"
Technical name:
twt-custom-css-max-width-classes
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS classes for CMS blocks"
Technical name:
twt-cms-block-cloumns-classes
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS classes for CMS blocks"
Technical name:
twt-cms-block-grid-classes
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS code for CMS elements [Pro Edition]"
Technical name:
twt-cms-hero-slider-css
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS code for CMS elements [Pro Edition]"
Technical name:
twt-cms-text-teaser-css
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS code for CMS elements [Pro Edition]"
Technical name:
twt-cms-text-teaser-decorated-css
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS code for CMS elements [Pro Edition]"
Technical name:
twt-cms-button-teaser-css
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS code for CMS elements [Pro Edition]"
Technical name:
twt-cms-call-to-action-css
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS code for CMS elements [Pro Edition]"
Technical name:
twt-cms-hover-box-css
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS code for CMS elements [Pro Edition]"
Technical name:
twt-cms-hover-teaser-css
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS code for CMS elements [Pro Edition]"
Technical name:
twt-cms-image-teaser-css
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS code for CMS elements [Pro Edition]"
Technical name:
twt-cms-hero-teaser-css
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS code for CMS elements [Pro Edition]"
Technical name:
twt-cms-advanced-teaser-css
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS code for CMS elements [Pro Edition]"
Technical name:
twt-cms-classic-teaser-css
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS code for CMS elements [Pro Edition]"
Technical name:
twt-cms-modern-teaser-css
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS code for CMS elements [Pro Edition]"
Technical name:
twt-cms-round-teaser-css
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS code for CMS elements [Pro Edition]"
Technical name:
twt-cms-image-banner-css
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS code for CMS elements [Pro Edition]"
Technical name:
twt-cms-parallax-banner-css
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS code for CMS elements [Pro Edition]"
Technical name:
twt-cms-hero-banner-css
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS code for CMS elements [Pro Edition]"
Technical name:
twt-cms-advanced-banner-css
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS code for CMS elements [Pro Edition]"
Technical name:
twt-cms-image-text-layered-css
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS code for CMS elements [Pro Edition]"
Technical name:
twt-cms-listing-subcategories-css
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS code for CMS elements [Pro Edition]"
Technical name:
twt-cms-countdown-banner-css
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS code for CMS elements [Pro Edition]"
Technical name:
twt-cms-discount-banner-css
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS code for CMS elements [Pro Edition]"
Technical name:
twt-cms-testimonials-css
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "jQuery"
Technical name:
twt-jquery-load
Adds CSS spacing classes for manual use in Shopping Experiences.
Examples: twt-mt-n2 = margin-top: -20px
twt-p-4 = padding: 40px
Bootstrap 4: ml = margin-left
Bootstrap 5: ms = margin-left
Adds viewport dependent CSS spacing classes for manual use in Shopping Experiences.
Examples: twt-mt-md-n2 = margin-top: -20px (≥768px)
twt-p-lg-4 = padding: 40px (≥992px)
Adds CSS image decoration classes for manual use in Shopping Experiences.
Apply to a CMS block to modify its images.
Example: twt-cms-image-border-solid
Adds CSS box shadow classes for manual use in Shopping Experiences.
Apply to a CMS block to modify it.
Example: twt-cms-box-shadow-level-1
Adds CSS image hover classes for manual use in Shopping Experiences.
Apply to a CMS block to modify its images.
Example: twt-cms-image-hover-opacity
Adds CSS classes for animations and manual use in Shopping Experiences.
Adds CSS column spacing classes (padding-left/-right, margin-bottom) for manual use in Shopping Experiences.
Apply to a CMS block to modify its columns.
Example: twt-cms-col-padding-5 twt-cms-col-margin-10
Adds CSS headline classes for manual use in Shopping Experiences.
Apply to a CMS block to modify its headlines.
Example: twt-cms-headline-bath
Adds CSS "max-width" classes for manual use in Shopping Experiences.
Apply to a CMS block to modify its headlines.
Example: twt-mw-900
Adds CSS code for ThemeWare® "Columns" CMS blocks to your Shopping Experiences.
You can disable this configuration if you doesn't use ThemeWare® "Columns" CMS blocks.
Adds CSS code for ThemeWare® "Grids" CMS blocks to your Shopping Experiences.
You can disable this configuration if you don't use the "Grid" CMS blocks.
Adds CSS code of the ThemeWare® "Hero slider" to your Shopping Experiences.
You can disable this configuration if you don't use the "Hero slider".
Adds CSS code of the ThemeWare® "Text teaser" to your Shopping Experiences.
You can disable this configuration if you don't use the "Text teaser".
Adds CSS code of the ThemeWare® "Text teaser (decorated)" to your Shopping Experiences.
You can disable this configuration if you don't use the "Text teaser (decorated)".
Adds CSS code of the ThemeWare® "Button teaser" to your Shopping Experiences.
You can disable this configuration if you don't use the "Button teaser".
Adds CSS code of the ThemeWare® "Call-to-Action" to your Shopping Experiences.
You can disable this configuration if you don't use the "Call-to-Action".
Adds CSS code of the ThemeWare® "Hover box" to your Shopping Experiences.
You can disable this configuration if you don't use the "Hover box".
Adds CSS code of the ThemeWare® "Hover teaser" to your Shopping Experiences.
You can disable this configuration if you don't use the "Hover teaser".
Adds CSS code of the ThemeWare® "Image teaser" to your Shopping Experiences.
You can disable this configuration if you don't use the "Image teaser".
Adds CSS code of the ThemeWare® "Hero teaser" to your Shopping Experiences.
You can disable this configuration if you don't use the "Hero teaser".
Adds CSS code of the ThemeWare® "Advanced teaser" to your Shopping Experiences.
You can disable this configuration if you don't use the "Advanced teaser".
Adds CSS code of the ThemeWare® "Classic teaser" to your Shopping Experiences.
You can disable this configuration if you don't use the "Classic teaser".
Adds CSS code of the ThemeWare® "Modern teaser" to your Shopping Experiences.
You can disable this configuration if you don't use the "Modern teaser".
Adds CSS code of the ThemeWare® "Round teaser" to your Shopping Experiences.
You can disable this configuration if you don't use the "Round teaser".
Adds CSS code of the ThemeWare® "Image banner" to your Shopping Experiences.
You can disable this configuration if you don't use the "Image banner".
Adds CSS code of the ThemeWare® "Parallax banner" to your Shopping Experiences.
You can disable this configuration if you don't use the "Parallax banner".
Adds CSS code of the ThemeWare® "Hero banner" to your Shopping Experiences.
You can disable this configuration if you don't use the "Hero banner".
Adds CSS code of the ThemeWare® "Advanced banner" to your Shopping Experiences.
You can disable this configuration if you don't use the "Advanced banner".
Adds CSS code of the ThemeWare® "Image & text layered" element to your Shopping Experiences.
You can disable this configuration if you doesn't use the "Image & text layered" element.
Adds CSS code of the ThemeWare® "Listing subcategories" to your Shopping Experiences.
You can disable this configuration if you don't use the "Listing subcategories".
Adds CSS code of the ThemeWare® "Countdown banner" to your Shopping Experiences.
You can disable this configuration if you don't use the "Countdown banner".
Adds CSS code of the ThemeWare® "Discount banner" to your Shopping Experiences.
You can disable this configuration if you don't use the "Discount banner".
Adds CSS code of the ThemeWare® "Testimonial" elements to your Shopping Experiences.
You can disable this configuration if you are not using these elements.
Note: Required for the "Sticky top navigation" or the "Shopping Experiences Header".