Skip to content

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.

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.

how to publish link popup built for shopify revenuehunt app

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:

  1. Access Theme Customization: Log in to your Shopify admin dashboard. Navigate to Online Store > Themes. Find your current theme and click on the Customize button.
  2. Activate App Embeds: Go to Online Store > Theme > Customize. 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 the embed.js script to your site, enabling quiz links to load in an iframe popup. how to publish quiz link popup app embeds

  3. In Link Popup Quiz section, you can adjust the popup options:

    manual_shopifyV2_quizbuilder_share_publish_linkpopup_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.

  4. Click on Save to save the changes.

  5. 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. how to publish link popup built for shopify revenuehunt app menu
  6. 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".

  7. Insert the #quiz Code: Type #quiz into the link field and then click on Save. how to publish link popup built for shopify revenuehunt app

    Warning

    Don't add the full URL into the Link filed. It should only contain the #quiz text and not a full URL like http://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.

  8. Save Your Changes: Don't forget to click the Save button to apply the changes to your navigation menu.

  1. Obtain the Popup Link Code: Go to the Share section of the app, then to Link > Show Instructions for legacy themes. Click on Get the code to copy the link provided.
  2. Access Theme Customization: Log in to your Shopify admin dashboard. Navigate to Online Store > Themes. Find your current theme and click on the Customize button.
  3. Activate App Embeds: Go to Online Store > Theme > Customize. Within the theme customization area, go to App Embeds. Look for the Link Popup Quiz Legacy option and toggle it on. This action will automatically add the embed.js script to your site, enabling quiz links to load in an iframe popup. how to publish quiz link popup app embeds
  4. 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. how to publish link popup built for shopify revenuehunt app menu
  5. 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".
  6. Insert the Popup Link Code: Paste the previously copied code into the link field and then click on Save. how to publish link popup built for shopify revenuehunt app
  7. Save Your Changes: Don't forget to click the Save button to apply the changes to your navigation menu.
  1. Obtain the Popup Link Code: Go to the Share section of the app, then to Link.
  2. Edit the Popup Options and click on Get the code to copy the link provided.
  3. Go to the Appearance tab and open the Menus.
  4. Pick a menu and add a Custom Link. Paste the copied link into the URL section and edit the link text, for example, you can call it "Coffee Quiz". how to publish quiz woo link-popup menu
  5. Make sure to save the changes with the Save Menu button.
  1. Add the following embed.js script before the </head> close tag in the header. 
    <script src="https://admin.revenuehunt.com/embed.js" async></script>
    Without it, the quiz won't be loaded on your website.
  2. Obtain the Popup Link Code: Go to the Share section of the app, then to Link.
  3. Edit the Popup Options and click on Get the code to copy the link provided.
  4. 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.
  5. Remember to save the changes.
  1. Add the following embed.js script before the </head> close tag in the header. 
    <script src="https://admin.revenuehunt.com/embed.js" async></script>
    Without it, the quiz won't be loaded on your website.
  2. Obtain the Popup Link Code: Go to the Share section of the app, then to Link.
  3. Edit the Popup Options and click on Get the code to copy the link provided.
  4. Navigate to your Storefront > Web Pages menu and click Create a Web Page.
  5. Under Page Type select that This Page Will Link to Another website or document.
  6. Under Web Page Details use the Quiz Name as Page Name then paste the link copied from the app in the Link field.
  7. 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.
  8. Remember to save the changes with Save & Exit.
  1. Add the following embed.js script before the </head> close tag in the header. 
    <script src="https://admin.revenuehunt.com/embed.js" async></script>
    Without it, the quiz won't be loaded on your website.
  2. Obtain the Popup Link Code: Go to the Share section of the app, then to Link.
  3. Edit the Popup Options and click on Get the code to copy the link provided.
  4. Navigate to your eCommerce platform Navigation Menu settings and add a new item. Paste the link copied from the app.
  5. 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:

  1. Access Theme Customization: Log in to your Shopify admin dashboard. Navigate to Online Store > Themes. Find your current theme and click on the Customize button.
  2. From the Home page menu on top, go to Pages and click on the page template you want to add the link popup to or create a new page template.
  3. Once in the page template editor, click on + Add section, click the Apps. From the list, pick the Link Popup Quiz. how to publish quiz link popup app embeds

  4. In Link Popup Quiz section, you can adjust the popup options:

    manual_shopifyV2_quizbuilder_share_publish_linkpopup_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.

  5. Click on Save to save the changes.

  6. 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. how to publish link popup built for shopify revenuehunt app menu
  7. 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".

  8. Insert the #quiz Code: Type #quiz into the link field and then click on Save. how to publish link popup built for shopify revenuehunt app

    Warning

    Don't add the full URL into the Link filed. It should only contain the #quiz text and not a full URL like http://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.

  9. 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.

  10. 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.

