How to Set Up a Quiz Link Popup on Your Store¶
This guide will walk you through the process of setting up a Quiz Link Popup on your eCommerce store.
This feature allows your customers to access a quiz through a popup by clicking on a link within your site's navigation menu, a button, a banner or any page or blog post. It's a great way to engage visitors and collect valuable data.
Before you start, ensure you have:
- access to your eCommerce store's admin dashboard
- the necessary permissions to edit themes, pages and navigation settings
Link Popup in Website Menu¶
- Obtain the Popup Link Code: Go to the
Share
section of the app, then toLink > Show Instructions for legacy themes
. Click onGet the code
to copy the link provided. - Access Theme Customization: Log in to your Shopify admin dashboard. Navigate to
Online Store > Themes
. Find your current theme and click on theCustomize
button. - Activate App Embeds: Within the theme customization area, go to
App Embeds
. Look for the Link Popup Quiz option and toggle it on. This action will automatically add theembed.js
script to your site, enabling quiz links to load in an iframe popup. - Navigate to Your Site's Navigation Settings: From your Shopify dashboard, go to
Online Store > Navigation
. Open the menu list you wish to add the quiz link to. - Add a New Menu Item: Click on the
Add menu item
button. In the name field, type in a title for your quiz link, such as “Take Our Quiz”. - Insert the Popup Link Code: Paste the previously copied code into the link field.
- Save Your Changes: Don't forget to click the
Save
button to apply the changes to your navigation menu.
- Obtain the Popup Link Code: Go to the
Share
section of the app, then toLink
. - Edit the Popup Options and click on
Get the code
to copy the link provided. - Go to the
Appearance
tab and open theMenus
. - Pick a menu and add a
Custom Link
. Paste the copied link into theURL
section and edit the link text, for example, you can call it "Coffee Quiz". - Make sure to save the changes with the
Save Menu
button.
- Add the following embed.js script before the
</head>
close tag in the header. Without it, the quiz won't be loaded on your website. - Obtain the Popup Link Code: Go to the
Share
section of the app, then toLink
. - Edit the Popup Options and click on
Get the code
to copy the link provided. - Navigate to your
Catalog > Categories
and follow Adobe instructions to create a new menu level or a custom menu item. Use the link copied from the app to create this menu item. - Remember to save the changes.
- Add the following embed.js script before the
</head>
close tag in the header. Without it, the quiz won't be loaded on your website. - Obtain the Popup Link Code: Go to the
Share
section of the app, then toLink
. - Edit the Popup Options and click on
Get the code
to copy the link provided. - Navigate to your
Storefront > Web Pages
menu and clickCreate a Web Page
. - Under
Page Type
select that This Page WillLink to Another website or document
. - Under
Web Page Details
use the Quiz Name asPage Name
then paste the link copied from the app in theLink
field. - Under
Navigation Menu Options
tick the box to show this web page on the navigation menu. Choose a Parent Page if you like or leave with No Parent Page. - Remember to save the changes with
Save & Exit
.
- Add the following embed.js script before the
</head>
close tag in the header. Without it, the quiz won't be loaded on your website. - Obtain the Popup Link Code: Go to the
Share
section of the app, then toLink
. - Edit the Popup Options and click on
Get the code
to copy the link provided. - Navigate to your eCommerce platform Navigation Menu settings and add a new item. Paste the link copied from the app.
- Remember to save the changes.
Link Popup as "Take the Quiz" Button¶
- Obtain the Popup Link Code: Go to the
Share
section of the app, then toLink > Show Instructions for legacy themes
. Click onGet the code
to copy the link provided. - Access Theme Customization: Log in to your Shopify admin dashboard. Navigate to
Online Store > Themes
. Find your current theme and click on theCustomize
button. - Activate App Embeds: Within the theme customization area, go to
App Embeds
. Look for the Link Popup Quiz option and toggle it on. This action will automatically add theembed.js
script to your site, enabling quiz links to load in an iframe popup. - Navigate to Themes: Go to
Online Store > Themes
. - Enter Theme Customization: Find the theme you wish to edit and click on the "Customize" button.
- Add a New Section: Click on "Add section" and select "Image banner" (or a similar option) from the list.
- Insert a Button Block: Within the "Image banner" section, add a new block and choose the "Button" option.
- Paste the Quiz Link: Click on the newly added button block to edit its settings. Paste the link to your quiz in the appropriate field.
- Save Changes: Make sure to save your changes by clicking on the "Save" button.
- Obtain the Popup Link Code: Go to the
Share
section of the app, then toLink
. - Edit the Popup Options and click on
Get the code
to copy the link provided. - In WordPress, go to
Pages
and find the page that corresponds to the Front Page. Click 'Edit'. - In the WordPress Page Builder add a
Buttons
block. This will automatically add one button to your page builder. - Edit the button text and settings, for example, write "Take the Quiz".
- Then, add a
Link
to the element. UnderSearch or type URL
paste the code copied from the app. Accept with enter. - Remember to save the changes and update the live page.
- From now on, whenever someone clicks on the button, a quiz popup will open.
- Add the following embed.js script before the
</head>
close tag in the header. Without it, the quiz won't be loaded on your website. - Obtain the Popup Link Code: Go to the
Share
section of the app, then toLink
. - Edit the Popup Options and click on
Get the code
to copy the link provided. - In your Magento dashbaord go to
Content
>Blocks
. ClickAdd New Block
. - Edit the Block Title, Identifier and Store View and click
Edit with Page Builder
. - Select
Elements
>Rows
and drag a row into the canvas. - Next open
Buttons
. Drag the button onto the Row. - Edit the Button Text and click the gear icon to open
button settings
. - Under
Button Link
paste the link copied from the app. - Remember to save the changes.
- From now on, whenever someone clicks on the button, a quiz popup will open.
- Add the following embed.js script before the
</head>
close tag in the header. Without it, the quiz won't be loaded on your website. - Obtain the Popup Link Code: Go to the
Share
section of the app, then toLink
. - Edit the Popup Options and click on
Get the code
to copy the link provided. - In BigCommerce, go to
Storefront
>Web Pages
. Find the main page. - Switch to the
HTML
editor. Find the place where you want to add the button and add the following HTML code. Remember to replace the#quiz-QUIZID
with the link copied from the app. - Save the changes.
- From now on, whenever someone clicks on the button, a quiz popup will open.
- Add the following embed.js script before the
</head>
close tag in the header. Without it, the quiz won't be loaded on your website. - Obtain the Popup Link Code: Go to the
Share
section of the app, then toLink
. - Edit the Popup Options and click on
Get the code
to copy the link provided. - In your store customization options find the main page.
- Find the place where you want to add the button and find the button element. Add button text and paste the link copied from the app.
- (alternatively) Find an HTML element and add the following HTML code. Remember to replace the
#quiz-QUIZID
with the link copied from the app. - Save the changes.
- From now on, whenever someone clicks on the button, a quiz popup will open.
Popup Displays Behind Website Header¶
If the Quiz Popup displays behind your website header or the X
closing button is not visible it's likely that your website's header has an unusually high z-index. This is not something that can be fixed from the app's end but rather from your website's end.
Here's what you can do:
- Decrease the Z-index of your website's header. You may need to check your theme files or contact your theme developer to do this.
- Move the
X
closing sign lower. You can move theX
quiz closing sign lower on the popup with a bit of custom HTML/CSS code that can be added to your website's theme or an empty HTML/custom liquid block on the page where the quiz popup is shown. Here's a sample code: - Publish the quiz inline with a page instead. If you don't want to make changes you can publish the quiz inline on a new page in your store. This way the quiz will be a part of it and you can link to that quiz page from other parts of your website. Check the instructions here.
You've successfully set up a Quiz Link Popup on your eCommerce store. Don’t forget to click on the “Save” button so the changes are reflected in your store.