Introduction

Quizell makes it easy to display interactive quizzes on your Shopify store using App embeds. App embeds allow your quiz to appear on every page of your website. However, note that this can slightly impact website speed since the quiz loads globally. If you prefer to display your quiz on a specific page, we recommend using the Custom Method instead.

Step-by-step Guide

Step 1: Access Your Shopify Theme Settings

Log into your Shopify account.

Navigate to the Online Store section.



Select the theme where you want to embed your quiz and click Customize.



In the theme customization panel, click the App embeds option in the left menu.



You’ll now see four embed options:

· Auto Popup Quiz

· Floating Side Quiz Button

· Popup Link Quiz

· Quiz Banner Button

More details about configuring these options are in Step 3, but first, let’s find your Quiz ID.

Step 2: Find your Quiz ID

Open your Quizell account.

Navigate to the Quizzes section and locate the quiz you want to embed.

Click the three dots next to your selected quiz and select Share from the menu.



In the Sharing section, select Embed on a webpage, also make sure you are in the Shopify section and not HTML.

Copy the Quiz ID displayed in the embed options.

Step 3: Embed your Quiz

To enable any of the options below, toggle the respective button and click Save at the top-right corner of your screen.

Option 1: Auto Popup Quiz

Displays an automatic popup with your quiz for visitors.

Paste your Quiz ID in the designated field.

Set the following parameters:

· Quiz ID with UTM: Add your Quiz ID with UTM parameters if needed for personalization or analytics.

· Popup Delay (in seconds): Specify how long after page load the popup appears (e.g., 0 for immediate, 5 for five seconds).

· Don’t show again the next: Set the number of days before the popup reappears for the same visitor.

· Quiz Height (px): Ensure the height matches your quiz settings for a better user experience.

Option 2: Floating Side Quiz Button

Adds a sticky button to the side of your visitor’s screen to access your quiz.

Paste your Quiz ID in the designated field.

Set the following parameters:

· Quiz ID with UTM: Add your Quiz ID with UTM parameters.

· Quiz Height (px): Ensure the height matches your quiz settings.

· Button Name: Set the button text.

· Button Position: Choose between Bottom Right, Bottom Left, Center Right, or Center Left.

· Button Background/Text Color: Customize colors using HEX codes or the color picker.

Option 3: Popup Link Quiz

Adds a link to specific buttons on your website to trigger your quiz popup.

Here’s how to paste your Quiz key on a button of your website:

Paste your Quiz ID in the designated field.

Format your Quiz key link as follows: #quizell-QuizID

Replace QuizID with your copied Quiz ID (e.g., #quizell-C6dDV9fNA4ZZXDX6yeVdMS1438700).

Add the Quiz key as a link to the button(s) you want to use as triggers. Don't forget to Save and test your changes.



Configure these parameters:

· Quiz ID with UTM: Add your Quiz ID with UTM parameters.

· Quiz Height (px): Ensure the height matches your quiz settings.

Option 4: Quiz Banner Button

Adds a sticky card with an image and button to the side of your visitor’s screen.

Paste your Quiz ID in the designated field.

Set the following parameters:

· Quiz ID with UTM: Add your Quiz ID with UTM parameters.

· Quiz Height (px): Ensure the height matches your quiz settings.

· Image: Upload/select an image or explore free images to use as the banner background.

· Button Name: Customize the button text.




With these options, you can display your quiz in various formats tailored to your store’s design and functionality.

Updated on: 11/12/2024