All Collections
Quizzes
Publishing Quizzes
Adding a Quiz to a Shopify Page
Adding a Quiz to a Shopify Page

What to do once you've created your quiz, and are ready to add it to your website

Mark Baek avatar
Written by Mark Baek
Updated over a week ago

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.

What you'll learn

The different methods of adding a quiz to a Shopify page.

Prerequisites

A fresh Shopify page is recommended for the method in this guide.

The embed code can be used in any environment that accepts HTML code however.


Finding the 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.

Did this answer your question?