Images gallery

Images gallery add-on

Images gallery add-on

The pace of life of a modern person is accelerating, reading long texts gives way to visual perception of information. Image gallery is a great way to visually show the benefits of your product and service, create an effective portfolio and tell clients about past events quickly and beautifully.

Create galleries, group them, add blocks with a gallery scroller or images grid in layouts.



The add-on is compatible with the entire cs-cart 4.x branch with such editions as CS-Cart, CS-Cart Ultimate, Multivendor, Multivendor Plus, Multivendor Ultimate. At the moment there is no information about the complete incompatibility with any theme. If an add-on conflicts with your theme, please contact via our Help Center.

The add-on is incompatible with any other search add-on.

Add-on installation

After success payment, your order will be automatically marked as Paid within a few minutes. Once order changed to Paid status - add-on License activation passed success and you will received an e-mail with confirmation the receipt of payment and a second e-mail with a  download add-on link. You can also download the add-on in our License Management section of our website. To install the add-on on your website, please follow these steps:

  1. Download the latest version of the add-on on our website in the "License Management" section or via the link sent by e-mail.
  2. Go to Add-ons → Manage Add-ons and in the gear button, select Manual Installation.
  3. Select the downloaded file and complete the installation of the add-on.

Add-on installation is completed. To go to the add-on settings page, select the installed add-on in the top menu Add-ons → CS-Commerce add-on

Add-on management

After installing the add-on, you can start creating galleries.

How to create a gallery

  1. In the admin panel, go to the "Website - Pages".
  2. Click on the "+" and select "Add Gallery".
  3. Parent page - the parent page can be a regular page, gallery or form.
  4. Speсify other fields, if necessary.
  5. After creation, you can drag and drop all the desired images in one move or select one at a time in the Image Gallery tab.
  6. After saving, you can change the order of the images and fill in the Alternate text.

Creating a block of galleries

  1. Create Image Gallery block on the desired page in layouts.
  2. In the block settings, select the template:
    • Gallery images grid - images of the gallery specified in the Content tab will be displayed in the block.
    • Gallery scroller - the main images of the selected galleries with links will be displayed in the block.

Upgrade an add-on

In order to have access to add-on upgrades, you must have an active upgrade subscription. If the subscription period has expired, you will only have access to upgrades released before the expiration date of your subscription. You can renew your upgrades subscription in the "License Management" section on our website.

The add-on supports instant upgrades via the CS-Cart Upgrade Center. The built-in CS-Cart Notification Center (bell) will notify you about new versions release of the add-on. Upgrades via Upgrades Center will allow you to switch to a newer version without losing add-on data and settings.