<script src="https://admin.revenuehunt.com/embed.js" async></script>

Without it, the quiz won't be loaded on your website.

  1. Add the following embed.js script to a specific page template in your store. 
    <script src="https://admin.revenuehunt.com/embed.js" async></script>
    Without it, the quiz won't be loaded on your website.
  2. Obtain the Popup Link Code: Go to the Share section of the app, then to Link.
  3. Edit the Popup Options and click on Get the code to copy the link provided.
  4. Go to the Appearance tab and open the Menus.
  5. Pick a menu and add a Custom Link. Paste the copied link into the URL section and edit the link text, for example, you can call it "Coffee Quiz". how to publish quiz woo link-popup menu
  6. Make sure to save the changes with the Save Menu button.
  1. Add the following embed.js script to a specific page template in your store. 
    <script src="https://admin.revenuehunt.com/embed.js" async></script>
    Without it, the quiz won't be loaded on your website.
  2. Obtain the Popup Link Code: Go to the Share section of the app, then to Link.
  3. Edit the Popup Options and click on Get the code to copy the link provided.
  4. 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.
  5. Remember to save the changes.
  1. Add the following embed.js script to a specific page template in your store. 
    <script src="https://admin.revenuehunt.com/embed.js" async></script>
    Without it, the quiz won't be loaded on your website.
  2. Obtain the Popup Link Code: Go to the Share section of the app, then to Link.
  3. Edit the Popup Options and click on Get the code to copy the link provided.
  4. Navigate to your Storefront > Web Pages menu and click Create a Web Page.
  5. Under Page Type select that This Page Will Link to Another website or document.
  6. Under Web Page Details use the Quiz Name as Page Name then paste the link copied from the app in the Link field.
  7. 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.
  8. Remember to save the changes with Save & Exit.
  1. Add the following embed.js script to a specific page template in your store. 
    <script src="https://admin.revenuehunt.com/embed.js" async></script>
    Without it, the quiz won't be loaded on your website.
  2. Obtain the Popup Link Code: Go to the Share section of the app, then to Link.
  3. Edit the Popup Options and click on Get the code to copy the link provided.
  4. Navigate to your eCommerce platform Navigation Menu settings and add a new item. Paste the link copied from the app.
  5. Remember to save the changes.

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.

