Overview

This guide will let you know how you can publish your quiz in a Shopify webpage.

This method can be generally applied to most methods that can accept and read HTML code. All you have to do is:

  1. Find your quiz embed code

  2. Create a new Shopify page

  3. Add your embed code in the HTML content box


Prerequisites

You'll need to have at least one quiz saved, as well as a fresh Shopify page ready.


Finding your quiz embed code

  1. Open your quiz in the quiz editor.

  2. Click on Save & publish in the top right.

  3. Click on Shopify page.

  4. Copy the text code provided for the "Page body" embed option.

The page body embed will be used for this guide, but a fullscreen option is available as well. The fullscreen quiz will cover the entire page that it's embedded in, so avoid using this option for any page with content besides the quiz.


Creating the page for a quiz

  1. In Shopify's admin dashboard, go to Sales channels > Online Store > Pages.

  2. Click on Add page.

  3. Add a title for the page.

  4. In the "Content" box, click on the "< >" icon to show an HTML content box instead.

  5. Paste your quiz embed code in the HTML box.

  6. Save your page.

Many Shopify themes will display the page title by default. Removing this will require editing the theme's page template.

The exact methods differ from theme to theme, but this guide provides a few examples of how to do this.

The page that contains your embedded quiz now doubles as the link to your quiz. Use this page to:

  • Link the quiz in your website navigation.

  • Link the quiz in ad traffic.

  • Present the quiz page in an on-brand way, such as linking a "shade finder" on a cosmetics store.


Frequently asked questions (FAQ)

What are the quiz height settings in a page embed used for?

By default, the content area of a quiz flexes with any changes in the customer's browser window or device screen size.

You have the option of choosing between two modes:

  • Match browser height: The quiz will adapt to the size of the user’s browser window. This is the recommended default option for desktop and mobile.

  • Custom height: Set custom heights (in pixels) for the quiz on mobile and / or desktop devices. This is a great idea if you use a background image on your quiz that you want to look the same across all devices.

Can I add the quiz somewhere besides a new Shopify page?

Yes, the quiz can be embedded in most input areas that will accept and read HTML code.

This enables a lot of flexibility in where exactly a quiz can be added.

How do I get rid of the page title?

Many Shopify themes will display the page title by default. Removing this will require editing the theme's page template.

Typically, this involves deleting just a small block of code.

The exact methods differ from theme to theme, but this guide provides a few examples of how to do this.


Have any questions? Send an email to [email protected] or use the support icon in the bottom right to chat with our team.

Did this answer your question?