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: Choose the collection that will be used to show product recommendations after the quiz.
Make sure you select the correct “Quiz collection” so customers see the right products.
Common layout Settings:
| Full Width | Toggle this ON if you’d like the quiz section to stretch across the entire width of the page. Keep it OFF for a more compact layout with side spacing. |
| Desktop Layout | Choose how your quiz content and images are arranged on desktop:
Note: On mobile, the layout automatically adjusts to a vertical layout for best readability. |
| Desktop Layout Height | Controls how tall the quiz section appears on desktop |
| Mobile Layout Height | Choose how tall the quiz appears on mobile screens: |
| Show Welcome Content | Turn this ON if you want to show introductory text and a “Start Quiz” button. If you turn it OFF, the quiz will begin immediately when customers reach the section. |
Section Content
| Subheading | Add a short line of text above the main heading — perfect for context or a tagline. |
| Heading | This is your quiz title, such as “Find Your Perfect Style” or “Skin Type Quiz”. |
| Heading Tag | Choose how the heading should be styled (H2, H3, etc.). This helps with SEO and visual hierarchy. |
| Content | Use this rich-text area to add a description or instructions for customers. Example: “Take our quick quiz to uncover your style and receive personalized recommendations tailored just for you!” You can format text, add links, or break paragraphs as needed. |
| Start Quiz Button Label | Write the text you want on the button (e.g., Start Quiz, Begin, Let’s Go!). 👉 If this field is left empty, the intro content automatically hides, and the quiz starts right away. |
| Use Outline Button Style | Enable this if you want the Start Quiz button to have an outline instead of a solid fill. Good for minimalistic or soft design styles. |
| Image Settings | |
| Show Image | Toggle ON if you want an image (or mobile-only image) displayed alongside the content. |
| Image (Desktop) | Upload the image that will appear on desktop. This helps create a visually engaging first impression. |
| Mobile Image | Upload a mobile-optimized image to ensure it looks great on smaller screens. If you leave this blank, the desktop image will be used. |
| Image Width | Choose how much space the image takes:
(Options vary based on layout.) |
| Content Alignment & Positioning | |
| Alignement | Align the content horizontally:
|
| Position | Adjust vertical placement:
|
- 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.
Image Card Settings
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 “More Filters” as Source
- Within the Search & Discovery app, after setting up your initial filters, you'll need to select "More Filters" 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.