> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.quizell.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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](https://help.quizell.com/en/article/how-to-embed-your-quiz-in-shopify-using-custom-liquid-1nqrg1n/) 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**.

![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_1uvh0g7.png =1000x657)

4. 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**

![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_1fd3ubp.png =1000x657)

### **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.

![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_eajoqi.png =1000x657)

3. In the top-right corner, click **Share**.

![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_1lwriy0.png =1000x657)

4. 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`.

5. Copy your **Quiz ID** to use in the next step.

![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_3k8mlp.png =1000x657)

### **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.

![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_19v2nmw.png =1000x657)

#### **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.

![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_6dvbgt.png =1000x657)

#### **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.

![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_pxg4fc.png =1000x657)

#### **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.

![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_c4285t.png =1000x657)

##### **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.

![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_1x8vkha.png =1000x657)

#### **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.


#### **Option 3: Popup Link Quiz**

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

![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_14a806p.png =1000x657)

4. Add your Quiz ID link to any clickable element on your site using this format: `#quizell-QuizID` 
**Example:** `#quizell-C6dDV9fNA4ZZXDX6yeVdMS1438700`

![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_xufmng.png =1000x657)


#### **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).

![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_1rmirco.png =1000x657)

#### **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.

![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_1jxphc0.png =1000x657)

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

![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_f7xh7s.png =1000x657)

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

![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_18292to.png =1000x657)

## **🎉 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:

* [How to Embed Your Quiz in Shopify Using Custom Liquid](https://help.quizell.com/en/article/how-to-embed-your-quiz-in-shopify-using-custom-liquid-1nqrg1n/)
* [How to Personalize Quiz Content Using User Data](https://help.quizell.com/en/article/how-to-personalize-quiz-content-using-user-data-in-quizell-15lev1j/)
* [How to Add Custom CSS to Your Quizzes](https://help.quizell.com/en/article/how-to-add-custom-css-to-your-quizzes-jolqpz/)
* [How to Add Custom JavaScript to Your Quizzes](https://help.quizell.com/en/article/how-to-add-custom-javascript-to-your-quiz-1wb6nxo/)
* [How to Connect Quizell with Klaviyo](https://help.quizell.com/en/article/how-to-connect-klaviyo-to-your-quizell-account-1xcif1i/)