Skip to main content

Open your quiz in a POPUP

Ana Bunaiasu avatar
Written by Ana Bunaiasu
Updated this week

If you prefer, you can check out this information in video format.

Activate Lantern App Embed

Start by copying the Popup URL for your Quiz from the Publish page.

Image showing the Lantern Publish page with Option 3 selected and the Copy Popup URL button highlighted for setting up a quiz pop-up.

Next, click on the Go to the Theme Editor button under the Open in a popup option.
This will redirect you to you Theme Editor, where from left-hand side menu you can select App Embeds and enable the Lantern Quiz Pop-up.​

Image showing the 'Go to the Theme Editor' button highlighted on the Publish page. After clicking it, the Shopify Theme Editor is displayed with the App Embeds section open and the Lantern Quiz Popup toggle enabled and highlighted.

Now that the App Embed is activated, we can use the Popup URL we copied at the beginning as a destination link for any button or link on the page.

Trigger a pop-up quiz clicking a button

For this example, we'll use the Shop All button on the Hero section of the Homepage.
​From the right hand side menu, we change the button label to Open Quiz and paste the copied URL in the Button link input box.

Image showing the right-hand menu of the Theme Editor where the Shop All button label has been changed to "Open Quiz" and the copied popup URL has been pasted into the Button link input box.

Please note: When pasting this it’s very important that you click on the option. If you don’t do this, your changes will not be saved.

Once you've done this, you can immediately test the functionality and see the quiz open as a popup.

Image showing a preview of the storefront with the Open Quiz button clicked and the Lantern quiz displayed as a popup.

Automatic Popups

If you would like your pop-up to appear automatically we have a list of additional optional settings that can be edited to influence its behaviour:

Image showing the auto-trigger behavior options for the Lantern pop-up in the Theme Editor with the Auto-Trigger on Exit Intent and Auto-Trigger on Scroll highlighted.

You can auto-trigger the pop-up on exit intent or scroll and specify the scroll trigger in pixels. Alternatively, you can trigger the pop-up automatically after a certain number of seconds.

For example, we want the quiz to auto-trigger after 5 seconds of a user being on a page and only display once.

Image showing the auto-trigger setting configured to open the quiz popup after 5 seconds. The display "Once" option is selected from a dropdown menu, and the quiz popup URL is pasted in the 'Which quiz should auto-trigger?' input field.

Similarly, if you enable the auto trigger on scroll and set this to 750px, then the pop-up will automatically be triggered when someone scrolls down the page past the first 750px.

Image showing the auto-trigger on scroll toggle enabled, with the scroll distance set to 750px before the quiz popup is triggered.

If you enable either of these three options please make sure you also provide the quiz to auto-trigger under 'Which quiz should auto-trigger?' You do so by copying the quiz pop-up URL from the publish page and pasting it inside the input box in the theme editor.

Image showing the input field under "Which quiz should auto-trigger?" in the Theme Editor, with the quiz pop-up URL pasted and highlighted.

If you need help setting this up or have any other questions please don't hesitate to contact us at support by using the in app chat toggle or our support e-mail at [email protected].

Did this answer your question?