# Animations

{% hint style="info" %}
**Theme settings -> Animations**
{% endhint %}

## Popup

 In order to blur the background once the cart/account/wishlist drawer is shown, activate the option **“Enable blur effect for background”**. This option deactivates the loading icon and pre-loader image on collection pages if you use the option Popup & 'Filter' button for a sidebar.

 This is how it may look like while using the blur effect:

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2FxqIROAIjhl8HowHe4606%2Fblur_effect.png?alt=media\&token=7f865833-af35-4530-b681-72e57212edf9)

## Promo box

 Promo boxes are part of a mega menu in the header. You can add or change images in the promo boxes following these steps: in *Shella Editor,* go to *Header -> Content -> Mega -> Promo box.*

### **Promo box effects (sec)**

This option enables you to decide how smooth the animation of the images in the promo boxes should be, using a time scale from 0.0 to 1.0 seconds.

## Tooltips

### Enable tooltips on whole store

 Here you can enable or disable tooltips on all shop pages.

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-MgLZItqEqjPtCk5zd6b%2F-MgLanACgn81sH7_xFYb%2FScreenshot_6.png?alt=media\&token=41cd9a5a-01f7-48b1-b073-4a7813e8629f)

### **Animation style**

The style of the tooltips can also be changed. There are five possible tooltip styles: fade, scale, shift-toward, shift-away, and perspective.

## Header

### **Sticky header opacity**

 Here you can change the sticky header opacity on the opacity scale from 0.5 to 1.0.

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-MgLZItqEqjPtCk5zd6b%2F-MgLasM4TWaNiY1-3-JF%2FScreenshot_7.png?alt=media\&token=cef44a0b-5070-4b69-b337-daa2a32b05ae)

### **Header tape slide duration (sec)**

 Here you can change the tape slide duration on the scale from 0 to 1.0 seconds.

## Product

### **Animation style for content on product image hover** (Collection Page)

 In this section, you can choose an animation style for content (Arrows, Quick View, Labels, Countdown) on product image hover on a collection page. There are six possible styles: toggle, fade, emersion horizontal, emersion vertical, emersion all, and scale.

{% hint style="success" %}
[<mark style="color:blue;">**VIEW DEMO**</mark>](https://shella-demo6.myshopify.com/collections/mens)
{% endhint %}

### **Buttons animation**

&#x20;Here you can enable or disable animation for icons on the 'Add to cart', 'Add to compare', and 'Add to wishlist' buttons hover.

### **“Shake” animation**

&#x20;This option enables swing animation for the “Add to cart” button on the Product Pages.

{% hint style="success" %}
[<mark style="color:blue;">**VIEW DEMO**</mark>](https://shella-demo.myshopify.com/products/jersey-graphic-tee)
{% endhint %}