Select Page

 

Pop Quiz User Guide

Getting Started

Pop Quiz

Pop Quiz is a Shopify app that makes it easier than ever to create product recommendation quizzes that engage and delight your customers.

Dashboard

This is the main page where you’ll see a list of all your quizzes, your monthly submission total, and links to create a new quiz, view analytics, or upgrade your account.

New Quiz

Create a new quiz

Analytics

Quiz submission results

 

Upgrade

Upgrade your account to the Pro Unlimited plan

 

Help

Access documentation and support

 

Monthly Submissions

Here you’ll find the number of submissions you have for the month

Active Quizzes

List of active quizzes that are ready to be displayed on your site

Unpublished Quizzes

A list of quizzes that you’re still working on or that you’ve archived

Create a New Quiz

Getting Started

  • Click the New Quiz link in the top menu
  • A new quiz will load with two sample questions and the results page
  • Start by clicking the word “Untitled” at the top of the quiz and give your quiz a new name

Editing Questions

  • Click the words “Enter a new question” and enter your question text
  • Note the text formatting toolbar that appears when you click in the text box. This toolbar gives you access to several formatting tools such as font size, color, alignment, spell check, and more. The same fonts used in your Shopify site will be used by the quiz automatically

  • Click the gear icon in the top right corner of the slide to edit the question properties
    • Question Properties
      • Admin Label
        • You can use this field to give your question a short reference name. This will only be visible to you. You’ll see how this can be helpful as you continue to build out the quiz. 
      • Allow Multiple Answers?
        • Checking this box will allow users to select more than one answer
      • Add background image
        • Choose an image to be used as the background for the question
      • Add background color
        • Instead of an image, you can also set a background color for the question

Editing Answers

  • Click the words Enter the Answer and enter your answer text

  • By default, the quiz will load with two answers. Click the Add Another Answer button to add additional answers
  • Once you’ve created your answers, click the Save button
  • Now you can begin editing your Answer Settings

Answer Settings - Single Answer Allowed

  • Click the gear icon in the top right corner of the answer you want to edit. This will open up the Answer Settings window.


Answer Action

  • Next Question
    • This is the default answer action. In the case of regular questions that only allow for one selected answer, this will submit the answer and advance the user to the next question automatically
  • Question #
    • You can choose to direct the user to a specific question. This branching logic is very powerful as it allows you to tailor the quiz to each user depending on their answers. Note that this option displays a dropdown list of existing questions, so this must be set up after all your questions have been created. By default, the dropdown will display the question text which may be tough to read if it’s a long question. However, if you’ve created an Admin Label for the question, this will be displayed instead and will be much easier to read.

  • Go to URL
    • In some cases, you may want to have a user exit the quiz and be directed to another page such as a product landing page, a customer support page, or even a page containing a different quiz

 

Product Selection

  • Products can be selected Manually, by Tags, or by Collection
  • Products, Tags, and Collections are all loaded directly from your Shopify store automatically so there’s no setup required on your part

  • Manual
    • Any product that you manually associate with an answer will appear in the final product recommendations if the user selects that answer. This won’t be affected by how the user responds to any other questions.

  • By Product Tag
    • Selecting products based on tags allows you to quickly filter your products
    • For example, let’s say your products are all tagged with either “menswear” or “womenswear”. You could have one answer associated with the “menswear” tag and one associated with “womenswear”. Now, depending on the user’s response, the final product recommendations would be filtered to only show products that have the selected tag.
    • As the user selects more answers with tags, the list of recommended products will continue to filter down because the products must match with ALL the selected tags
    • For example, if the user selects answers tagged with “menswear”, “red”, and “casual”, only products that are tagged with all three tags will appear in the recommended products list

  • By Collection
    • Any collection you’ve set up in Shopify can be associated with an answer
    • Just like manually added products, any collection that you manually associate with an answer will appear in the final product recommendations if the user selects that answer. This won’t be affected by how the user responds to any other questions

 

Add an image

  • Click the Choose File button to access images on your computer
  • Image Size – Set the image size. Note that Full Size will not adjust your image size at all. It will be displayed at its normal size
  • Answer Text Placement
    • On the Image
      • This will display the answer text over top of the image
    • Above or Below the Image
    • Hide the Answer Text
      • Only the answer image will be shown

 

Background Color

  • Instead of displaying an image, you can choose to use a background color
  • You can use the color picker or enter the hex code for custom colors

 

Border

  • Turn borders on or off for any or all sides of the question
  • You can also specify Border Style, Color, and Width
  • Border Radius
    • This determines how the corners of your box will look. A zero will give you a sharp corner. The higher the number you enter, the more rounded your corners will be

  • Click Save to go back to the Question screen
  • Repeat this process for each answer

Answer Settings – Multiple Answers Allowed

  • When you choose Multiple Answers Allowed in the Question settings, you’ll see a new button appear on the question screen that reads Multiple Answer Results

  • For multiple answer questions, you will set the answer display properties just as you normally would by clicking on the gear icon in the top right corner of each answer

  • Note that the Answer Actions can’t be edited. We’ll set those up next on the Multiple Answer Results screen

 

