Pop-up notifications add-on for cs-cart

Pop-up notifications add-on for cs-cart

Pop-up notifications add-on for cs-cart

The "Pop-up notifications" add-on is a handy tool that will help you tell about new products, promotions, news and other important events on the site, create notifications with the "Accept" button (for cookie and age confirmation notifications), and with a subscription form for mailings... The add-on has very flexible settings. You can specify how, when, to whom, how often, on which devices, on which pages and at what time to show notifications, including in the admin panel.


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 any addon uncompatibility.

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

To access notification management in the admin panel, go to the Add-ons → CS-Commerce add-ons section and select Pop-up notifications from the drop-down list.

Notifications list

The Pop-up notifications page contains a list of all created notifications, which can be sorted by any of the columns:

  • ID;
  • notification name;
  • area;
  • wrapper;
  • language;
  • status.

Bulk delete and bulk duplicate notifications are available here.

To create a new notification, click on the "+" button in the upper right corner of the screen.


There are only 4 fields in the General tab:

  1. Notification name - used only in the admin panel.
  2. Area - frontend or admin panel. This setting affects other notification settings.
  3. Language - the notification is generated for one language. You can duplicate a notification to create a similar one in another language.
  4. Status.


This tab contains settings for filling and styling the notification. 

  1. Wrapper:
    • Notification - a regular green message in the upper right corner.
    • Alert - a regular yellow message in the upper right corner.
    • Error - a regular red message in the upper right corner.
    • Regular popup - a regular pop-up window in the center of the screen with a dark overlay.
    • Custom notification - you will customize the appearance of the window yourself.
  2. Notification header - the title that will be displayed in the notification.
  3. Content type:
    • Custom text - you can choose an HTML editor or a smarty-enabled input field.
    • Image - upload a graphic file (supported formats: jpg, jpeg, png, gif, svg).
    • Page - pick page to show it in the notification.
    • Product - quick view of the selected product.
    • Banner - pick banner to show it in the notification.
    • Block - select any blick to display.
    • Subscription form - available if the Newsletter or Email Marketing add-on is enabled.
  4. available if the Newsletter or Email Marketing module is enabled:
    • Accept - when you click on this button, the notification will be hidden and this user will no longer be displayed, regardless of other settings.
    • Decline - when you click on this button, the notification will be hidden, and the user can be redirected (if the link address is specified). The notification will be shown again.
    • Close - when clicked, the notification closes. Its further display depends on the Show again in setting.
    • Link - when clicked, the user will be redirected. Its further display of the notification depends on the Show again after setting.
  5. Cross - setting for displaying a cross. The color and size of the cross can be customized for the Custom Notification skin.
  6. The Display settings section is relevant only for the Custom notification wrapper.
    • Location - the position on the screen where the notification will be displayed. There are 11 options available.
    • Overlay - blocks scrolling of the page. You can customize color, opacity and blur radius.
    • Sticky - the setting is available for notifications that are located at the top or bottom of the screen. This setting will allow the notification to hang when scrolling the page.
    • Notification width - the setting is also available for notifications that are located at the top or bottom of the screen.
    • Border - you can select the width, style and color of the border.
    • Rounding - radius of rounding of corners.
    • Notification background - you can customize the color, opacity and blur radius of the background.
    • Notification shadow - adjust the shift, blur, width and color of the shadow.
    • Paddings.


In the Conditions tab, you need to choose where and to whom to show the notification. For notifications with the Fronend location, the following page settings are available for display:

  1. Main page.
  2. Catrgories - at all or at selected.
  3. Products - at all or at selected.
  4. Pages - at all or at selected.
  5. Vendor pages - at all or at selected.
  6. Brands pages.
  7. Catalog.
  8. Search results.
  9. Cart.
  10. Checkout.
  11. Checkout complete.
  12. Wishlist.
  13. On sale - if the Bestseller add-on is enabled.
  14. Bestsellers - if the Bestseller add-on is enabled.
  15. Newest - if the Bestseller add-on is enabled.
  16. Custom URLs - add individual links on the pages of which you want to display a notification.

For whom show notification:

  1. Usergroups - pick you need.
  2. Users - select individual users.
In order for the notification to be shown on all pages of the site for all users, do not check anything in the Conditions tab.



  1. Device - choose on which devices to show the notification:
    • all devices;
    • desctop (form 768px);
    • mobile (to 767px).
  2. Trigger for show:
    • Loading page - specify how many seconds after the page is loaded to show a notification.
    • Scrolling - specify the scroll size in px.
    • Activity on page - indicate the duration of the activity.
    • Inaction - specify the duration of inactivity to display the notification.
    • Leaves the site - only if the selected device is computer.
    • Click on element - use jquery selectors to select elements: when specifying multiple selectors, separate them with commas, the attributes of one selector must be separated by a space. Before the class of an element you need to put a dot ".". Before the id you need to put a hash "#".
  3. Auto close in seconds.
  4. Timatable - specify the time interval in hours for displaying the notification.
  5. Use available period - specify the date range.


The statistics are located in the right column on the notification edit page. We keep statistics on the following actions:

  1. Show.
  2. Click on Accept button.
  3. Click on Decline button.
  4. Click on Close button.
  5. Click on Link.
  6. Click on Image link.
  7. Cross.
  8. Autoclose.

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: https://domain.com/admin.php?ctpl).

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 https://helpdesk.cs-commerce.com/, 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.  


Version 1.0 October 11 2021

This is first addon release