When you click on the Publish (or Save & Publish) button in the Quiz Editor, a popup will appear that includes all the quiz publishing settings. Visual Quiz Builder supports many different ways to publish a quiz, jump to the section below that’s relevant to you.

Fullscreen - Separate Shopify page

When you choose to publish your quiz as a “Separate Shopify page” and grant Visual Quiz the access to create a page on your store, Visual Quiz Builder automatically creates a page with the title - “VQB <quiz name>” - in your store.

Publishing the quiz as a “Separate Shopify page” does not require the app to be embedded at the theme level. Although our app has been certified by Shopify to not have an impact on your store’s speed, some merchants still prefer to minimize code installed by apps at the theme level. A quiz published as a page also lends itself easily to A/B testing with free tools such as Google Optimize. For these reasons, page quizzes are one of the more popular quiz formats among our stores.

One consideration of implementing a page quiz is that the quiz taker is re-directed to a new page and leaves their flow prior to starting the quiz.

<aside> 💡 By default, a page quiz created by Visual Quiz Builder will not show the header and footer of your store. But this can easily be modified as discussed below. You can also opt to embed a Visual Quiz Builder quiz into any page you create in your store as discussed in the Embedded Mode section of this article.

</aside>

Once the quiz is published, you can go into the theme editor, find the quiz template (using the quiz number - #8572 in the above example) and remove the “{% layout none %}” tag from the template as illustrated in the following screenshots. The quiz will be rendered with the website header and footer.

Untitled

Untitled

Screen Shot 2023-03-10 at 4.25.39 PM.png

Fullscreen Pop-up

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ed92864b-f262-4020-bc03-14d97ae55ea1/image-20230201-072605.png

A full-screen pop-up quiz gives a full page effect but keeps the quiz taker on the original page from where they accessed the quiz. The quiz taker can easily return to their prior flow by clicking on “x” on the top right corner of the screen to close the pop-up. This mode will only work when the Visual Quiz Builder app is embedded. It is also a popular format among stores using Visual Quiz builder.

One consideration to using a pop-up quiz (fullscreen or partial screen) is that it doesn’t easily lend itself to A/B testing via a free tool such as Google Optimize.

To add the quiz as a full-screen pop-up, copy the hash from the publish popup and paste it into the link text box associated with a button or navigation menu in your store.

Untitled

Embedded