Product Quiz

‘Optics Theme’ comes with a product recommendation quiz, a feature in which the customers answer a series of questions and they get products recommended based on the answers. When using our theme, you don’t have to install a quiz app.. All you have to do is create a page, use the quiz template, decide quiz questions & answers and match product tags and you are good to go.

How to Enable the Quiz

The theme has all the necessary sections and logic built in for the quiz. But we need to create a page for the quiz first.

1. In your admin panel, click on ‘Pages’ under ‘Online Store’.
2. Click on the ‘Add page’ button and create a new page. This page will be used only for quiz.
3. Give the title to the page. And the title should always be ‘Quiz’. No words more or less.
4. On the right side, you will see the ‘Theme template’ dropdown. Click on it and choose ‘product-quiz’.
5. Then, hit the ‘Save’ button. Your quiz page is live and you can now use the quiz.

How to Customize the Quiz

When you install the Optics theme, you will see the quiz already has quiz slides with questions and answers. If these questions & answers are enough for your store, you can start using the quiz. But if you want to customize the quiz, as in, change content, add or remove quiz slides, you can follow these steps:

Quiz Section in Homepage

From this section, the customers can visit the product recommendation quiz page. It’s available on the homepage and you can customize its content.

1. In your theme editor’s sidebar settings, you will see ‘Quiz’. Click on it to open up the related settings for this section.
2. From the settings, you can change image, heading, description and button label.
3. You can also change the button link. But the theme comes with the link pointed to the quiz page, so you don’t have to do anything to this setting.
4. Once you have made all the changes, hit the ‘Save’ button.

Quiz Page Sections

The quiz page is made up of various sections and you can customize them according to your requirements.

How to Open the Quiz Page

1. In your theme editor, at the top center, you will see the ‘Home page’ button. Click on it to open the dropdown and then click on ‘Pages’.
2. After that, click on the ‘product-quiz’ option. This will open the quiz page in your editor.

Main Quiz Section

This is the section you see by default when you visit the quiz page. It’s an unremovable and necessary section that should always be shown at the start of the quiz. The theme already keeps it at the front but the editor allows you to change its order and we highly recommend you not to change the order of this section.

1. Click on ‘Main quiz’ from the sidebar of your theme editor. This opens up all the settings available for this section.

   

2. Click on any of the fields and change the text to your preference. You can change heading, subheading, description and button label. You can slide up and down padding values for top and bottom of the section too.

3. Once you have made the changes, hit the ‘Save’ button.

Primary Quiz Slide

You get two types of quiz slides where you can add questions & answers. The first one is a primary quiz slide, whose blocks come with fields for main answer, image, additional details and then tag.

1. In your theme editor, click on any ‘Primary quiz slide’ section. This opens up the settings available for this section.

   

2. This is from where you can change the question for the quiz slide. Click on the ‘Question’ field and change it as needed.

   

3. To change the contents of the answer blocks inside the Primary Quiz Slide, click on any of the blocks.

4. The answer blocks just need content and tag settings to make quiz search possible.

   1. Click on the ‘Content’ field to provide the quiz answer.
   2. Click on the ‘Tag’ field to provide the product tag.
   3. Note that the tag you give here must match the tag you add in products. Based on these tags, products are recommended to the customers.

   

5. Once you’ve made necessary changes to the selected primary quiz slide, hit the ‘Save’ button.

6. The theme has pre-added blocks inside each quiz slide. You can add or remove the blocks as required. The upper limit for the blocks is 50, which is the number of blocks 1 section can hold as set by Shopify themselves.

Secondary Quiz Slide

Secondary quiz slide is the type whose blocks come with fields for main answer, image and then tag.

1. In your theme editor, click on any ‘Secondary quiz slide’ section. This opens up the settings available for this section.

   

2. This is from where you can change the question for the quiz slide. Click on the ‘Question’ field and change it as needed.

   

3. To change the contents of the answer blocks inside the Secondary Quiz Slide, click on any of the blocks.

   

4. The answer blocks just need content and tag settings to make quiz search possible.

   1. Click on the ‘Content’ field to provide the quiz answer.
   2. Click on the ‘Tag’ field to provide the product tag.
   3. Note: The product that has similar tags as added in the answer will be recommended to the customers, when the customer chooses the respective answer.

5. Once you’ve made necessary changes to the selected secondary quiz slide, hit the ‘Save’ button.

6. The theme has pre-added blocks inside each quiz slide. You can add or remove the blocks as required. The upper limit for the blocks is 50, which is the number of blocks 1 section can hold as set by Shopify themselves.

Submit Quiz

This section comes after the final quiz slide, either primary or secondary one. This unremovable and necessary section should always be shown at the end of the quiz. The theme already keeps it at the end but the editor allows you to change its order and we highly recommend you not to change the order of this section.

1. In your theme editor, from the sidebar, click on ‘Submit quiz’.

2. The section allows you to change heading and subheading as well as padding. Update the settings as required.

   

3. Once all the necessary changes are done, hit the ‘Save’ button.

4. The email addresses submitted in this section are collected in the Customers section of your store’s admin panel. You can access the email ids from there and email to your customers.

Quiz Progress

This section is to just show the progress of the quiz. It’s visible in primary & secondary quiz slides as well as in the submit section but not at the starting section. You can change the text in this section.

1. In your theme editor, click on ‘Quiz progress’.

2. The section has 2 settings. Click on ‘Start text’ field to change starting point text and on ‘End text’ field to change ending point text.

   

Add, Remove or Reorder Quiz Sections

In the quiz page, there will always be 1 ‘Main quiz’ section, 1 ‘Submit quiz’ section and 1 ‘Quiz progress’ section. You can’t add or remove these sections and the theme’s quiz template always comes with these 3 sections added. But, you can add or remove primary and secondary quiz slide sections.

1. To add a primary or secondary slide, click on the ‘Add section’ button in the sidebar. It opens up the search box.

   

2. In the search box, type ‘Primary quiz slide’ or initial words and you will see the section. Click on it and the section will be added.

   

3. In the search box, type ‘Secondary quiz slide’ or initial words and you will see the section. Click on it and the section will be added.

   

4. To remove a section from the quiz page, it’s easy. Hover over a section on the sidebar and you will see 2 buttons.

   1. Click on the dustbin icon if you want to completely remove the section.
   2. Click on the eye icon if you want to hide the section.

5. To change the order of any section, hover over it on the sidebar and drag to the position you want.

6. Note that the order of sections is important. Which section to show next is based on this order. Always keep the ‘Main quiz’ section at the top and the ‘Submit quiz’ section at the bottom and then all primary and secondary slide sections should be between these two.

7. The ‘Quiz progress’ section doesn’t depend on the order but it’s recommended to keep it after the ‘Submit quiz’ section for simplicity.