Before start an upgrade process, it is highly recommended to make a full backup of the site (database and files) of your store using the server or hosting methods. 

 Upgrade through the Upgrade Center

  1. In the top menu, go to Administration → Upgrade Center;
  2. In the gear menu, click "Refresh available upgrades"
  3. Find and add-on on list of available upgrades and click the Download button and than Install button;
  4. Follow all the instructions that will be shown during the upgrade process;
  5. It is recommended to clear the CS-Cart templates cache after the upgrades are installed by deleting the var/cache folder on your server or adding the ctpl parameter to the address bar (example:

Addon Reinstallation by uninstall old and install new:

Reinstalling an add-on means deleting the add-on's settings and data. Reinstallation will allow you to get a clean installation of the latest addon version. To reinstall the add-on with saving the add-on settings and data, please contact us via our Support Center to provide this service.

To completely reinstall an add-on without saving data, follow these steps:

  1. Go to Add-ons → Manage add-ons and find the old installed add-on.
  2. Click the delete button in the gear menu of the add-on.
  3. Download the latest version of the add-on on our website in the "License Management" section.
  4. Go to Add-ons → Manage add-ons and in the gear menu select Manual Installation. Select the previously downloaded file and complete the installation of the add-on.

Technical support

The technical support of the add-on is already included in its price. Before contacting the support center, please make sure you are using the latest released version of the add-on. Old versions of the add-on are not supported by technical support.

To use our technical support, follow these steps:

  1. On our support center site, log in with your account;
  2. Click on the "Create ticket" button;
  3. Fill in all the required fields and create ticket (you will receive a confirmation email);
  4. Expect a response from a specialist (a notification will be sent to your e-mail about the response) in accordance with the regulations of the technical support service.

If you have not received an answer within the time frame specified in the regulations, write us a message to the e-mail [email protected] with the subject of the ticket and we will try to resolve your issue as soon as possible.

Technical support via chat on the site, direct phone calls or e-mail letters is not provided. All help discuss goes through the support center. Carefully study the documentation for the add-on and the terms of technical support before creating a ticket. 


Limitations and Warnings

We recommend that you familiarize with the general restrictions:

  1. Fragments of code or some files of an add-on may have a private (encoded) part. The coded part does not create problems on add-on customizations;
  2. The add-on will work only on those domains that are specified in the user's license. If you try to use the solution the domains of which are not included in the license, the add-on will be automatically disabled;
  3. Installing on local machines is not allowed by the licensing system. For the add-on to work on an additional domain (alias), specify this alias on the license management page. Up to three aliases are allowed per domain for testing and development purposes. You can change the main license domain yourself on the license management page.
To have possibility to add or change license domains and aliases, the upgrade subscription must be active. To change the license domain of an expired upgrades subscription, you must first renew your subscription.  


For developers

PHP Hooks

The add-on does not support cs-cart php hooks, therefore, its own connection scheme was developed, which fits into the cs-cart connections.
The add-on has 3 built-in hooks:

  1. hooks_get_products Variables: 
      $ls_settings - array() addon settings
      $company_id -  int() current storefront ID
      $params - array() query data
      $fields - array() fields to display
      $join - string() Join data
      $condition -  string() conditions string
      $sorting - string() sorting
      $limit - string() products limit
  2. hooks_get_joins Variables: 
     $ls_settings - array() addon settings
     $params - array() query data
     $join - string() Join data
  3. hooks_get_conditions Variables: 
     $ls_settings - array() addon settings
     $params - array() query data
     $condition -  string() conditions string
  4. hooks_get_fields Variables: 
     $ls_settings - array() addon settings
     $params - array() query data
     $fields -  array() fields array
  5. hooks_before_response Variables:
    $ls_settings - array() addon settings
    $company_id -  int() current storefront ID
    $params - array() query data
    $response -  array() data to response

Using the built-in add-on my_changes as an example, let's connect to the hooks_get_products hook, which is located before the request to receive products:

  1. Create a file in the add-on's directory app/addons/my_changes/schemas/csc_live_search;
  2. Add  value to the $schema['developers']['hooks_get_products']['variants'] array, the key of which is the directory of the function file. Sample code for the file:
    if (!defined('BOOTSTRAP')) { die('Access denied'); }
    $schema['developers']['hooks_get_products']['variants']['/app/addons/my_changes/fn_file_name_same_as_function_name.php']='My changes hook function';
    return $schema;
  3. Create the appropriate file referred from the file and create one function in it, the name of which is the same as the file name. In our case, this is fn_file_name_same_as_function_name, accept the sent variables and modify to get the necessary search conditions. Example file content:
    if (!defined('BOOTSTRAP')) { die('Access denied'); }
    function fn_file_name_same_as_function_name($ls_settings, $company_id, $params, $fields, $join, &$condition, $sorting, $limit){
  4. Clear the admin panel cache, then go to the settings page of the live search add-on to the developers section and select the hook that you added in the selectbox. Save the settings.

Integration with the hook of the live search add-on is completed.



To have possibility to change product list, or add additional elements on search results popup we have added custom events. You can catch this event and make needed changes. There are two events:

  1. cls.after.insert - is triggered when user types and we insert html into search popup block.
  2. cls.after.append - is triggered when user press show more button and data is appended to search popup block.

How to use: Use $(document).on()) construction to catch event and make needed changes:

$(document).on( "cls.after.insert", function(event, data, elm) {	
$(document).on( "cls.after.append", function(event, data, elm) {	

Where data - is array of all items data, received from request, and elm - is block, where data was inserted.

Example, where we adding product code to end of product name:

$(document).on( "cls.after.insert", function(event, data, elm) {
    if (data.items){
        $.each(data.items, function(i, product){
            $(elm).find('li[pid="' + product.product_id + '"] .clsProduct').append(" " + product.product_code);      



Version 7.2.0 October 21 2021

What's new:

  • Added additional php hooks for developers
  • Added JQUERY events to have possibility to change data on search results popup.
  • Added antibot protection 
  • Optimized loading function
  • Added possibility to search an all products features
  • More than 10 small bugs fixed

Version 7.0.8 August 16 2021

What's new:

  • Added additional hooks for developers hoosk_get_fields
  • Added max-width param of search window for desktop devices
  • Added search variations mode
  • Multivendor: Added possibility to get access for vendors on search histrory

Version 7.0 August 1 2021

The 7.x version branch is the new generation of the live search add-on. Everything has been changed, from the internal architecture of the add-on to the appearance. The add-on was developed from scratch, relying on the accumulated experience of the old 5.x branch, so all the functions is preserved, and at the same time new ones have been added. Changing the architecture of the add-on has made possibility to achieve a significant acceleration of the search and unlimited possibilities for further expanding the functionality of the add-on.

So what's new in version 7.0:

  1. Filter search results by categories directly in the search popup;
  2. Keyboard Navigation on search results in popup;
  3. Search synonyms;
  4. Ability to choose a theme (Modern and Classic) and change color schemes for each of them
  5. Built-in search speed-up (for high-load projects);
  6. Search motivation;
  7. Search phrases;
  8. Search history by user.
  9. Quick view and add to the compare list buttons.