> ## 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 Custom Liquid

## **Introduction**

Embedding your Quizell quiz using **Custom Liquid** in Shopify gives you full flexibility to integrate your quiz seamlessly into your store. This method allows you to:

* Add scripts and custom HTML
* Edit Liquid code for advanced control
* Apply custom CSS for a perfect visual match

Follow this guide to embed and customize your Quizell quiz in Shopify using the **Custom Liquid** method.

## **Step-by-Step Guide**

### **Step 1: Access Your Shopify Theme Settings**

1. Log in to your **Shopify** account.
2. In the left-hand menu, go to **Online Store → Themes**.

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

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

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

4. In the theme editor, use the dropdown at the top to select the page where you’d like the quiz to appear.

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

5. From the left-side panel, click **Add section**, then search for **Custom Liquid**.

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

6. Click to add the **Custom Liquid** section.
* You’ll see two boxes on the right — one for your **Liquid/HTML code** and another for **Custom CSS**.

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

### **Step 2: Get Your Quiz Embed Code from Quizell**

1. In your **Quizell dashboard**, open the quiz you want to embed.

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

2. At the top-right of your screen, click **Share**.

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

3. Under the **Embed on a Webpage** tab, choose your preferred display type:

* **Full Page** – The quiz takes over the entire page (best for dedicated quiz pages).
* **In Page** – Embeds the quiz directly within an existing page section.
* **Popup** – Opens the quiz in a modal when triggered by user action.
* **Greet Bar** – A small banner at the top or bottom of your site with a CTA to open the quiz.
* **Floating Button** – A clickable button that launches the quiz anytime.

4. Customize the display settings if needed.
5. Click **Copy Code** to copy the generated HTML embed snippet.

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

### **Step 3: Embed the Quiz Code in Shopify**

1. Go back to your Shopify theme editor.
2. In the **Custom Liquid** section, paste the **Quizell embed code** you copied.

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

3. (Optional) Add **Custom CSS** in the second box to adjust styling and layout so the quiz matches your store’s branding.
4. Click **Save** to apply your changes.

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

## **🎉 That’s it!**

Your Quizell quiz is now embedded in your Shopify store using **Custom Liquid**. You now have complete control to style, position, and integrate the quiz in a way that enhances your store’s user experience.

## **What’s Next?**

Explore more ways to customize and promote your quiz:

* [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 Customize Your Quiz Loader](https://help.quizell.com/en/article/how-to-customize-your-loader-10jfate/)