Articles on: Embedding and Sharing

How to Embed Your Quiz in Shopify Using App Embeds

Introduction


Quizell makes it simple to display interactive quizzes on your Shopify store using App Embeds.


App Embeds let your quiz appear automatically across your store — as a popup, floating button, banner, or link-triggered modal. These options give you flexibility in how you engage customers and capture leads.


💡 Note: Since App Embeds load globally across your site, they can have a slight impact on performance. If you prefer to display your quiz only on specific pages, we recommend using the Custom Liquid Method instead.


Step-by-Step Setup Guide


Step 1: Access Your Shopify Theme Settings


  1. Log in to your Shopify account.
  2. Go to Online Store → Themes.
  3. Find the theme where you want to display your quiz and click Customize.



  1. In the theme editor, open the App Embeds section from the left-hand menu.


You’ll now see several Quizell embed options:


  • Auto Popup Quiz
  • Floating Side Quiz Button
  • Popup Link Quiz
  • Quiz Banner Button



Step 2: Locate and Copy Your Quiz ID


  1. In your Quizell dashboard, go to the Quizzes section.
  2. Open the quiz you want to embed.



  1. In the top-right corner, click Share.



  1. Under the preview link, find your Quiz ID — it’s the string of characters that appears after https://app.quizell.com/preview/

Example: https://app.quizell.com/preview/VbfxzU4yZrAYMPH5VzX3MS2011000 → Your Quiz ID is VbfxzU4yZrAYMPH5VzX3MS2011000.


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



Step 3: Configure Your Quiz Embed


Each embed option offers unique display styles and settings. You can activate one or several, depending on your store’s needs. To enable any of the options, toggle the respective button and click Save at the top-right corner of your screen.



Option 1: Auto Popup Quiz


Displays your quiz automatically as a popup after a set delay.


Setup Steps:


  1. Paste your Quiz ID in the Quiz ID field.
  2. (Optional) Add your Quiz ID with UTM parameters for personalized tracking.
  3. Adjust the settings:


  • Show on Devices: Choose whether to display on desktop, mobile, or both.
  • Condition: Select how the popup triggers (e.g., auto-trigger after X seconds).
  • Popup Delay (seconds): Set when the quiz should appear (e.g., 20 seconds).
  • How often to show: Choose Always or limit frequency for returning visitors.
  • Full Screen Quiz: Toggle on for an immersive experience.
  • Close Icon Color: Customize the close button color.
  • Quiz Height (px): Adjust quiz height to match your layout.



Option 2: Floating Side Quiz Button


Adds a floating button that visitors can click anytime to open the quiz.


Setup Steps:


  1. Paste your Quiz ID in the Quiz ID field.
  2. (Optional) Add your Quiz ID with UTM parameters.
  3. Adjust your quiz display options:


  • Show on Devices: Choose where to display (Desktop, Mobile, or Both).
  • Full Screen Quiz: Toggle on if you want the quiz to take up the full screen.
  • Quiz Height (px): Set the height (e.g., 540px) to fit your page layout.
  • Quiz Close Icon Color: Choose your preferred color for the close icon.



Button Text or Icon Design


You can design your floating button as either text-based or icon/image-based, depending on your branding and design preference.


1. Text Button Type


Choose this option if you want a simple button with text (e.g., “Take the Quiz”).


Customization Options:


  • Button Text: Enter your preferred label (e.g., “Quizell Quiz” or “Find Your Match”).
  • Button Height (px): Adjust the button’s height.
  • Button Position: Choose where it appears (Bottom Right, Bottom Left, Center Right, or Center Left).
  • Button Background Color: Pick a background color (use HEX code or the color picker).
  • Button Text Color: Choose a text color that ensures readability.
  • Button Corner Radius (px): Adjust rounding for softer or sharper edges.
  • Button Close Background Color: Customize the color of the close button background.
  • Button Close Background Transparency (%): Adjust transparency to blend with your design.
  • Button Close Icon Color: Choose the color of the “X” close icon.
  • Button Close Corner Radius (px): Adjust corner rounding for the close button.



