1. Click on ADD NEW POPUP
This will create your new Custom Pop-up with default settings. Click on it to edit.
2. Choose the goal you want to achieve
3. Get inspired by the ready-made templates
Each objective comes with different sets of templates. When you select each objective, you will see a different set to choose from.
4. Once you have selected your template, click on the Design tab
You will create your pop-up using the easy-to-use pop-up builder. To explore all the features of the Custom Pop-up editor, click here.
If you like your creation, let's move on to the Display tab.
5. Display rules
All Custom Pop-ups are responsive by default, but you may want to show your pop-up on a specific device depending on your strategy. You can choose between:
All devices (desktop and mobile)
Once you have made your decision, you will be able to choose the position in which your pop-up will appear on the screen.
That's pretty much it! Now we will still define the rules, telling you when and where your pop-up will be displayed.
First, you need to define the actions - that is, the conditions and events after which your pop-up will be displayed.
Immediate (your pop-up will be displayed immediately, without any delay)
Delay (your pop-up will be displayed with the selected delay)
Inactivity (your pop-up will be displayed after the selected time of user inactivity on the page)
- You must enter the time of inactivity (in seconds) in the text box that will appear below.
On hover (your pop-up will be displayed when the user hovers the cursor over the selected page element)
- This condition will not be available if you have selected 'all devices' or 'mobile only' in step 3. You will need to enter the CSS selector in the text box that appears below.
Scrolling (your pop-up will be displayed when the user scrolls 50% of the page)
Page down (your pop-up will be displayed when the user moves the cursor up the page).
- This condition will not be available if you have selected 'all devices' or 'mobile only' in step 3.
Click (your pop-up will be displayed when the user clicks on the selected page element).
- You will need to enter the CSS selector in the text box that appears below.
Newsletter sign-up (your pop-up will be displayed after a user subscribes to your newsletter).
- This is a great option to create a pop-up thanking users for signing up
7. Set where you want your pop-up to be displayed
On every page (all pages of your website)
On the homepage (homepage only)
On product pages (product pages only)
Based on URLs
- URL is exactly...
- URL is no...
- URL does not contain a fragment of...
- URL contains a fragment of...
- URL address (Regex)
Note that you can combine URL terms to suit your needs. For example, you may want to add a pop-up only to checkout-related pages, with the exception of the last one (after purchase).
8. Adjust the remaining settings
Select scheduling - and set when you want your pop-up to appear:
Display now (start immediately and remain active indefinitely)
Display during a selected period (choose the start and end date of your pop-up)
Don't forget to select the subscription status you want the user to whom you want the pop up to appear.
If you want to distinguish from where your customers sign up when you have more on-site elements, customize the tag that will be assigned to the user when they sign up for your newsletter.
You can also set a limit to determine how many times your pop-up will be displayed to each user. You can choose from several options - from always (no limit) to once (every 31 days).
And finally, name your pop-up. This will help you identify it later when you want to manage all your pop-ups or check its performance in Onsite Reports.
9. All done...
In this step, you will see three buttons: Save, Preview, and Publish. If you have unsaved changes, you will only be able to click the SAVE button.
If you have unsaved changes, you will only be able to click the SAVE button.
By clicking the PREVIEW button, you will see how your pop-up will look in the store. A new button called VIEW IN STORE will be generated. After clicking it, you will be transferred to the view of your store with the newly created pop-up.
If you're happy with how your pop-up looks in store view, click the PUBLISH button and voilà - your new Custom Pop-up is ready to go :)
If you are happy with the look of your pop-up in the shop view, click the PUBLISH button and voilà - your new Custom Pop-up is ready to go :)
Need more help?
If you have any further questions about Custom Pop-ups in edrone, please do not hesitate to contact us at email@example.com