Multiple Answer Results

  • Make sure you’ve saved your answers before modifying the multiple answer settings
  • By default, the results screen will load with two dropdown menus that display your answers

  • Set up a multiple answer combination by selecting two different answers

  • If you want to add more answers to the combination, click the blue + button to the right
  • Even though this question allows for multiple answers, we also need to set answer actions for single answers. To do that, simply choose an answer in the first dropdown, then choose the “None” option in the second dropdown

  • Once your answer combination is complete, click the gear icon to set the Answer Actions and set the recommended products
  • Create as many combinations as you like by clicking the Add Combination button

  • When complete, click Done to return to the question screen

Answer Layout

  • Below the question screen, you’ll see two blue icons. One will stack the answers. The other will lay them out in a grid formation

  • Click the Add Another Question button to add as many new questions as you need

  • You can click and drag to re-order your questions
  • Note that the Results Page slide can’t be moved as it must always appear at the end of the quiz
  • Click on the Duplicate icon to quickly create duplicate questions for faster editing
  • Click the X icon to delete questions

Using Images

Pop Quiz allows you to use background images for the entire quiz, specific questions, and specific answers.

It is critical that your images are sized and compressed correctly in order for the quiz to work properly. Very often, stock photography or images that you’ve taken with your phone or camera are much too large to be used in the app. While the image can be resized within the app, this only affects how the image is displayed. It doesn’t change the file size of the image which can often be several megabytes. This extra file size will cause the quiz to load very slowly and you may even run into problems uploading the image into the quiz.

To fix this issue, here’s a link to a great, free online tool that will allow you to resize, crop, rotate, and compress your images – https://resizeimage.net/

Most of the instructions are pretty self explanatory, but here are a few guidelines related to Pop Quiz.

For #4 – Resize your image, here are the widths (the height will be set automatically) to use, depending on where you’re using them:

  • For Quiz or Question background: 1000px
  • For Answer background (depending on which size you choose):
    • Thumbnail – 75px
    • Small – 120px
    • Medium – 240px
    • Large – 480px

Remember that you may need to play around with the size and cropping a bit in order to get your image to display just the way you want. It depends on the shape of your image and which area of the image you want to display.

For #6 – Select the output image format, a general rule of thumb is to use “jpg” for photographs of people and products and use “gif” or “png” for things like logos, icons, buttons, and other graphics that have relatively flat colors.

For #7 – Optimize your image, choose something around 75% image quality. You may be tempted to push this up to 100% because you want your images to look as good as possible, but that’s completely unnecessary and not good practice. Image compression software is very good at reducing the size of your files while maintaining the quality. It’s very unlikely that you’ll be able to tell the difference between the original and the compressed version, but the file size will be a fraction of the original which will make your quiz load quickly and make your customers happy!

Finally, click the Resize Image button, then click the Download Image link in the panel that opens up.

Custom Styling

  • For advanced users who are familiar with CSS, we have an option to add your own custom CSS code for styling. Simply click the Custom Style Code button and paste your CSS code

Results Page

  • Most of the content on the results page will be automatically generated by Pop Quiz, but you can edit the main title and a text block that will both appear above the recommended products

Final Steps

  • Once you’ve completed setting up all your questions, click Save and then Finish
  • You’ll now see several options for customizing the quiz

  • Embed Code
    • Click the Copy button to copy the code. Now, from the Shopify admin menu, click on Online Store > Pages and either create a new page or open up an existing page

  • On the page editor screen, click the “code view” icon and then right click and choose Paste or press CTRL+V to paste the embed code

  • Save the page
  • Note that your quiz won’t appear on the live site until it’s published
  • Quiz Size
    • Small – this will limit the width of the quiz to 600px
    • Full – this will set the width to 100% of the content area of your page
  • Custom Width
    • Here you can enter a width, in pixels, you’d like the quiz to be. Note that regardless of how wide you set it, the quiz can only be as wide as the content area of your page. If you’d like the quiz to be wider than the content area, you’ll need to place the embed code directly into a custom page template that you’ve created. Here’s some more information about how to create custom page templates in Shopify.
  • Scroll or Fit Content?
    • Scroll – this will keep the quiz height consistent and will display a scrollbar to the user if required
    • Fit – this will allow the quiz height to adjust automatically so that content is always visible
  • Quiz Border, Background Image, Background Color
    • These settings work the same way as the settings for questions and answers
  • Once you’re happy with the settings, click Save. If everything is ok, you’ll see a green message stating that the quiz has been saved successfully.
  • Now, click on the Dashboard link and you’ll see your new quiz listed under the Unpublished Quizzes heading
  • Click Edit to make further changes to the quiz
  • Click the Preview button to test out the quiz before going live
  • Click the Publish button to make the quiz active. Remember that the quiz will only be visible on your site once you’ve added the embed code to one of your pages
  • Click Delete to delete the quiz. You’ll see a confirmation popup before the quiz gets deleted

Analytics

Getting Started

  • Click the Analytics link in the top menu
  • On the next page, the Select Quiz dropdown will show you a list of all quizzes, both Published and Unpublished
  • The Filter By dropdown allows you to quickly choose a date range or, if you prefer, you can instead choose Custom Range and enter your own Start and End dates
  • You’ll now see a list of your questions along with answer and response totals

Request a Feature or Open a Ticket

We’re working hard to make Pop Quiz even better and we’d love your input! Please send us feature requests and we’ll do our best to add them to a future version.

If you’re already using Pop Quiz and you’re having trouble with something, please send us the details and we’ll get back to you right away!

14 + 9 =