Pop-Up PRO

Overview

The Pop-Up PRO add-on allows to show engaging pop-ups in the most important touchpoint with your customers to guide them through the sales funnel, deliver special offerings and increase conversion. Display coupon codes, offer free shipping, collect emails with your favourite email automation services, highlight new collections or just welcome the visitors at the right moment and in the right place. Select which visitors should see your campaign and in what conditions. Use colourful images and text to engage the customers with your offer or message and reach your goal.

Features

  • Use images and text
  • Add HTML code
  • Collect emails
  • Build pop-ups and banners
  • Target certain visitors
  • Schedule availability period
  • Mobile-friendly

Compatibility

The add-on is compatible with CS-Cart and Multi-Vendor 4.9 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.

Managing in the admin panel

Installing the add-on

Install the Pop-Up PRO 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.

Setting up the add-on

Here are available settings of the Pop-Up PRO add-on.

  • License key—Enter the license key to activate the add-on. You will receive this key in the order confirmation email. You can also see license keys for all your purchased add-ons in your HelpDesk account.

Creating a pop-up

  1. To create a pop-up, go to Marketing > Popups menu and click + button.
  1. Fill in the following fields:
  • Name—Enter the pop-up name.
  • Type—Choose the pop-up type: HTML or graphic banner.
  • Status—Set the pop-up status.
  1. Click Create. After you have created a new popup window, you will find three new tabs available: Settings, Content and Conditions.
  1. On the Settings tab you could set up the appearance of the pop-up window.

The following settings are available:

  • Position—Choose the position of the pop-up on the page. 10 options are available: top, top-start, top-end, center, center-start, center-end, bottom, bottom-start, bottom-end, bottom-wide.
  • Width—Enter the width of the pop-up window in pixels.
  • Margin—Enter the margin of the pop-up window in pixels.
  • Padding—Enter the padding of the pop-up window in pixels.
  • Block page main content—If enabled, blocks the page main content, until pop-up will be closed.
  • Animation speed—Choose the animation speed. 5 options are available: slower, slow, normal, fast, faster.
  • Animated entrances—Choose the animation for the pop-up entrance. 41 differents effects are available.
  • Animated exits—Choose the animation for the pop-up exit. 41 differents effects are available.
  • Show time—Enter the time in milliseconds (1s = 1000ms).
  • Show on mobile devices—If this option is disabled, the pop-up will not be displayed on devices with screen width less than 1200 px.
  1. Go to the Content tab to set up the pop-up window content.

HTML pop-up

  • Text—Add HTML code for the pop-up window.
  • Background color—Choose the color for the pop-up window background.

For example, to make the pop-up look like this, the following code was used:

<div style="background-color: #555555; margin: -20px;"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://static.simtechdev.com/images/demo/popups/christmas.jpg" alt="" /><span style="position: absolute; top: 44px; width: 100%; font-size: 20px; color: darkred; left: 0px; text-align: center; font-family: tahoma, arial, helvetica, sans-serif;">UPTO 50% OFF</span> <span style="position: absolute; top: 87px; width: 100%; font-size: 38px; color: black; left: 0px; text-align: center; font-family: 'trebuchet ms', geneva, sans-serif;"><span style="font-family: tahoma, arial, helvetica, sans-serif;">Christmas</span> holidays!</span> <span style="position: absolute; top: 160px; width: 100%; font-size: 15px; color: gray; left: 0px; text-align: center; font-family: tahoma, arial, helvetica, sans-serif;">GET AMAZING DEALS ON ALL BRANDS.</span> <div style="text-align: center; width: 100%; position: absolute; top: 205px;"><a style="border-radius: 2px; background-color: black; border: none; color: white; padding: 10px 50px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px;" href="index.php?dispatch=products.on_sale">SHOP NOW!</a>

Graphic banner pop-up

  • Banner—Choose the banner from the list of banners of your store for displaying in the pop-up window.

Important

Make sure the Banner management add-on is set to Active in your store. Otherwise the Graphic banner type will not be available.

  1. Go to Conditions tab to add conditions for displaying pop-up window.

The following conditions are available:

  • Show on page—Choose pages where you want the popup to be displayed.
  • Timeout—The duration of the pause before display. If the popup is slow enough not to appear in normal use, you can enter the duration of the pause (one-three seconds) to ensure it is displayed as intended.
  • Show when leaving the page—Show the popup at the moment when customer is going to leave the page.
  • Show once in session—Show the popup only once during a user’s session. The popup display data is logged and saved in the user’s session.
  • Re-show after—Choose the time interval after that the popup will be displayed again.
  • Show to authorized users—Show the popup only to the authorized users.
  • Users—Choose users who you want the popup to be displayed.
  • User groups—Choose user groups that you want the popup to be displayed.

Click Add condition, choose one or several conditions from the drop down list and specify the value.

You could always remove the condition by clicking on a bin icon on the condition.

  1. After configuring click Save.

Here’s the final result: