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.
What's a Link Popup?
Link Popup 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.
Note
Before you start, ensure you have a quiz created and the necessary permissions to edit themes, pages and navigation settings
In short, to add a link popup to your store, you need to:
-
Enable the
Link Popup Quiz
app embed in your store theme and then -
Use
#quiz
as the link in the navigation menu item, a button, a banner or any page or blog post to open the quiz as a popup.
Link popup can be opened on every page (activate Link Popup Quiz
in App Embeds
) or on a specific page (add a Link Popup Quiz
section to a page template) in your store.
In short, to add a link popup to your store, you need to:
-
Enable the
Link Popup Quiz
app embed in your store theme and then -
Use
#quiz-QUIZID
as the link in the navigation menu item, a button, a banner or any page or blog post to open the quiz as a popup.
In short, to add a link popup to your store, you need to:
-
Generate a link popup code from the
Share
section of the app -
Paste the link in the navigation menu item, a button, a banner or any page or blog post to open the quiz as a popup.
In short, to add a link popup to your store, you need to:
-
Generate a link popup code from the
Share
section of the app -
Paste the link in the navigation menu item, a button, a banner or any page or blog post to open the quiz as a popup.
In short, to add a link popup to your store, you need to:
-
Generate a link popup code from the
Share
section of the app -
Paste the link in the navigation menu item, a button, a banner or any page or blog post to open the quiz as a popup.
In short, to add a link popup to your store, you need to:
-
Generate a link popup code from the
Share
section of the app -
Paste the link in the navigation menu item, a button, a banner or any page or blog post to open the quiz as a popup.
Link Popup in Website Menu¶
On Every Page¶
What's a Link Popup in menu that opens on every page?
It's a link that will open the quiz as a popup over any page in your store when a link in the navigation menu is clicked.
Shopify 1.0 Theme Compatibility
Quizzes created with the đź’ŽBuilt for Shopify
version of the RevenueHunt app cannot be published on Shopify 1.0 themes. Shopify 1.0 themes do not support app embeds, which are required for the V2 integration. App embeds are a feature available in Online Store 2.0 themes, which allow you to add app functionality without touching any code. If you want to use app embeds, you would need to upgrade to an Online Store 2.0 theme.
Short Instructions
To add a popup link to a menu item in Shopify, activate the Link Popup Quiz
in App Embeds
of your theme and then simply type the #quiz
as the link and save your changes.
When clicked, the default quiz for your store will open.
Note: If you've configured Shopify Markets, the default quiz for that specific market will be shown instead.
If you'd like a specific quiz to open instead of the default, check this section.
Step by step instructions:
- 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: Go to
Online Store > Theme > Customize
. Within the theme customization area, go toApp 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. -
In
Link Popup Quiz
section, you can adjust the popup options:Popup width (% of screen)
- Controls the width of the quiz popup window as a percentage of the user's screen width.Popup height (% of screen)
- Controls the height of the quiz popup window as a percentage of the user's screen height.Popup z-index
- Determines the stacking order of the quiz popup relative to other elements on the webpage.Quiz ID (optional)
- Enter a quiz ID to show a specific quiz. Leave blank to load the default.Manage app
- Opens the RevenueHunt dashboard with full settings and options. -
Click on
Save
to save the changes. - Navigate to Your Site's Menus Settings: From your Shopify dashboard, go to
Content > Menus
. Open the menu you wish to add the quiz link to. - Add a New Menu Item: Click on the
Add menu item
button. In the label field, type in a title for your quiz link, such as "Take Our Quiz". -
Insert the #quiz Code: Type
#quiz
into the link field and then click onSave
.Warning
Don't add the full URL into the
Link
filed. It should only contain the#quiz
text and not a full URL likehttp://yourwebsite.com/#quiz
.Note
When clicked, #quiz will open the default quiz for your store. If you've configured Shopify Markets, the default quiz for that specific market will be shown instead. If you'd like a specific quiz to open instead of the default, check this section.
-
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 > 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: Go to
Online Store > Theme > Customize
. Within the theme customization area, go toApp Embeds
. Look for the Link Popup Quiz Legacy 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 Menus Settings: From your Shopify dashboard, go to
Content > Menus
. Open the menu you wish to add the quiz link to. - Add a New Menu Item: Click on the
Add menu item
button. In the label 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 and then click on
Save
. - 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.
On a Specific Page¶
What's a Link Popup in menu that opens on a specific page?
It's a link that will open the quiz as a popup over a specific page only (or any page that carries the same template) when a link in the navigation menu is clicked.
Shopify 1.0 Theme Compatibility
Quizzes created with the đź’ŽBuilt for Shopify
version of the RevenueHunt app cannot be published on Shopify 1.0 themes. Shopify 1.0 themes do not support app embeds, which are required for the V2 integration. App embeds are a feature available in Online Store 2.0 themes, which allow you to add app functionality without touching any code. If you want to use app embeds, you would need to upgrade to an Online Store 2.0 theme.
Step by step instructions:
- Access Theme Customization: Log in to your Shopify admin dashboard. Navigate to
Online Store > Themes
. Find your current theme and click on theCustomize
button. - From the
Home page
menu on top, go toPages
and click on the page template you want to add the link popup to or create a new page template. - Once in the page template editor, click on
+ Add section
, click theApps
. From the list, pick theLink Popup Quiz
. -
In
Link Popup Quiz
section, you can adjust the popup options:Popup width (% of screen)
- Controls the width of the quiz popup window as a percentage of the user's screen width.Popup height (% of screen)
- Controls the height of the quiz popup window as a percentage of the user's screen height.Popup z-index
- Determines the stacking order of the quiz popup relative to other elements on the webpage.Quiz ID (optional)
- Enter a quiz ID to show a specific quiz. Leave blank to load the default.Manage app
- Opens the RevenueHunt dashboard with full settings and options. -
Click on
Save
to save the changes. - Navigate to Your Site's Menus Settings: From your Shopify dashboard, go to
Content > Menus
. Open the menu you wish to add the quiz link to. - Add a New Menu Item: Click on the
Add menu item
button. In the label field, type in a title for your quiz link, such as "Take Our Quiz". -
Insert the #quiz Code: Type
#quiz
into the link field and then click onSave
.Warning
Don't add the full URL into the
Link
filed. It should only contain the#quiz
text and not a full URL likehttp://yourwebsite.com/#quiz
.Note
When clicked, #quiz will open the default quiz for your store. If you've configured Shopify Markets, the default quiz for that specific market will be shown instead. If you'd like a specific quiz to open instead of the default, check this section.
-
Save Your Changes: Don't forget to click the
Save
button to apply the changes to your navigation menu. From now on the quiz link in the menu will only open the quiz as a popup over the page that carries the same template. - Remember to apply the new page template to the page you want to add the link popup to.
With the legacy version of the RevenueHunt app for Shopify the embed.js
script is automatically added to the whole website when you activate the Link Popup Quiz
in App Embeds
of your theme. Therefore, the link popup will open over any page in your store and there's no automatic way to open it over a specific page only.
Add the embed.js to a specific page
Your developer can, however, add the following embed.js
to a cusotm liquid or HTML element of a specific page template to open the quiz as a popup over that page only.
Without it, the quiz won't be loaded on your website.
- Add the following embed.js script to a specific page template in your store. 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. - 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 to a specific page template in your store. 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 to a specific page template in your store. 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 to a specific page template in your store. 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¶
On Home Page¶
What's a Link Popup that opens via a button on every page?
It's a link that will open the quiz as a popup over every page in your store when a button is clicked.
Shopify 1.0 Theme Compatibility
Quizzes created with the đź’ŽBuilt for Shopify
version of the RevenueHunt app cannot be published on Shopify 1.0 themes. Shopify 1.0 themes do not support app embeds, which are required for the V2 integration. App embeds are a feature available in Online Store 2.0 themes, which allow you to add app functionality without touching any code. If you want to use app embeds, you would need to upgrade to an Online Store 2.0 theme.
Short Instructions
To add a popup link to a button in Shopify, activate the Link Popup Quiz
in App Embeds
of your theme and then simply type the #quiz
as the link and save your changes.
When clicked, the default quiz for your store will open.
Note: If you've configured Shopify Markets, the default quiz for that specific market will be shown instead.
If you'd like a specific quiz to open instead of the default, check this section.
Step by step instructions:
- 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: Go to
Online Store > Theme > Customize
. Within the theme customization area, go toApp 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. Type
#quiz
in the appropriate link field.Warning
Don't add the full URL into the
Link
filed. It should only contain the#quiz
text and not a full URL likehttp://yourwebsite.com/#quiz
.When clicked, the default quiz for your store will open. If you've configured Shopify Markets, the default quiz for that specific market will be shown instead.
-
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 > 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: Go to
Online Store > Theme > Customize
. Within the theme customization area, go toApp Embeds
. Look for the Link Popup Quiz Legacy 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.
On a Specific Page¶
What's a Link Popup that opens via a button on a specific page?
It's a link that will open the quiz as a popup over a specific page (only) when a button is clicked.
Shopify 1.0 Theme Compatibility
Quizzes created with the đź’ŽBuilt for Shopify
version of the RevenueHunt app cannot be published on Shopify 1.0 themes. Shopify 1.0 themes do not support app embeds, which are required for the V2 integration. App embeds are a feature available in Online Store 2.0 themes, which allow you to add app functionality without touching any code. If you want to use app embeds, you would need to upgrade to an Online Store 2.0 theme.
Step by step instructions:
- Access Theme Customization: Log in to your Shopify admin dashboard. Navigate to
Online Store > Themes
. Find your current theme and click on theCustomize
button. - From the
Home page
menu on top, go toPages
and click on the page template you want to add the link popup to or create a new page template. - Once in the page template editor, click on
+ Add section
, click theApps
. From the list, pick theLink Popup Quiz
. -
In
Link Popup Quiz
section, you can adjust the popup options:Popup width (% of screen)
- Controls the width of the quiz popup window as a percentage of the user's screen width.Popup height (% of screen)
- Controls the height of the quiz popup window as a percentage of the user's screen height.Popup z-index
- Determines the stacking order of the quiz popup relative to other elements on the webpage.Quiz ID (optional)
- Enter a quiz ID to show a specific quiz. Leave blank to load the default.Manage app
- Opens the RevenueHunt dashboard with full settings and options. -
Click on
Save
to save the changes. - 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. Type
#quiz
in the appropriate link field.Warning
Don't add the full URL into the
Link
filed. It should only contain the#quiz
text and not a full URL likehttp://yourwebsite.com/#quiz
.Note
When clicked,
#quiz
will open the default quiz for your store. If you've configured Shopify Markets, the default quiz for that specific market will be shown instead. If you'd like a specific quiz to open instead of the default, check this section. -
Save Changes: Make sure to save your changes by clicking on the "Save" button. From now on, whenever someone clicks on the button on this page or any other page that uses this template, a quiz popup will open.
- Remember to apply the new page template to the page you want to add the link popup to.
With the legacy version of the RevenueHunt app for Shopify the embed.js
script is automatically added to the whole website when you activate the Link Popup Quiz
in App Embeds
of your theme. Therefore, the link popup will open over any page in your store and there's no automatic way to open it over a specific page only.
Add the embed.js to a specific page
Your developer can, however, add the following embed.js
to a cusotm liquid or HTML element of a specific page template to open the quiz as a popup over that page only.
Without it, the quiz won't be loaded on your website.
- Add the following embed.js script to a specific page template in your store. 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 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 to a specific page template in your store. 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 to a specific page template in your store. 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 to a specific page template in your store. 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.
FAQs¶
Open a Specific Quiz¶
By default when you use #quiz
as the link, the default quiz for your store will open.
Note
If you've configured Shopify Markets, the default quiz for that specific market will be shown instead.
If instead you want to open a specific quiz, you need to add a Quiz ID in the Quiz ID (optional)
field in the Link Popup Quiz settings
in the theme editor.
Quiz ID
To find your Quiz ID, go to the Dashboard, find the quiz you want to open. Then, click on the ...
three dots next to the quiz and select "Copy Quiz ID".
Keep in mind that the Quiz ID is case-sensitive.
To open a specific quiz, just add the Quiz ID to the link like this #quiz-QUIZID
.
For example, https://yourstore.myshopify.com/#quiz-123
can open one quiz, while https://yourstore.myshopify.com/#quiz-456
can open another.
Quiz ID
To find your Quiz ID, go to the Dashboard, find the quiz you want to open. Then, click on the ...
three dots next to the quiz and select "Copy Quiz ID".
Keep in mind that the Quiz ID is case-sensitive.
To open a specific quiz, just add the Quiz ID to the link like this #quiz-QUIZID
.
For example, https://yourstore.myshopify.com/#quiz-123
can open one quiz, while https://yourstore.myshopify.com/#quiz-456
can open another.
Quiz ID
To find your Quiz ID, go to the Dashboard, find the quiz you want to open. Then, click on the ...
three dots next to the quiz and select "Copy Quiz ID".
Keep in mind that the Quiz ID is case-sensitive.
To open a specific quiz, just add the Quiz ID to the link like this #quiz-QUIZID
.
For example, https://yourstore.myshopify.com/#quiz-123
can open one quiz, while https://yourstore.myshopify.com/#quiz-456
can open another.
Quiz ID
To find your Quiz ID, go to the Dashboard, find the quiz you want to open. Then, click on the ...
three dots next to the quiz and select "Copy Quiz ID".
Keep in mind that the Quiz ID is case-sensitive.
To open a specific quiz, just add the Quiz ID to the link like this #quiz-QUIZID
.
For example, https://yourstore.myshopify.com/#quiz-123
can open one quiz, while https://yourstore.myshopify.com/#quiz-456
can open another.
Quiz ID
To find your Quiz ID, go to the Dashboard, find the quiz you want to open. Then, click on the ...
three dots next to the quiz and select "Copy Quiz ID".
Keep in mind that the Quiz ID is case-sensitive.
To open a specific quiz, just add the Quiz ID to the link like this #quiz-QUIZID
.
For example, https://yourstore.myshopify.com/#quiz-123
can open one quiz, while https://yourstore.myshopify.com/#quiz-456
can open another.
Quiz ID
To find your Quiz ID, go to the Dashboard, find the quiz you want to open. Then, click on the ...
three dots next to the quiz and select "Copy Quiz ID".
Keep in mind that the Quiz ID is case-sensitive.
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 can be fixed either from the app settings or from your website's theme.
The z-index determines the order of elements on the page. If the quiz popup is behind your website header or the X
closing button is not visible, you can try to change the z-index configuration option in the app settings.
Here is how to change the z-index configuration option in the app settings:
- Go to your Shopify admin dashboard and navigate to
Online Store > Themes > Customize
. - Within theme customization, go to
App Embeds
and find theLink Popup Quiz
settings. - Look for the z-index setting and increase the value (try with 1000 first, if that doesn't work, try 10000).
- Save your changes.
Note
Setting the z-index too high might hide other elements like chat buttons. The ideal setting will depend on your specific theme's configuration.
If adjusting the z-index setting doesn't solve the issue, try to publish the quiz inline with a page instead. Check the instructions here.
If the Quiz Popup displays behind your website header or the X
closing button is not visible, try these solutions:
- 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.
If the Quiz Popup displays behind your website header or the X
closing button is not visible, try these solutions:
- 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 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.
If the Quiz Popup displays behind your website header or the X
closing button is not visible, try these solutions:
- 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. 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.
If the Quiz Popup displays behind your website header or the X
closing button is not visible, try these solutions:
- 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. 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.
If the Quiz Popup displays behind your website header or the X
closing button is not visible, try these solutions:
- 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. 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.
Linking to Multiple Quizzes¶
In some cases, you might want to have links to different quizzes on the same page. This section explains how to set up multiple quiz links for different platforms.
With the đź’ŽBuilt for Shopify
version of the RevenueHunt app, you can link to specific quizzes by using the format #quiz-QUIZID
instead of just #quiz
.
- Find Your Quiz ID: Go to the dashboard and locate the quiz you want to link to.
- Copy the Quiz ID: Click the
...
three dots next to the quiz and select "Copy Quiz ID."
-
Create Your Link: Use the format
#quiz-QUIZID
for your link. For example, if your quiz ID is "DmHLGj", your link would be#quiz-DmHLGj
. -
Add the Link: Follow the same steps as described earlier for adding a link to a menu item or button, but use your specific quiz link instead of just
#quiz
.
Example use cases:
- Different quizzes for different product categories (e.g., "#quiz-ABC123" for skincare quiz, "#quiz-XYZ789" for makeup quiz)
- A/B testing different quiz versions
- Seasonal or promotional quizzes alongside your main quiz
Example
https://yourstore.myshopify.com/#quiz-123
can open one quiz, while https://yourstore.myshopify.com/#quiz-456
can open another.
To find your Quiz ID, go to the dashboard and identify a quiz. Click on the ...
and copy the ID.
Warning
Don't add the full URL into the Link
filed. It should only contain the #quiz-QUIZID
text and not a full URL like http://yourwebsite.com/#quiz-QUIZID
.
For Shopify (V1), you can link to specific quizzes by creating different popup links for each quiz.
- Go to the
Share
section for each quiz. - Navigate to
Link > Show Instructions for legacy themes
. - Click on
Get the code
to copy the unique link for that specific quiz. - Add each unique link to different menu items, buttons, or page elements.
For WooCommerce, each quiz has its own unique link code:
For Magento, each quiz has its own unique link code:
For BigCommerce, each quiz has its own unique link code:
For standalone implementations, each quiz has its own unique link code:
The quiz you are looking for does not exist¶
Shopify 1.0 Theme Compatibility
Quizzes created with the đź’ŽBuilt for Shopify
version of the RevenueHunt app cannot be published on Shopify 1.0 themes. Shopify 1.0 themes do not support app embeds, which are required for the V2 integration. App embeds are a feature available in Online Store 2.0 themes, which allow you to add app functionality without touching any code. If you want to use app embeds, you would need to upgrade to an Online Store 2.0 theme.
If you see the error message "The quiz you are looking for does not exist" when trying to link to a quiz, follow these steps:
-
Ensure that you have activated the
Link Popup Quiz
in the Online Store > Theme > Customize >App Embeds
section and not the the legacyLink Popup Quiz Legacy
.If a wrong link popup is activated, you will see the error message "The quiz you are looking for does not exist" when trying to link to a V2 quiz.
To solve this simply deactivate the
Link Popup Legacy
and activate theLink Popup Quiz
one. Then, save the changes. -
Verify that the link is correctly formatted. Ensure that the link you've added to your menu or a button is correctly formatted and it follows the format
#quiz
.
If you see the error message "The quiz you are looking for does not exist" when trying to link to a quiz, follow these steps:
- Go back to the Quiz Builder and ensure that the quiz has been published with the top right
Publish
button. - Go to Quiz Settings and copy the Quiz ID. Then in Shopify, go back to Online Store > Themes > Customize and under the
App Embeds
section active theLink Popup Quiz
. - Check the Quiz Link. Ensure that the link you've added to your menu or a button is correctly formatted and it follows the format
#quiz-QUIZID
. Where the Quiz ID is the ID you've copied from the Quiz Settings. Note: the Quiz ID is case-sensitive. - Save your changes and refresh the page.
If you see the error message "The quiz you are looking for does not exist" when trying to link to a quiz, follow these steps:
- Ensure that the quiz is published and active. Go to the Quiz Builder and ensure that the quiz has been published with the top right
Publish
button. - Check that the quiz ID is correct. Go to the Quiz Settings and copy the Quiz ID.
- Verify that the link is correctly formatted. Ensure that the link you've added to your menu or a button is correctly formatted and it follows the format
#quiz-QUIZID
. Where the Quiz ID is the ID you've copied from the Quiz Settings. Note: the Quiz ID is case-sensitive.
If you see the error message "The quiz you are looking for does not exist" when trying to link to a quiz, follow these steps:
- Ensure that the quiz is published and active. Go to the Quiz Builder and ensure that the quiz has been published with the top right
Publish
button. - Check that the quiz ID is correct. Go to the Quiz Settings and copy the Quiz ID.
- Verify that the link is correctly formatted. Ensure that the link you've added to your menu or a button is correctly formatted and it follows the format
#quiz-QUIZID
. Where the Quiz ID is the ID you've copied from the Quiz Settings. Note: the Quiz ID is case-sensitive.
If you see the error message "The quiz you are looking for does not exist" when trying to link to a quiz, follow these steps:
- Ensure that the quiz is published and active. Go to the Quiz Builder and ensure that the quiz has been published with the top right
Publish
button. - Check that the quiz ID is correct. Go to the Quiz Settings and copy the Quiz ID.
- Verify that the link is correctly formatted. Ensure that the link you've added to your menu or a button is correctly formatted and it follows the format
#quiz-QUIZID
. Where the Quiz ID is the ID you've copied from the Quiz Settings. Note: the Quiz ID is case-sensitive.
If you see the error message "The quiz you are looking for does not exist" when trying to link to a quiz, follow these steps:
- Ensure you've added the following embed.js script to your website. Without it, the quiz won't be loaded on your website.
- Ensure that the quiz is published and active. Go to the Quiz Builder and ensure that the quiz has been published with the top right
Publish
button. - Check that the quiz ID is correct. Go to the Quiz Settings and copy the Quiz ID.
- Verify that the link is correctly formatted. Ensure that the link you've added to your menu or a button is correctly formatted and it follows the format
#quiz-QUIZID
. Where the Quiz ID is the ID you've copied from the Quiz Settings. Note: the Quiz ID is case-sensitive.
This article explains how to publish a quiz created with RevenueHunt Quizzes app as a Link Popup on your website.