To create a new popup, 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 popup.
The sections are as follows:
General Popup Settings
Use the settings in this section to specify the most general information about each popup. This information will appear in the popup list in the Admin area.
Administrative name: A name to identify the popup (will only be used in the Admin area).
Enabled: Use the checkbox activate popup in the storefront.
Active from: The popup start date (optional).
Active till: The popup end date (optional).
Popup Content
Use this section to define the popup style and content as it should be displayed to the customers in the store front end.
Popup type: Choose the popup type from the drop-down list.
Standard popup
Custom popup template
Notification bar
Bar with mini cart and checkout button
The popup will use the colors of the main store skin and 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:Title: Name the popup the way you want your customers to see it in the storefront.
Content: Add the popup 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 popup on the storefront.
Display mode: Choose the appropriate display mode for the popup.
Your options are:Show after page load: Select this option to display the popup automatically for the chosen pages.
Show after a mouse click: Select this option to add a clickable link on the popup in the product description.
For this purpose:Copy the link from the tooltip, e.g.,
<a href="#" class="popup-anywhere-link-1">Link text</a>. The link will vary depending on the popup.Open the product details of the product you want to edit and locate the product description field. Make sure the Code view </> option is selected.
Paste the link between the <p>...</p> tags and update the text in the highlighted part to the one relevant to your store.
Click "Update product" to save the changes. The popup link will display in the product description in the storefront.
Show once per N days: Select this option to display the popup for the chosen pages once in a period. Set the period in days in the "Number of days" field below.
Show a popup when a visitor wants to leave site: Select this option to create an exit offer. Specify the quantity and subtotal limits in the fields below for the popup to display correctly.
Show popup to: Select the customers who will see the popup (registered or unregistered customers).
Show if URL contains: Specify the store pages where the popup 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 popup 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 popup.
Popup width: Specify the popup width (in pixels or percentage of the screen width).
Popup position: Choose your preferred popup 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 popup appearance in seconds.
Click Create to complete the creation of the popup. The popup will add to the popup list.
That's it! A new popup has been created.
Related pages: