Publish on Shopify store Homepage
To show the quiz on the home page you can either:
- embed the quiz inline with the homepage
- add an automatic popup that will show after X seconds
Embed quiz inline with the homepage
You’ll need to use the inline embed mode to display the quiz as a section on your Homepage.
The quiz should work correctly with any verified Shopify theme. However, we’ve observed issues with the Supply theme. If you’re using the Supply theme, please try publishing the quiz on an extra test page first or contact support.
Option 1: From Shopify Theme
In your Shopify store’s dashboard, navigate to Online Store > Themes and click on the “Customize” button.
Next select “+ Add Section“. Scroll down to Apps and search for Inline Quiz from Shop Quiz: Product Recommender. Add it to the section and open the settings by clicking on it.
A list of all the quizzes will be displayed as a placeholder. Pick the Quiz ID of the quiz you want to publish and copy it into the Quiz ID section. Wait for the quiz to be loaded.
Remember to save the changes.
In the Inline Quiz settings you can also adjust:
- the quiz height,
- disable the auto-scroll,
- fix the quiz height (this also fixes the height of the results page).
Option 2: Manual
Click on the “Share” link on the top-right corner of the quiz builder.
Select the “inline” mode and copy the HTML code in the black box.
In your Shopify store’s dashboard, navigate to Online Store > Themes and click on the “Customize” button.
Click on the “Add section” button and select “Custom content”:
Remove all the default content sections and add a “Custom HTML” or a “Custom liquid” section and open it:
Now paste the code you copied from our app in the “HTML” (or “Custom Liquid”) input and click on “Save”.
“Take the Quiz” Button
In your Shopify store’s dashboard, navigate to Online Store > Themes and click on the “Customize” button.
Add a new section called “Image banner” (or similar).
Add a Button block and paste the link to the quiz.
Remember to save the changes.
Not sure how to find your quiz popup link? Check this article.
Automatic popup on the main page in your store
Option 1: From Shopify Theme
Before you start, make sure to find and copy the Quiz ID of the quiz you want to publish. Here‘s how to find your Quiz ID.
Once you have the Quiz ID, in your Shopify store’s dashboard, navigate to Online Store > Themes and click on the “Customize” button.
Next, open the App Embeds section and click on the Automatic Popup Quiz.
Copy the Quiz ID into the input field. Then adjust the settings.
Once you’re ready, activate the automatic popup with the toggle and save the changes.
Remember that the automatic popup is shown only once per customer session.
Option 2: Manual
To show an automatic popup on a specific page in your store, first, generate the automatic popup code from the app’s Share -> Automatic section.
Navigate to the Online Store -> Themes and click the “Customize” button.
Add a Custom content section to your main page and edit it to your liking.
Within that section add a new Custom HTML block:
Open the Custom HTML block and paste the popup code copied from the app:
Make sure to save the changes.
Chat Icon Popup
Option 1: From Shopify Theme
Before you start, make sure to find and copy the Quiz ID of the quiz you want to publish. Here‘s how to find your Quiz ID.
Once you have the Quiz ID, in your Shopify store’s dashboard, navigate to Online Store > Themes and click on the “Customize” button.
Next, open the App Embeds section and click on the Chat Button Quiz.
Copy the Quiz ID into the filed and activate the Chat icon with the toggle.
You can adjust the chat icon settings. Remember to save the changes.
Option 2: Manual
To add a chat icon that will open a quiz popup on your website navigate to the Share tab in the app and select the Chat publishing option. Adjust the chat icon settings and generate a code by clicking on the “Get the code” button.
Copy the code.
Next, in your Shopify store’s dashboard, navigate to Online Store > Themes and click on the “Customize” button.
Click on the “Add section” button and select “Custom content”:
Remove all the default content sections and add a “Custom HTML” or a “Custom liquid” section and open it:
Now paste the code you copied from our app in the “HTML” (or “Custom Liquid”) input and click on “Save”.