Publish the quiz on your store

You are here:
< All Topics

Once you’ve finished building your quiz, linking your product collections to each response and customizing the quiz’s design to match your store’s look & feel, you’ll be ready to go live.

Click on the “Share” link on the top-right corner of the quiz builder. This should open a view where you can choose among our different display options and preview how the quiz will be embedded on your website:

  • Link Popup – a link that will open the quiz as a popup over your page
  • Embedded Inline – quiz embedded inline with a page
  • Automatic Popup – a quiz popup appears after X seconds
  • External Link – direct link to the quiz for social media

Select the best option for you, click on “get the code”, copy the code and follow the instructions to insert it into your store.

There are multiple ways your quiz can be added to your store:

Link Popup

The quiz will be displayed as a popup when your customer clicks on a navigation menu link or a link on any page or blog post.

First, copy the code from the app.

Then, in your store, navigate to Online Store > Navigation and open the menu where you want to link the quiz from:

Then click on the “add menu item” button:

Add the link text (eg: “Take our Quiz”) and paste the code below:

Don’t forget to click on the “Save” button so the changes are reflected in your store.

Embedded Inline

The quiz will be displayed inline inside the content of any page or blog post. This is the ideal display mode if you want to create a dedicated landing page for your quiz in order to drive traffic via paid ads to it.

Inline Quiz on a new page

First, copy the code from the app.

Then, in your store, navigate to Online Store > Pages and open the page where you want to insert the quiz:

Click on the “Show HTML” button and paste the code in the code editor:

To avoid any issues you should embed only one quiz per page.

If you’re using a stand-alone (not Shopify or WooCommerce) version of the Product Recommendation Quiz you’ll have to embed.js code to your website for the generated quiz code to work. Try adding this code before the </head> closing tag in your website’s theme or on the page that you would like to display your quiz:

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

Inline Quiz on the home page

You’ll need to use the inline embed mode to display the quiz as a section on your Homepage.

The quiz should work correctly with any verified Shopify theme. However, we’ve observed issues with the Supply theme. If you’re using the Supply theme, please try publishing the quiz on an extra test page first or contact support.

Click on the “Share” link on the top-right corner of the quiz builder. 

Select the “inline” mode and copy the HTML code in the black box.

In your Shopify store’s dashboard, navigate to Online Store > Themes and click on the “Customize” button.

Click on the “Add section” button and select “Custom content”:

Remove all the default content sections and add a “Custom HTML” section and open it:

Now paste the code you copied from our app in the “HTML” input and click on “Save”.

 

Inline quiz on a specific collection page

Option 1 – add the quiz to the collection description

You can embed the quiz directly under the collection name, like this:

This is done by adding the code generated from the Share > Inline to the collection description HTML field (</>):
Option 2 – add a new collection theme
Collection/product pages are created automatically by Shopify. To embed the quiz onto a different position on a specific collection page your developer would have to first create a new collection theme containing the quiz code. Then, apply it to that specific page in the collection Theme template:

Fix the size of the Inline Quiz

There’s a hack that forces the max-height of the Inline quiz to adapt to the question size. This may result in a bit of a “jumpy” behavior. If you’d like to avoid this, you can fix the size of the inline quiz. To do this, select the width and the height of the quiz and activate the “Fixed size” setting:

Then generate a code and publish it on your page.

Keep in mind that fixing the quiz size will also fix the size of the results page.

Prevent autoscroll in Inline Quiz

To prevent autoscrolling in a quiz published inline with the page, add the following line to the code generated from the app:

data-autoscroll="false"

For example:

<div class="rh-widget rh-inline" data-url="https://admin.revenuehunt.com/public/quiz/dbqHqN" data-autoscroll="false" style="margin: 10px auto; width: 100%; height: 600px; display: flex;"></div>

Automatic Popup

The quiz will be displayed as a popup when someone spends more than X seconds on that page.

Automatic popup on a specific page in your store

To show an automatic popup on a specific page in your store, first, generate the automatic popup code from the app’s Share -> automatic section.

Navigate to the Online Store -> Pages and open the selected page. Click on the “Show HTML” button and paste the code into the code editor:

Remember to save the changes.

Automatic popup on all pages in your store

If you want the popup to appear on ALL pages in your store, you’ll have to add the code to your theme’s source code.

Warning: the following actions might break your store's theme, so make sure that if you don't know for sure what you're doing, hire a developer to do this for you.

First, copy the code from the app. Then, in Shopify, navigate to Online Store > Themes and then click on Actions > Edit Code. This will open the theme’s source code editor:

Each theme is different so the files and source code will vary from theme to theme. You’ll have to find the </body> closing tag and paste the code right before it. This can usually be found in the theme.liquid file or the footer.liquid file. After pasting the code, click on the “Save” button:

Automatic popup on the main page in your store

To show an automatic popup on a specific page in your store, first, generate the automatic popup code from the app’s Share -> automatic section.

Navigate to the Online Store -> Themes and click the “Customize” button. 

Add a Custom content section to your main page and edit it to your liking.

Within that section add a new Custom HTML block:

Open the Custom HTML block and paste the popup code copied from the app:

Make sure to save the changes. 

Show popup quiz only when Exit intent

You can choose to show the automatic popup only if the customer is turning away from your site (exit-intent). To active it, select the “Exit intent” option in the popup settings and generate a new code.

Show automatic popup more than once per session

By default, the automatic popup is shown only once per customer session. That is because popups are very intrusive and can make for a negative customer experience. However, if you want to show the popup every time a customer visit’s a page untill they complete the quiz, you can add the following parameter:

data-aggressive="true"

to the automatic popup code generated from the app.

For example:

<div id="auto-popup" data-timeout="5" data-exit-intent="true" data-aggressive="true" data-quiz-id="dbqHqN" style="display: none;"></div>

External Quiz Link (for social media)

To get an external quiz link for social media (Twitter, Instagram, Facebook) navigate to the Share tab in the app and select the External publishing option. Adjust the popup width and height in the settings and generate a code by clicking on the “Get the code” button.

 

Home Page Quiz

If you want to insert the quiz in your Home Page, check out this article.

 

Table of Contents

Install the app and get started today

Add a Product Recommendation Quiz to your store and start offering a personalized shopping experience