Animation Effects

Overview

The Animation Effects add-on shows animated Add to cart, Add to wish list, Add to comparison list, and Quick view buttons over the product image on the products list page. These buttons appear when the customer hovers the mouse pointer over the product image. The buttons are clickable and perform the appropriate actions.

It makes your website dynamic and provides an interesting experience for your customers.

Here’s a quick look.

Animation effects on products in CS-Cart

The Quick view button will also appear over product images in product blocks.

Animation effects for CS-Cart

Simply install the add-on and animation effects will be applied automatically.

Compatibility

The add-on is compatible with CS-Cart and Multi-Vendor 4.10 and above, but only versions 4.12.x and above are supported. Minimum required PHP version is 5.6.

See more information about compatibility of our add-ons here.

Support

You are guaranteed a quality add-on supported by the future versions. If you need help, please contact us via our help desk system.

Demo

Check out the Animation Effects add-on in our demo store.

Note

Every half an hour the demo store is reset to the default state.

Managing in the admin panel

Installing the add-on

Install the Animation effects add-on on the add-ons list page (“Add-ons” → ”Manage add-ons”). Click the + button in the top right corner, select an archive and click Upload & install. You can now find the installed add-on in the list of installed add-ons, just make sure it is set to Active.

After you install the add-on, open the storefront and check to make sure you have all the new animation tweaks applied.

Setting up the add-on

Once the add-on is installed, the following settings will be available:

  • Product Features - animation settings for product features section

    • Hide Features block - if selected, the Features block will be displayed on hover and hidden when inactive. Please note that this functionality works only if “Enable quick view” is turned on at “Settings: Appearance” page;
    • Product features text color - select the color for text in product feature section;
    • Product features background color - select the background color for product feature section;
    • Product features font size (pixels) - select the font size fot the text in product feature section.
  • Quick view button - animation settings for quick view button

    • Hide quick view block - if selected, the Quick View button will be displayed on hover and hidden when inactive. Please note that this functionality works only if the addon “Product Variations” is active;
    • Quick view text color - select the color for text in Quick View button;
    • Quick view background color - select the background color for Quick View button;
    • Quick view font size (pixels) - select the font size fot the text in product feature section.
  • Buttons below - animation settings for the buttons of the store

    • Hide add to cart button - if enabled, Add To Cart button will be available on hover only;
    • Hide call request button - if enabled, Call Request button will be available on hover only. Please note that this functionality works only if the addon “Call requests” is turned on;
    • Hide wishlist button - if enabled, Wishlist button will be available on hover only. Please note that this functionality works only if the addon “Wish list” is turned on;
    • Hide compare button - if enabled, Compare button will be available on hover only. Please note that this functionality works only if “Allow customers to compare products” is turned on at “Settings: General” page;
    • Icons main color - select the main color of the icons;
    • Icons background color - select the background color of the icons;
    • Icons size (pixels) - select the of the icons.
  • Animation settings - settings of animation effects

    • Animation duration (miliseconds) - set the time for duration of animation effects;
    • Animation function - set the type of animation.

Note

If you want to display all available buttons in a product block, clear the Hide add to cart button box.

Here’s a view.

Enjoy!