Product Image Effects Documentation

A) Installationtop


  1. Download the add-on
  2. Go to Admin panel > Add-ons > Manage Add-ons
  3. Click on [+] to open upload modal window
  4. Please choose whatever is comfortable to you:
    Local: zip archive is saved on your computer
    Server: zip archive is uploaded on your server
    URL: you have a direct link to the zip archive
  5. After you selected the zip archive corresponding to your current version of CS-Cart please click Upload & install


  1. Open add-on settings page Admin panel > Add-ons > Manage Add-ons >
    [TH] Product Image Effects
  2. In Activation tab insert License key
  3. Save the settings and go back to Manage Add-ons page
  4. In same line with the name of the add-on, click Active
  5. Clear cache, choose Administration > Storage > Clear cache

Make sure that the add-on status is Active

That’s all, the add-on is installed

B) Usagetop

After installation and activation add-on begins to work immediately

It is important to understand that the add-on is designed to work with standard Responsive theme and theme based on it. For all others custom themes contact us

The images that are displayed in product block is the main image of the product and the first of the additional images

C) Settingstop

To change add-on settings: Go to Admin panel > Add-ons > Manage Add-ons
Press [gear] and choose Global Settings

  1. Effects – choose one of the effects that will be applied to all product previews. An example of the effects can be found here
  2. Images – there are two display options
    • two_image – two successive images
    • only_one_image – one static image without effect
  3. Speed – animation speed. Set in milliseconds
  4. Hover – choose when trigger the effect
    • Parent – product card
    • Image – product image
  5. Show in mobile – turn on add-on effects for mobile devices. The screen resolution is less than 767px. (Default: Off)
  6. Global Scope – for these areas it’s possible to disable the add-on
    • Grid
    • List without options
    • Compact list
    • Template Products
    • Template Links thumb
    • Template Scroller
    • Template Small items
    • Detail page

Just select the animation in blocks and individually for the product

The priority of the display goes from Global Scope to Product > Block and lower priority Global Settings

D) Change the effect on the blocktop

  1. To change effect for specific block: Go to Admin panel > Design > Layouts
  2. Choose location of this block
  3. Press [gear] to open modal window with block options
  4. Press Settings
  5. Select animation in the drop-down list Effect for Two image
  6. Press Save to save changes

E) Change the effect on the Producttop

  1. To change effect for specific block: Go to Admin panel > Products > Products
  2. Choose Products in list
  3. Press tab Add-ons
  4. Select animation in the drop-down list Effect for Two image
  5. Press Save to save changes

F) CSS Structuretop

After installing the add-on style files are located in design/themes/[theme_name]/css/addons/ath_prod_image_effects/. All files in the format .less (Read more about this format here)

  • styles.less – main file, where the basic add-on styles
  • mixins.less – additional mixins and functions used in other files
  • In the effects folder located effects files

Change styles

Style files add-on should not be changed, this can lead to incorrect work of the add-on. If there was a need to redefine or add styles, please use Theme editor for this

  1. Go to Design > Themes
  2. Press Visual Editor in front of the currently active layout
  3. In the new tab, you will see your shop with Theme editor panel
  4. In CUSTOMIZE selector choose Custom CSS
  5. In textarea your can add your styles
  6. After editing save your changes by pressing Save and press [X] to close editor

G) Templatestop

After installing the add-on templates are located in design/themes/[theme_name]/templates/addons/ath_prod_image_effects/


  • image_effects.tpl – display product images with different effects according to add-on settings


  • index/
    • – includes style files and initializes some .less variables
  • products/
    • product_block_image.override.tpl
    • product_scroller_list.override.tpl
    • product_icon.override.tpl

    Files above are used hooks to change method of displaying images
    For example: hook products:product_block_image code


changed on

  • product_compact_list.override.tpl
  • product_small_item.override.tpl
  • product_thumbnail_list.override.tpl
  • image_wrap.override.tpl

Files above are used hooks to change place where images are displayed
For example: hook products:product_compact_list code

<div class="ty-compact-list__image">
          <a href="{"products.view?product_id=`$product.product_id`"|fn_url}">
              {include file="common/image.tpl"
          {assign var="discount_label" value="discount_label_`$obj_prefix``$obj_id`"}
          {$smarty.capture.$discount_label nofilter}

changed on

<div class="ty-compact-list__image">

    {hook name="products:product_compact_list__image"}
    <a href="{"products.view?product_id=`$product.product_id`"|fn_url}">
        {include file="common/image.tpl"

    {assign var="discount_label" value="discount_label_`$obj_prefix``$obj_id`"}
    {$smarty.capture.$discount_label nofilter}

If necessary, all above files can be edited to better suit your theme. The main thing don’t break logic.

    The following files are used hooks to the change the image output file to image_effects.tpl

  • product_compact_list__image.override.tpl
  • product_small_item__image.override.tpl
  • product_thumbnail_list__image.override.tpl

H) Other filestop

App folder

In this folder are located add-on settings and the basic logic

app/addons/ath_prod_image_effects/addon.xml – main file for all add-ons. Here are the parameters and settings of the add-on. File Format Scheme 3.0 CS-Cart

app/addons/ath_prod_image_effects/schemas/block_manager/ – adds option for additional images

For example this block of code is connecting additional product images for scroller products when selecting the appropriate settings

if ( $addons['ath_prod_image_effects']['blocks_products_scroller_tpl'] == 'Y' ) {
                   ['fn_gather_additional_products_data']['params']['get_additional'] = true;

Language files

Language packs are located at var/langs. The values are taken from there when you install the add-on
To add new values or change the current: Go to Admin panel > Administration > Languages > Translations

I) Sources and Creditstop

I’ve used the following images, icons or other files as listed.

Add-on Updatetop

Starting from version 2.16, updates are installed through the Upgrade center

Administration > Upgrade center

To upgrade to 2.16, follow these steps:

  • make a full backup of the store
  • close the store
  • install the add-on over the old version without removing the previous one
  • clear the cache
  • if necessary, make changes that can be erased during the upgrade if you changed the add-on files directly
  • check that everything is successfully updated
  • open the store

To update language variables and add-on settings:

  • Go to developer mode
  • For this file local_conf.php add define(‘DEVELOPMENT’, true);
    If you do not have a file, create one.
  • Clear the cache
  • On the add-ons page in the drop-down list next to the add-on select “Update”
  • Return to normal store mode


2.18 (10 Dec 2023)
Updated the license system
Small fixes

2.17 (29 Oct 2021)
Improved Untheme2 compatibility
Fixes in styles
Icon updated

2.16 (10 Mar 2021)
Integrated the update system through the Upgrade center

2.15 (07 Dec 2020)
Updated the add-on for compatibility with CS-Cart 4.12.1
You need to reinstall the add-on

2.14 (16 Apr 2020)
Fixes for UniTheme2

2.13 (20 Feb 2020)
Fixing labels (free shipping)
Fixes for ThinTheme
Updated the license system
Updated language variables

2.12 (18 Jul 2019)
Fix labels for 4.10.x
Add support UniTheme2						
5% Discount
No prize
Next time
10% Discount
15% Discount
No Prize
No luck today
50% Discount
No prize
Get your chance to win a price!
Enter your email address and spin the wheel. This is your chance to win amazing discounts!
Our in-house rules:
  • One game per user
  • Cheaters will be disqualified.