how to publish link popup built for shopify revenuehunt app

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:

  1. Access Theme Customization: Log in to your Shopify admin dashboard. Navigate to Online Store > Themes. Find your current theme and click on the Customize button.
  2. Activate App Embeds: Go to Online Store > Theme > Customize. 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 the embed.js script to your site, enabling quiz links to load in an iframe popup. how to publish quiz link popup app embeds
  3. Navigate to Themes: Go to Online Store > Themes.
  4. Enter Theme Customization: Find the theme you wish to edit and click on the "Customize" button.
  5. Add a New Section: Click on "Add section" and select "Image banner" (or a similar option) from the list.
  6. Insert a Button Block: Within the "Image banner" section, add a new block and choose the "Button" option.

  7. Paste the Quiz Link: Click on the newly added button block to edit its settings. Type #quiz in the appropriate link field. how to publish link popup built for shopify revenuehunt app button

    Warning

    Don't add the full URL into the Link filed. It should only contain the #quiz text and not a full URL like http://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.

  8. Save Changes: Make sure to save your changes by clicking on the "Save" button.

  1. Obtain the Popup Link Code: Go to the Share section of the app, then to Link > Show Instructions for legacy themes. Click on Get the code to copy the link provided.
  2. Access Theme Customization: Log in to your Shopify admin dashboard. Navigate to Online Store > Themes. Find your current theme and click on the Customize button.
  3. Activate App Embeds: Go to Online Store > Theme > Customize. Within the theme customization area, go to App Embeds. Look for the Link Popup Quiz Legacy option and toggle it on. This action will automatically add the embed.js script to your site, enabling quiz links to load in an iframe popup. how to publish quiz link popup app embeds
  4. Navigate to Themes: Go to Online Store > Themes.
  5. Enter Theme Customization: Find the theme you wish to edit and click on the "Customize" button.
  6. Add a New Section: Click on "Add section" and select "Image banner" (or a similar option) from the list.
  7. Insert a Button Block: Within the "Image banner" section, add a new block and choose the "Button" option.
  8. 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.
  9. Save Changes: Make sure to save your changes by clicking on the "Save" button.
  1. Obtain the Popup Link Code: Go to the Share section of the app, then to Link.
  2. Edit the Popup Options and click on Get the code to copy the link provided.
  3. In WordPress, go to Pages and find the page that corresponds to the Front Page. Click 'Edit'.
  4. In the WordPress Page Builder add a Buttons block. This will automatically add one button to your page builder.
  5. Edit the button text and settings, for example, write "Take the Quiz".
  6. Then, add a Link to the element. Under Search or type URL paste the code copied from the app. Accept with enter.
  7. Remember to save the changes and update the live page.
  8. From now on, whenever someone clicks on the button, a quiz popup will open.
  1. Add the following embed.js script before the </head> close tag in the header. 
    <script src="https://admin.revenuehunt.com/embed.js" async></script>
    Without it, the quiz won't be loaded on your website.
  2. Obtain the Popup Link Code: Go to the Share section of the app, then to Link.
  3. Edit the Popup Options and click on Get the code to copy the link provided.
  4. In your Magento dashbaord go to Content > Blocks. Click Add New Block.
  5. Edit the Block Title, Identifier and Store View and click Edit with Page Builder.
  6. Select Elements > Rows and drag a row into the canvas.
  7. Next open Buttons. Drag the button onto the Row.
  8. Edit the Button Text and click the gear icon to open button settings.
  9. Under Button Link paste the link copied from the app.
  10. Remember to save the changes.
  11. From now on, whenever someone clicks on the button, a quiz popup will open.
  1. Add the following embed.js script before the </head> close tag in the header. 
    <script src="https://admin.revenuehunt.com/embed.js" async></script>
    Without it, the quiz won't be loaded on your website.
  2. Obtain the Popup Link Code: Go to the Share section of the app, then to Link.
  3. Edit the Popup Options and click on Get the code to copy the link provided.
  4. In BigCommerce, go to Storefront > Web Pages. Find the main page.
  5. 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. 
    <a class="button" href="#quiz-QUIZID">Take the Quiz</a>
  6. Save the changes.
  7. From now on, whenever someone clicks on the button, a quiz popup will open.
  1. Add the following embed.js script before the </head> close tag in the header. 
    <script src="https://admin.revenuehunt.com/embed.js" async></script>
    Without it, the quiz won't be loaded on your website.
  2. Obtain the Popup Link Code: Go to the Share section of the app, then to Link.
  3. Edit the Popup Options and click on Get the code to copy the link provided.
  4. In your store customization options find the main page.
  5. 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.
  6. (alternatively) Find an HTML element and add the following HTML code. Remember to replace the #quiz-QUIZID with the link copied from the app. 
    <a class="button" href="#quiz-QUIZID">Take the Quiz</a>
  7. Save the changes.
  8. 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:

  1. Access Theme Customization: Log in to your Shopify admin dashboard. Navigate to Online Store > Themes. Find your current theme and click on the Customize button.
  2. From the Home page menu on top, go to Pages and click on the page template you want to add the link popup to or create a new page template.
  3. Once in the page template editor, click on + Add section, click the Apps. From the list, pick the Link Popup Quiz. how to publish quiz link popup app embeds

  4. In Link Popup Quiz section, you can adjust the popup options:

    manual_shopifyV2_quizbuilder_share_publish_linkpopup_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.

  5. Click on Save to save the changes.

  6. Add a New Section: Click on "Add section" and select "Image banner" (or a similar option) from the list.
  7. Insert a Button Block: Within the "Image banner" section, add a new block and choose the "Button" option.

  8. Paste the Quiz Link: Click on the newly added button block to edit its settings. Type #quiz in the appropriate link field. how to publish link popup built for shopify revenuehunt app button

    Warning

    Don't add the full URL into the Link filed. It should only contain the #quiz text and not a full URL like http://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.

  9. 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.

  10. 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.

