Embedding a Quiz on Your Shopify Store
There are three ways to display a Quizify quiz on your Shopify store. The right method depends on where you want the quiz to appear and whether you want it to show inline on the page or open as a popup when clicked.
The One Prerequisite
For any display method to work, the Quizify app embed must be enabled in your Shopify theme. This loads the Quizify script on your storefront and is required regardless of which method you use.
See: Enabling the Quizify App Embed in Your Shopify Theme.
Method 1: App Block (Recommended for Inline Embedding)
The app block is the easiest way to add a quiz as a section on any page. No embed code or HTML is needed. In the Shopify Theme Editor, add the Quizify app block to a section, enter your quiz ID, and the quiz renders on the page.
Best for: Homepage, product pages, collection pages, or any page where you want the quiz to appear inline as part of the page layout.
To use this method, you need your quiz ID, which is found on the Publish page of your quiz editor (open the quiz editor and click the Publish tab).
See: Adding a Quiz Using the App Block
Method 2: Direct Link (Recommended for Menu and Button Triggers)
The direct link opens the quiz as a popup overlay when a customer clicks it. Paste the link as the URL of any menu item, button, or text link. No embed code needed.
The link format is:
#quizify-pop-YOUR_QUIZ_ID&size=fullsizeSize options: fullsize, medium, small.
Best for: Navigation menus, call-to-action buttons, or any link where you want clicking to open the quiz as a popup.
See: Opening a Quiz via a Link or Button
Method 3: Embed Code (for Manual HTML Placement)
Quizify also provides an HTML embed code that you can paste directly into a page content editor, a Custom Liquid or Custom HTML section in the theme editor, or a .liquid theme file. The embed code is an HTML snippet with a data-store-id attribute unique to your quiz.
Best for: Blog posts, standard Shopify pages (Online Store → Pages), or situations where the app block is not available or you need precise placement within a theme file.
The embed code looks like:
<style>.quizify{min-height:500px;position:relative}.quizify-loader{position:absolute;top:50%;left:50%;width:150px;height:5px;border-radius:20px;display:block!important;background:#ddd;transform:translate(-50%,-50%);overflow:hidden}.quizify-loader::before{content:"";display:block;height:100%;width:0;background:#000;animation:progress 10s linear infinite}@keyframes progress{100%{width:100%}}</style><div data-store-id="YOUR_STORE_ID" class="quizify"><div class="quizify-loader">Quiz Loading</div></div>Copy the embed code from the Quizify dashboard or quiz settings to get the correct data-store-id for your quiz.
Where Quizzes Can Be Displayed
Homepage — Inline via app block or embed code; or triggered from a hero button via direct link
Product pages — Inline via app block
Collection pages — Inline via app block
Custom pages — Inline via embed code in the page editor
Blog post pages — Inline via embed code in the blog post HTML editor
Navigation menu — As a popup trigger via direct link
Any button on the store — As a popup trigger via direct link
See the individual guides for each page type:
Adding a Quiz Using the App Block
Opening a Quiz via a Link or Button
Adding a Quiz to a Product Page
Adding a Quiz to Your Homepage
Adding a Quiz to a Collection Page