Shella Shopify Theme
  • User Manual
  • Shopify help
  • Get Started
    • How to create a new Template
    • How to add and edit a Page
    • How to build Metaobjects
    • How to find a handle
    • Filters logic
    • Pre-Order
  • Product variants
  • Header
    • Theme Blocks
  • Footer
    • Theme Blocks
  • Metafields
    • How to create custom filters
  • Theme Sections
    • Builder
      • Promo box (Banner)
      • Slick Slider
      • Revolution Slider
      • Instagram
      • Product column
      • Custom HTML
      • Space for vertical menu
    • Spacer
    • Article carousel
    • Brand carousel
    • Product carousel
    • Review carousel
    • Contact form
    • FAQs
    • Gallery
    • Information line
    • Search form
    • Subscription form
    • Brands
    • Collections
    • Lookbook
    • One product
    • Collection page heading
      • Theme Blocks
    • Collection banner builder
      • Theme Blocks
    • Ticker
  • Products
    • Product page
      • Theme blocks
    • Related product carousel
    • Usage information sidebar
  • Collections
    • Product grid
      • Current filters
      • Collections
      • Filters
      • Filter settings
      • Tags
      • Products
      • Custom HTML
      • Subscription
      • Promo box (Banner)
  • Collections list
  • Page categories
    • Policy page
    • Lookbook
      • Page
    • Gallery
      • Page
    • FAQs
      • Page
    • Contact
      • Page
    • Brands
      • Page
    • Password
      • Social media
    • Search
      • Current filters
      • Filters
      • Filter settings
      • Products
      • Custom HTML
      • Subscription
      • Promo box (Banner)
    • Quick view
  • Blogs
    • Theme Blocks
  • Blog posts
    • Theme Blocks
  • Theme settings
    • Quick Start
    • License
    • Logo and Favicon
    • Layout
    • Colors
    • Typography
    • Collection and Search page
    • Product -> General
    • Product -> Variants
    • Product -> Collection Page
    • Product Page and Quick View
    • Search
    • Currency
    • Cart
    • Wishlist and Compare
    • Payments
    • Social Media
    • News Subscription
    • Blog and Article Pages
    • Account
    • Reviews
    • Services
    • Apps and Language
    • Button, Input and Promo Box
    • Notifications
    • Pre-loader
    • Animations
    • Developer
    • Custom CSS
  • Theme features
  • Back to Help Center
Powered by GitBook
On this page
  • Popup
  • Promo box
  • Promo box effects (sec)
  • Tooltips
  • Enable tooltips on whole store
  • Animation style
  • Header
  • Sticky header opacity
  • Header tape slide duration (sec)
  • Product
  • Animation style for content on product image hover (Collection Page)
  • Buttons animation
  • “Shake” animation

Was this helpful?

  1. Theme settings

Animations

This section allows you to customize some animation elements on the entire store.

PreviousPre-loaderNextDeveloper

Last updated 1 year ago

Was this helpful?

Theme settings -> Animations

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:

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.

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.

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.

Buttons animation

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

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

VIEW DEMO
VIEW DEMO