Popup
Use the given section to display a discount or advertisement popup on a page. This section can be added more than once.
Last updated
Use the given section to display a discount or advertisement popup on a page. This section can be added more than once.
Last updated
Note! By adding the section in the "Template" area, the popup will be displayed only on a specific page. To show the popup 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 popup 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 popup in admin panel" checkbox to display the popup in the Theme Editor. By disabling the option, the popup will only appear in the preview. In that case, save the settings and check the popup on the storefront.
Use the "Show trigger" drop-down to specify the popup appearance on the Home page:
Delay - select the option to show the popup after the time specified on the scale below has elapsed.
Exit intent - the popup 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 is started 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 popup'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 popup won’t appear for customers who logged their accounts if you activate the "Show to guests users only".
To display the popup on mobile, tick the "Show on mobile" checkbox.
Select one of the options in the "Position" drop-down to place the popup on the desired part of the screen on the desktop: "Top left", "Top", "Top right", "Center left", "Center", "Center right", "Bottom left", "Bottom", or "Bottom right".
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.
Selecting the "Auto" option, the popup functionality will vary based on its position:
Center: Displays with a semi-transparent background outside the popup and disables scrolling (freezes the screen).
All other popup positions: No color overlay or screen freezing effect is applied.
Width
The width settings can be adjusted on the scale from 300 to 500 pixels.
Min height
Set the popup size on the scale from 0 to 700 pixels.
Border radius
Activate the "Enable border radius" option to adjust settings in the current section using the "Border radius" scale. The radius can be changed from 0 to 20 pixels.
The global theme settings will be applied to the popup by disabling this option. These configurations can be checked in Theme settings -> Style, "Images border radius".
Text and social icons alignment in the popup can be changed to "Left" or "Center" using the "Content alignment" picker.
Use the "Background" color picker to specify the color of the popup.
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 popup.
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:
