Articles on: Embedding and Sharing

How to Embed Your Quiz in Shopify Using App Embeds


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


  1. Log into your Shopify account.


  1. Navigate to the Online Store section.



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



  1. 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: Locate and Copy your Quiz ID


  1. Log into your Quizell account and go to the Quizzes section.
  2. Click on the quiz you want to embed to open it.


  1. From the left-hand menu, click Share.


  1. Under the preview link, locate the **Quiz ID - **it’s the string of characters that comes after https://app.quizell.com/preview/.


  1. Copy your unique Quiz ID to use in the next step.



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.


  1. Paste your Quiz ID in the designated field.


  1. 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.


  1. Paste your Quiz ID in the designated field.


  1. 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.



**


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:


  1. Paste your Quiz ID in the designated field.


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


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


  1. 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.



  1. 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.


  1. Paste your Quiz ID in the designated field.


  1. 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: 15/04/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!