Quiz

The quiz section is designed to provide users with personalized product recommendations based on their responses to a series of questions. This interactive feature enhances user engagement and helps guide them towards products that best meet their needs and preferences.

Quiz Section Settings:

Important settings:

Collection Picker: Make sure to select the right collection from which you want to present product recommendations

Common layout Settings:

• Content Settings:

  • The Content Settings allow you to customize the presentation of your quiz content. You can configure the Content Desktop Style to set the layout of quiz answers specifically for desktop users, choosing from styles to ensure optimal readability and interaction. The Content Alignment setting lets you align text and other elements (left, center, or right) to enhance visual appeal. You can add a Subheading to provide additional context or descriptions that support the main heading, while the Heading is where you input the main title to capture user attention. The Content area is for adding detailed descriptions, instructions, or any other necessary text, formatted to match your theme’s design.

    Button Settings:

  • The Button Settings provide options to customize the labels and styles of buttons within the quiz. The Start Quiz Button Label allows you to define the text for the button users click to begin the quiz, encouraging action with labels like "Start Quiz" or "Begin Now." The Results Button Label lets you customize the text on the button users click to view their results after completing the quiz, with labels such as "View Results" or "See Your Score." Both buttons can be styled to stand out and align with the theme’s overall aesthetics.

    Image Settings:

  • The Image Settings enable you to enhance the visual aspects of your quiz by configuring how images are displayed. You can upload different Desktop and Mobile Images to ensure they are optimized for various screen sizes, improving user experience across devices. The Media Size setting allows you to define the dimensions of these images, ensuring they fit well within the quiz layout and maintain their quality. Additionally, the Image Position setting lets you control where images are placed relative to the content (left, or right), helping to break up text and make the quiz more visually engaging.
• Color Settings:
  • The Color Settings allow you to customize the color scheme of your quiz to ensure it aligns with your overall theme design. You can set colors for various elements such as the background, text, buttons, and borders. By carefully choosing and applying colors, you can enhance readability, draw attention to key elements, and create a visually appealing and cohesive user experience.

Setting Up the Quiz

• Set up Tags Filter in Search & Discovery App

  • To begin setting up the quiz, you'll need to configure the tags filter in the Shopify Search & Discovery app. This filter will allow you to provide more customized product recommendations based on user responses. Follow Shopify’s official guide for setting up filters to ensure you have the most robust and flexible configuration options. You can find detailed instructions here: Shopify Filter Setup Guide.
• Choose “Tags” as Source
  • Within the Search & Discovery app, after setting up your initial filters, you'll need to select "Tags" as the source for your filter. This means that the quiz will use product tags to determine which products are recommended based on the user's answers. Tags are a powerful way to categorize and filter products, allowing for precise and relevant recommendations.
• Select Logic Based on Preference
  • Next, you need to select the logic that will be applied to the tags filter. Depending on your preference, you can choose from various logical operators such as AND, OR, or specific tag combinations to fine-tune how products are filtered and recommended. Once you have configured the logic that best suits your needs, click “Save” to apply these settings.
• Hide Tags Filter from Collection and Search Pages
  • If you prefer not to show the tags filter on collection and search pages, you can easily hide it. In the Shopify customizer for the Collection page and Search page, you’ll find a checkbox labeled “Show Product Tags to filter.” Simply disable this checkbox to prevent the tags filter from appearing on these pages. This keeps the focus on your quiz-driven product recommendations rather than general tag filtering.

Question Block:

• When creating the question block for your quiz, you will input a list of tags for each option. These tags should be comma-separated and must be case-sensitive (e.g., 18k, Gold, accessories). Each option will correspond to specific tags that, when selected, will filter the product recommendations accordingly. Ensure the tags accurately represent the products you want to recommend based on user choices.

• Every question block will add a new slide in your quiz section which needs to be with right tags

  Fetching Results Based on User Selection

• Based on the options selected by the user during the quiz, the collection selected will be dynamically fetched with all the relevant tag filters applied. This means that the quiz will present product recommendations that match the tags associated with the user’s answers, providing a personalized and targeted shopping experience.