<script src="https://admin.revenuehunt.com/embed.js" async></script>

Without it, the quiz won't be loaded on your website.

  1. Add the following embed.js script to a specific page template in your store. 
    <script src="https://admin.revenuehunt.com/embed.js" async></script>
    Without it, the quiz won't be loaded on your website.
  2. Obtain the Popup Link Code: Go to the Share section of the app, then to Link.
  3. Edit the Popup Options and click on Get the code to copy the link provided.
  4. In WordPress, go to Pages and find the page that corresponds to the Front Page. Click 'Edit'.
  5. In the WordPress Page Builder add a Buttons block. This will automatically add one button to your page builder.
  6. Edit the button text and settings, for example, write "Take the Quiz".
  7. Then, add a Link to the element. Under Search or type URL paste the code copied from the app. Accept with enter.
  8. Remember to save the changes and update the live page.
  9. From now on, whenever someone clicks on the button, a quiz popup will open.
  1. Add the following embed.js script to a specific page template in your store. 
    <script src="https://admin.revenuehunt.com/embed.js" async></script>
    Without it, the quiz won't be loaded on your website.
  2. Obtain the Popup Link Code: Go to the Share section of the app, then to Link.
  3. Edit the Popup Options and click on Get the code to copy the link provided.
  4. In your Magento dashbaord go to Content > Blocks. Click Add New Block.
  5. Edit the Block Title, Identifier and Store View and click Edit with Page Builder.
  6. Select Elements > Rows and drag a row into the canvas.
  7. Next open Buttons. Drag the button onto the Row.
  8. Edit the Button Text and click the gear icon to open button settings.
  9. Under Button Link paste the link copied from the app.
  10. Remember to save the changes.
  11. From now on, whenever someone clicks on the button, a quiz popup will open.
  1. Add the following embed.js script to a specific page template in your store. 
    <script src="https://admin.revenuehunt.com/embed.js" async></script>
    Without it, the quiz won't be loaded on your website.
  2. Obtain the Popup Link Code: Go to the Share section of the app, then to Link.
  3. Edit the Popup Options and click on Get the code to copy the link provided.
  4. In BigCommerce, go to Storefront > Web Pages. Find the main page.
  5. 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. 
    <a class="button" href="#quiz-QUIZID">Take the Quiz</a>
  6. Save the changes.
  7. From now on, whenever someone clicks on the button, a quiz popup will open.
  1. Add the following embed.js script to a specific page template in your store. 
    <script src="https://admin.revenuehunt.com/embed.js" async></script>
    Without it, the quiz won't be loaded on your website.
  2. Obtain the Popup Link Code: Go to the Share section of the app, then to Link.
  3. Edit the Popup Options and click on Get the code to copy the link provided.
  4. In your store customization options find the main page.
  5. 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.
  6. (alternatively) Find an HTML element and add the following HTML code. Remember to replace the #quiz-QUIZID with the link copied from the app. 
    <a class="button" href="#quiz-QUIZID">Take the Quiz</a>
  7. Save the changes.
  8. 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.

