If you prefer, you can check out this information in video format.
This quiz display method is different from the STANDALONE link option because it is fully integrated with your store’s footer and header, basically being part of your store on its page.
This means that the theme CSS gets applied to the quiz page in this method, and any custom CSS from the Theme Editor will be applied to the quiz present on this page, making the design consistent throughout your store and quiz.
The page will automatically adjust its height, which has the benefit that, compared to adding the quiz on a dedicated page, you don’t have to create that custom page, embed the quiz, or add custom code to add the quiz to that specific quiz.
If you don’t want the quiz look to be affected by any custom CSS applied in the Theme Editor you may want to opt for using the STANDALONE link or EMBED your quiz option.
To better understand how this option can be used, below you can see some methods in which you can take users to your quiz using this display method:
1. Use a button to take customers to your IN-STORE quiz URL
1.1. Copy your quiz URL from the Publish page. Use Option 1 to include the footer, header and any other theme settings.
1.2. Go inside your store’s theme editor
1.3. Choose the button that you want to use to redirect your customers to the quiz. From the menu on the right-hand side change the button’s label and paste the copied quiz link in the Button Link input box.
Don’t forget to save your changes and make sure to test that it works as expected.
2. Adding the quiz as a nav menu element
This is probably one of the options that offers the most seamless navigation between the quiz and the rest of your store since the header and footer will be common.
2.1. From your Shopify Admin, head over to Content → Menus →Main menu. Here you will find a list of all the pages in your Main menu, such as the Homepage, Catalog, and Contact page.
2.2. At the bottom of the list, you will find the option to Add menu item. Clicking this will open will open a drop down section with the Label and Link you want to add. You can write a suggestive label such as “Try the Perfect Food Quiz” and paste the Quiz URL you copied under Link.
Head over to your store, give it a refresh and your new quiz page should appear as part of the Main menu. Click this and you’ll be redirected to your quiz.
3. Adding the Quiz Link to a text element
From your Shopify Admin, under Online Store, click customize your theme and go inside your Theme Editor. Once on the desired page, you can use the copied URL and connect it as a link in any element on the page that contains text.