2. Icon/Image Button Type


Choose this option if you prefer to use an icon or custom image instead of text.


Customization Options:


  • Button Image: Upload your own image or choose from free image options in the library.
  • Button Height (px): Set the button height to control size.
  • Button Position: Select where to display it on the page (e.g., Bottom Right).
  • Button Close Background Color: Customize the close button’s background color.
  • Button Close Background Transparency (%): Adjust transparency.
  • Button Close Icon Color: Set the close icon color.
  • Button Close Corner Radius (px): Refine the close button’s shape.



Tips for Best Results


💡 Keep it subtle but visible: Use colors that contrast slightly with your site background for better visibility.

💡 Mobile-friendly: Test the position on both desktop and mobile to ensure it doesn’t overlap key site elements.

💡 Consistent branding: Match the button color and text with your brand palette for a seamless experience.




Triggers your quiz when a user clicks a specific link or button on your store.


Setup Steps:


  1. Paste your Quiz ID in the Quiz ID field.
  2. (Optional) Add your Quiz ID with UTM parameters.
  3. Adjust display settings like Full Screen Quiz, Close Icon Color, and Quiz Height.



  1. Add your Quiz ID link to any clickable element on your site using this format: #quizell-QuizID

Example: #quizell-C6dDV9fNA4ZZXDX6yeVdMS1438700




Option 4: Quiz Banner Button


Displays a banner (or card) with an image and call-to-action button that opens your quiz.


Main Settings


These options define how and where the banner appears on your site.


  1. Quiz ID: Paste your Quiz ID from your Quizell dashboard.
  2. Quiz ID with UTM: (Optional) Add your Quiz ID with UTM parameters to track quiz sessions and personalize results.
  3. Show on Devices: Choose where the banner should appear — Desktop, Mobile, or Both.
  4. Quiz Close Icon Color: Pick a color for the close icon using HEX or the color picker.
  5. Full Screen Quiz: Toggle on to display your quiz in full-screen mode when opened.
  6. Quiz Height (px): Adjust the height of the quiz popup (e.g., 540px).



Design Settings


These options let you customize the banner’s look, animation, and style to match your brand.


Banner Design:


  • Banner Position: Choose where the banner appears on the screen (Bottom Left or Bottom Right).
  • Banner Animation: Select the animation effect for how the banner enters (e.g., Bottom up).
  • Banner Delay (in seconds): Set how long after page load the banner appears (e.g., 10 seconds).
  • How Often to Show: Decide how frequently it should appear — Always or only for new visitors.
  • Background Color: Customize the banner background color using HEX or the color picker.
  • Background Color Transparency (%): Adjust transparency for a lighter or more opaque look.
  • Banner Corner Radius (px): Round the banner’s corners for a smoother appearance.



Close Button Styling


  • Banner Close Background Color: Set the background color for the close icon.
  • Banner Close Background Color Transparency (%): Adjust how transparent the close icon’s background appears.
  • Banner Close Icon Color: Choose the color of the close icon itself.



Banner Content


  • Banner Image: Upload your own image or choose from the built-in Explore free images library.
  • Button Text: Customize your call-to-action (e.g., “Start Quiz” or “Find Your Match”).
  • Button Background Color: Choose a background color for your banner button.
  • Button Text Color: Pick a color that contrasts with the background for clear readability.
  • Button Corner Radius (px): Adjust how rounded the button’s edges are.



🎉 That’s It!


You’ve successfully embedded your Quizell quiz using Shopify App Embeds!


With multiple display options — from automatic popups to subtle floating buttons — you can create a quiz experience that fits your store’s design and goals perfectly.


Tips for Best Results


💡 Choose One Display Type per Page: Too many embeds at once may feel overwhelming to visitors.


📊 Track Performance: Use UTM parameters or your analytics dashboard to monitor engagement and conversions.


📱 Test on All Devices: Ensure your quiz looks and behaves correctly across desktop and mobile.


What’s Next?


Enhance your quiz experience further:




Updated on: 14/10/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!