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:

Select the best option for you, click on “get the code”, copy the code and follow the instructions to insert it in 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.

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="" async></script>

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.

Automatic Popup

The quiz will be displayed as a popup when someone spends more than X seconds on that page. 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:

Show a 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.

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 better shopping experience