> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/shella-shopify-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/shella-shopify-theme/theme-settings/animations.md).

# 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:

![](/files/k3wLw6VSbIGSAKha9H2h)

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

![](/files/-MgLanACgn81sH7_xFYb)

### **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.

![](/files/-MgLasM4TWaNiY1-3-JF)

### **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 %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://mpithemes.gitbook.io/shella-shopify-theme/theme-settings/animations.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.