Embellishing Shopping Experiences with CSS animations
In this tutorial you will learn how to embellish Shopping Experiences with ThemeWare® CSS scroll animations.
ThemeWare® version 0.3.0 and higher provides you with an extensive selection of CSS animations to embellish your Shopping Experience. In the following we will explain how to activate and use the "CSS scroll animations" in 2 steps only.
Tip: Application examples you will find on the starting pages of our demoshops.
ThemeWare® CSS scroll animations
1. Activating animations
Open the administration of your shop
Switch to the Theme Management ("Contents" => "Themes") via the main navigation.) Note: In the Shopware Cloud please find the section "Themes" directly in the main navigation.
Open your theme configuration
Switch in the Tab "Shopping Experiences" to the Block "All types"
Choose the desired animation for CMS blocks or the headlines in CMS blocks (optional).
Save this change in order to adopt it into the storefront
2. Applying animations
Switch via the main navigation to the Shopping Experiences Management ("Contents" => "Shopping Experiences")
Edit the desired Shopping Experience
Select the desired CMS block you wish to animate
Open the section "Layout" in the block settings on the right edge of the screen
Save the Shopping Experience
The corresponding CMS block should now be animated with the desired animation. Repeat "Step 2" for all CMS blocks you wish to animate.
In case the change does not arrive in the storefront, please check whether the theme has been assigned to the appropriate sales channel. When making changes of this kind, be sure to clear the entire Shopware cache and the browser cache.
Note: Do not use the CSS animation in CMS pages that are displayed in pop-ups or modals. There the animations will not work.
Last updated