manual_shopifyV2_quizbuilder_share_publish_linkpopup_options

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.

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:

  1. Go to your Shopify admin dashboard and navigate to Online Store > Themes > Customize.
  2. Within theme customization, go to App Embeds and find the Link Popup Quiz settings.
  3. Look for the z-index setting and increase the value (try with 1000 first, if that doesn't work, try 10000).
  4. Save your changes.

z-index setting in V2 Link Popup

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 the X 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: 
    <style>
.rh-widget span {
top: 150px !important;
}
</style>
  • 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 the X 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: 
    <style>
.rh-widget span {
top: 150px !important;
}
</style>
  • 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 the X 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: 
    <style>
.rh-widget span {
top: 150px !important;
}
</style>
  • 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 the X 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: 
    <style>
.rh-widget span {
top: 150px !important;
}
</style>
  • 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 the X 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: 
    <style>
.rh-widget span {
top: 150px !important;
}
</style>
  • 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.

  1. Find Your Quiz ID: Go to the dashboard and locate the quiz you want to link to.
  2. Copy the Quiz ID: Click the ... three dots next to the quiz and select "Copy Quiz ID."

manual_shopifyV2_quizmanagementoptions

  1. 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.

  2. 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.

  1. Go to the Share section for each quiz.
  2. Navigate to Link > Show Instructions for legacy themes.
  3. Click on Get the code to copy the unique link for that specific quiz.
  4. Add each unique link to different menu items, buttons, or page elements.

For WooCommerce, each quiz has its own unique link code:

  1. Go to the Share section for each quiz you want to link to.
  2. Navigate to Link and edit the Popup Options.
  3. Click on Get the code to copy the unique link for each quiz.
  4. Add these links to different menu items, buttons, or page elements as needed.

For Magento, each quiz has its own unique link code:

  1. Go to the Share section for each quiz you want to link to.
  2. Navigate to Link and edit the Popup Options.
  3. Click on Get the code to copy the unique link for each quiz.
  4. Add each unique link to different menu items, buttons, or page elements.

For BigCommerce, each quiz has its own unique link code:

  1. Go to the Share section for each quiz you want to link to.
  2. Navigate to Link and edit the Popup Options.
  3. Click on Get the code to copy the unique link for each quiz.
  4. Add these links to different web pages, menu items, buttons, or other elements as needed.

For standalone implementations, each quiz has its own unique link code:

  1. Go to the Share section for each quiz you want to link to.
  2. Navigate to Link and edit the Popup Options.
  3. Click on Get the code to copy the unique link for each quiz.
  4. Add these links to different menu items, buttons, or page elements as needed.

The quiz you are looking for does not exist

docs/images/how_to_publish_shipifyV2_V1publisherror.png

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:

  1. Ensure that you have activated the Link Popup Quiz in the Online Store > Theme > Customize > App Embeds section and not the the legacy Link Popup Quiz Legacy. docs/images/how_to_publish_shipifyV2_V1publisherrorlinkpopup.png

    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 the Link Popup Quiz one. Then, save the changes.

  2. 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:

  1. Go back to the Quiz Builder and ensure that the quiz has been published with the top right Publish button.
  2. 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 the Link Popup Quiz.
  3. 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.
  4. 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:

  1. 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.
  2. Check that the quiz ID is correct. Go to the Quiz Settings and copy the Quiz ID.
  3. 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:

  1. 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.
  2. Check that the quiz ID is correct. Go to the Quiz Settings and copy the Quiz ID.
  3. 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:

  1. 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.
  2. Check that the quiz ID is correct. Go to the Quiz Settings and copy the Quiz ID.
  3. 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:

  1. Ensure you've added the following embed.js script to your website. Without it, the quiz won't be loaded on your website. 
    <script src="https://admin.revenuehunt.com/embed.js" async></script>
  2. 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.
  3. Check that the quiz ID is correct. Go to the Quiz Settings and copy the Quiz ID.
  4. 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.