Shopify Integration Guide for QuizyPilot

Add Quizzes to Shopify in Minutes

QuizyPilot installs directly into Shopify as a Theme App Block. Once connected, you can place your quiz anywhere in the Shopify theme editor — without editing code.

---

Step 1 — Connect Your Shopify Store

1. Open your QuizyPilot dashboard.
2. Go to Integrations → Shopify.
3. Enter your Shopify store URL.

Example:

yourstore.myshopify.com

4. Click Connect.
5. You’ll be redirected to Shopify.
6. Review the requested permissions and click Install.
7. After installation, you’ll automatically return to QuizyPilot.

Your store is now connected successfully.

---

Permissions Requested

QuizyPilot only requests the permissions required to power quiz functionality.

• read_products — Used for product recommendation quizzes
• read_themes — Detects and integrates with your active theme
• write_theme_code — Installs the QuizyPilot app block automatically

---

What Happens Automatically?

As soon as the app is installed, QuizyPilot automatically adds the quiz app block to your active Shopify theme.

You do not need to:

• Edit Liquid files
• Paste code manually
• Modify your theme structure

---

Step 2 — Find Your Quiz Preview Key

Every quiz includes a unique Preview Key. This key connects the Shopify block to your quiz.

To Find Your Preview Key

1. Open a quiz inside the QuizyPilot dashboard.
2. Click Embed & Share.
3. Copy the Preview Key displayed at the top.

Example:

S7l4Y4

Keep this key ready — you’ll paste it into the Shopify theme editor in the next step.

---

Step 3 — Add the Quiz Block in Shopify

Open the Theme Editor

1. In Shopify admin go to:

Online Store → Themes

2. Click Customize on your active theme.

---

Add the Quiz Block

1. Navigate to the page where you want to display the quiz.

Supported pages:

• Homepage
• Product page
• Collection page
• Landing page
• Blog page

2. In the left sidebar click:

• Add section
• or Add block

(depends on your theme)

3. Search for and select:

QuizyPilot Widget

4. The block will appear on the page.

---

Configure the Block

Click the QuizyPilot block to open its settings panel.

Paste Your Preview Key

Paste your copied Preview Key into the:

Quiz ID

field.

Optional Settings

• Background Color — Matches the quiz with your store design
• Min Height — Prevents layout shift while loading

Recommended height range:

200px – 800px

5. Click Save.

Your quiz is now live on your Shopify store.

---

Where Can I Add the Quiz Block?

The QuizyPilot app block can be added anywhere your theme supports app blocks.

Most modern Shopify themes support this, including:

• Dawn
• Sense
• Craft
• Refresh
• Studio

Supported Locations

• Homepage
• Product pages
• Collection pages
• Landing pages
• Blog pages
• Custom templates

Available locations may vary depending on your Shopify theme.

---

Customising Quiz Appearance

The quiz automatically inherits the styling of the section it’s placed in.

You can customise additional settings directly from the block settings panel.

Available Settings

• Quiz ID — Connects the block to your quiz
• Background Color — Changes the quiz background
• Min Height — Prevents page jumping during load

---

Advanced Styling

For advanced customization such as:

• Button colors
• Fonts
• Popup mode
• Layout styling
• Spacing

Use:

Embed & Share → Create Custom Embed Config

Then copy the generated Preview Key into the Shopify block settings.

---

If the Quiz Block Is Missing

The block is installed automatically during app installation. If you cannot find it:

Reinstall the Extension

1. Go to:

Online Store → Themes → Customize

2. Open the three-dot menu on your theme.
3. Click:

Edit default theme content

4. If the block still does not appear:

• Return to QuizyPilot
• Open:

Integrations → Shopify

5. Click:

Reinstall Extension

This safely re-installs the app block without affecting existing content.

---

Alternative Method — Manual Embed Code

If you prefer editing your Shopify theme manually, you can use a direct embed snippet.

Generate the Embed Code

1. In QuizyPilot open:

Embed & Share

2. Choose an embed type.
3. Click Save.
4. Copy the generated embed snippet.

---

Add It to Shopify

1. In Shopify go to:

Online Store → Themes → Edit code

2. Open the template or section file where you want the quiz.

Example:

sections/main-product.liquid

3. Paste the embed code where the quiz should appear.
4. Click Save.

---

Example Embed Snippet

<div class="quizypilot-embed"
  data-embed="YOUR_EMBED_ID"
  data-width="100%"
  data-height="600">
</div>

<script async src="https://app.quizypilot.com/embed.js"></script>
![image](https://images.unsplash.com/photo-1778159113854-42eb9df3f3b8?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)