What is the pop-up section?
The Pop-up section is an incredibly versatile section that has fast become a mainstay of many Online Stores. It can be added to the OVERLAY GROUP for site-wide messaging, or to individual page templates when a more tailored visitor experience is required.
Quick to set up, and with a variety of powerful blocks to choose from, Pop-ups can be a great way to increase conversion rates, promote products or events, and drive sales.
How to set up pop-ups
- Open the Theme Editor.
- Under TEMPLATE or OVERLAY GROUP click Add section and select Pop-up.
- Under Pop-up use the Trigger settings to choose the action which triggers the popup to show and who gets to see it (guest users or logged in customers), as well as the delay and frequency of the pop-up.
- The LAYOUT, BACKGROUND IMAGE (OPTIONAL) and STYLE settings can be used to customize the general appearance of the pop-up, including screen position, text alignment, text and background color and image tint opacity.
- By default, the Pop-up comes pre-loaded with a Heading, Text and Email sign-up block, but up to 10 blocks can be added in total. Choose from any combination of Heading, Subheading, Text, Image, Button, Email sign-up, Social links, Countdown timer, and Discount code. Note that up to a maximum of two Text blocks can be added to each Pop-up.
- Most of the blocks come with their own settings and inputs to further customize their appearance or enhance functionality. Click on the relevant block to edit as needed.
- Click Save when the section set up is complete.
The Pop-up section is flexible, and with just a few settings you can create eye-catching and effective pop-ups.
Discount code pop-ups
To do this, use the Discount code block. In this example, we've chosen to place the image on the left on larger screens.
The Countdown timer can be used to create a sense of urgency. Read the Countdown timer section guide for more.
Email sign-up pop-ups
Engage with your customers by offering them discounts for signing up. Avoid placing this on the homepage - new visitors are less likely to signup than ones how have visited an internal page.
Full image popups
Create impact with a background image on the popup.
How can I adjust the size of a pop-up?
The height of the Pop-up section will scale to accommodate the number of blocks added, and the amount of content in each block, but not beyond the device screen height. Instead, if the content would cause the pop-up to extend beyond the screen height, the content will scroll within the maximum pop-up height. For optimal user experience, the width of pop-ups have been pre-determined.
Why can I not set an image block to appear on the left or right of the pop-up on mobile?
There are settings to independently control the position of the Image block on large screens and mobile devices. On large screens, the image block can be positioned on the left, right or top of the pop-up. On mobile devices, where screen real-estate is at a premium and to preserve a viable reading width for text content, the image block can only be positioned to the top of the pop-up, or hidden completely if a more streamlined appearance is required.