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.

Right: CSS scroll animation "Fade-in"

Tip: Application examples you will find on the starting pages of our demoshops.

---

ThemeWare® CSS scroll animations

1. Activating animations

1. Open the administration of your shop

2. 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.

3. Open your theme configuration

4. Switch in the Tab "Shopping Experiences" to the Block "All types"

5. In the Section "CSS Scroll Animations" you will find configuration fields for "CMS blocks" and "Headlines in CMS blocks"
6. Choose the desired animation for CMS blocks or the headlines in CMS blocks (optional).

7. Save this change in order to adopt it into the storefront

2. Applying animations

1. Switch via the main navigation to the Shopping Experiences Management ("Contents" => "Shopping Experiences")

2. Edit the desired Shopping Experience

3. Select the desired CMS block you wish to animate

4. Open the section "Layout" in the block settings on the right edge of the screen

5. Add the CSS class twt-cms-animation (several classes are separated by blanks)
6. 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.