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).
- Active till: The pop-up end date (optional).
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.
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.
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.
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.