To create a new pop-up, click the New popup button at the top of the Popups page in your store's Admin area (Discounts -> Popups).

You will be redirected to the New popup page, where you can configure the settings in four sections to create a pop-up.

The sections are as follows:

General Popup Settings

Use the settings in this section to specify the most general information about each pop-up. This information will appear in the pop-up list in the Admin area.

  • Administrative name: A name to identify the pop-up (will only be used in the Admin area).

  • Enabled: Whether the pop-up should be enabled right after it has been created.

  • Active from: The pop-up start date (optional).

from-till.png
  • Active till: The pop-up end date (optional).

Popup Content

Use this section to define the pop-up style and content as it should be displayed to the customers in the store front end.

  • Popup type: Choose the pop-up type from the drop-down list.

Standard popup

Custom popup template

Notification bar

Bar with mini cart and checkout button

The pop-up will use the colors of the main store skin. It will display on the storefront according to the Popup Behaviour and Popup Appearance sections' rules.


Upload all custom templates to the folder <X-Cart folder>/skin/customer/modules/QSL/PopupAnywhere/popup_templates/ on the server where your X-Cart software is hosted.
Get more info on how to create a custom template in the following articles:
- Custom CSS
- Templates and Interfaces
- Custom features with Twig template engine


  • Title: Name your pop-up the way you want your customers to see it in the storefront.

  • Content: Add the pop-up content here.
    Use the built-in WYSIWYG editor to insert images, videos, or links (if required), or choose a custom .twig file for a custom popup template.

Popup Behaviour

Use this section to define the rules to control the display of a pop-up on the storefront.

  • Display mode: Choose the appropriate display mode for the pop-up.
    Your options are:
    - Show after page load;
    - Show after a mouse click;
    - Show once per N days (if you select this option, you will also need to specify the periodicity in days);
    - Show a popup when a visitor wants to live site (select this option if you need to create an exit offer).

  • Show popup to: Specify whether the pop-up should be displayed to all visitors or just to certain groups of visitors (registered or unregistered customers).

  • Show if URL contains: Specify the store pages where the pop-up should display (based on the part of the page URL; for example, target=cart, target=checkout, .html, etc.). If you choose to specify several page types, separate them with a comma.

  • Do not show if URL contains: Specify the store pages where the pop-up should NOT display (based on the part of the page URL; for example, target=cart, target=checkout, .html, etc.). If you choose to specify several page types, separate them with a comma.

Popup Appearance

Use this section to define the visual parameters of a pop-up.

  • Popup width: Specify the pop-up width (in pixels or as a percentage of the screen width).

  • Popup position: Choose your preferred pop-up position.

  • Show background: Specify whether you want the background to be shown or not.

  • Show Close button: Select whether to show the Close button or not.

  • Appearance animation: Select an appropriate appearance animation, if applicable.

  • Delay (seconds): Set a delay for the pop-up appearance in seconds, if applicable.

Click Create to complete the creation of the pop-up. The pop-up will add to the pop-up list.

That’s it! A new pop-up has been created.

Related pages:

Did this answer your question?