Popup
Use the given section to display a discount or advertisement pop-up on a page. This section can be added more than once.
Note! By adding the section in the "Template" area, the pop-up will be displayed only on a specific page. To show the pop-up on all pages of the entire store, apply configurations in the "Popups" area.
Tip: Use the blocks specified in the section to add the necessary content: "Image", "Text", "Newsletter form", "Buttons", "Social media", "Time countdown", "Collection", and "Promotional code".
Move each block in the popup by dragging and dropping it to the desired position.
Note! If the pop-up contains more content than its height allows, the entire content can be viewed by scrolling up and down on both desktop and mobile.
Tick the "Show in admin" checkbox to display the pop-up in the Theme Editor. By disabling the option, the pop-up will only appear in the preview. In that case, save the settings and check the pop-up on the storefront.
To display the pop-up on mobile, tick the "Show on mobile" checkbox.
Use the "Show trigger" drop-down to specify the pop-up appearance on the Home page:
"Delay". Select the option to display the pop-up after the time specified on the scale below.
"Exit intent". The pop-up will appear just before a user attempts to leave the page or close the store. The pop-up is triggered when the mouse is moved to the edge of the screen or beyond the edges, indicating that the user is about to leave the page.
"Copy to clipboard". The pop-up starts when users copy any text on store pages.
Delay
If you choose the "Delay" option in the drop-down above, you may want to adjust the pop-up's delay time using the scale. The delay time for displaying a pop-up on a page can be set from 1 to 60 seconds.
Cookies life
Determine the cookie's life on a scale from 1 to 60 minutes.
The pop-up won’t appear for customers logged into their accounts if you activate the "Show to guests users only".
The "Position" option helps to place the text box in a desired position: "Top", "Center", or "Bottom". Each of the options contains the settings, such as "Left", "Center", and Right". Select the desired option by operating the drop-down that best fits your needs. The "Auto" option sets the pre-designed parameters of the theme style.
Using the "Freeze screen" picker, determine whether to use a freeze effect and apply a semi-color overlay outside the popup. Select "Yes" for background dimming and freezing a scroll, "No" to cancel the effect, and the "Auto" option to maintain the pre-set theme settings.
Width
The width settings can be adjusted on the scale from 300 to 500 pixels.
Min height
Set the pop-up size on the scale from 0 to 700 pixels.
Text and social icons alignment in the pop-up can be changed to "Left" or "Center" using the "Alignment" picker.
Border radius
Note! The global theme settings will be applied to the pop-up by disabling this option. These configurations can be checked in Theme settings -> Styles, "Image".
Activate the "Enable corner radius" option to adjust settings in the current section using the "Corner radius" scale. The radius can be changed from 0 to 20 pixels.
Colors
Use the "Background" color picker to specify the color of the pop-up.
The color of the "X" button can be changed using the "Close button" item.
Hit the "Enable shadow" checkbox to add the shadow effect outside the pop-up and display the "Shadow" setting.
The shadow color can be determined using the "Shadow" item.
In the following example, you can view how the section might be displayed in a store:
Last updated