Embedding your quiz with Shopify 2.0 app blocks
If you would prefer a video version of this tutorial, please follow this link or watch it below:
Please Note you can also redirect customers to your quiz using a button in your store, for more information on how to do this, please check out the following article.
Getting your Quiz Key
You’ll find your quiz key on the Publish page of your flow creator. You will need to copy this so that you can later paste it inside a PERFECT: Product Quiz Builder app block in your theme editor. Make sure to also Republish your quiz so that any changes that you’ve made get saved
Adding your quiz to your store
Once you’ve copied your quiz key, click Go To Theme Editor. By default, you will be redirected to your homepage, however, you can use this method to embed your quiz on any page in your store. From the top drop-down menu, you can select which page you’re interested in hosting your quiz.
For this tutorial, we want to position our quiz on the homepage underneath our featured collections. For this, we hover on the page in the area we want to place the quiz and click on Add Section.
This will open up a menu at the bottom of which you’ll find the Apps Section. From the list of apps, select PPF Quiz.
This will open up a menu bar on the right-hand side of the screen. Under the Quiz sub URL input box, paste the quiz key you previously copied and save your changes. You’re now able to preview your quiz inside the theme editor.
Making Final Adjustments
For different styles of quizzes, it might be more suitable to adjust the height from 1000px. We always recommend testing this change by going through each question on the quiz as it might only look good on the welcome page depending on the template used. We usually don’t advise changing the width of the quiz from 100%.
If you change your mind about the positioning, you can always drag and drop the app block from the left-hand side menu inside the editor.