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:

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: Horizontal stack – Content and images sit side-by-side. (Other available layouts will appear in your theme if enabled.) 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: Full – Image takes full width and content over the image Half – Image shares the space side-by-side with content. (Options vary based on layout.)
Content Alignment & Positioning
Alignement	Align the content horizontally: Left Center Right
Position	Adjust vertical placement: Top Center Bottom

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.

General Information on How question blocks work

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.

Card options question

Hey there! This is a simple breakdown of how you can set up those beautiful Image Cards in your Shopify quiz section. Think of this as your design and behavior control panel!

Allow multiple selections (Multiple choice):	Toggle ON: Users can pick more than one option! Perfect for questions like "What are your favorite colors?" Heads up: If this quiz is meant to filter products, selecting multiple tags means a product must have all the chosen tags to show up
Allow skipping (Skip):	Toggle ON: Makes the question optional. Users can click "Next" without answering.
Option Layout:	Option type: You're currently using Image (great choice!), but you could switch to just Text buttons if you prefer. Image ratio: Keep it at "Adapt to image" to make sure your pictures keep their original shape and don't look stretched or squished.
Question & Heading:	Ask your question here?: Type in your question! (e.g., "Which style speaks to you most?"). Heading Tag: This just tells the browser how important your question text is (H3 is usually a good size for a quiz question).
Options 1 (Individual Choice Block)	This block controls all the details for a single answer choice in your quiz (e.g., the "Dry Skin" option, the "Minimalist" style option, etc.). Enable option 1: Toggle ON to make this option visible and selectable by the user in the quiz. Option 1: This is the display text that appears on the image card (e.g., "Option 1," "Oily Skin," "Casual Style").
Tags:	Add a tag: This is the most important part for product filtering! Enter a product tag here that corresponds to the choice. Example: If the option is "Oily Skin," you would enter the tag `oily` here.
Description:	Use this rich text editor to add a longer description or extra context for this option. Where it shows up: This text often appears in a pop-up or on the final results page to give the user more information about the choice they made. The editor includes standard formatting tools like bold, italics, links, and lists.
Image:	Select: Click this to upload a new image or select an existing image from your media library that visually represents this option.
Content layout	Below image: The text sits neatly under the picture. Overlay: The text appears on top of the image (Note: The description or caption below option wont be visible in this layout).
Content alignment:	Align the option text to the left, center, or right.
Option text size:	Sets the font size for the text on the card (H3 is usually a good starting point).
Text color	The default color of the option text.
Background color	The default background color of the option card.
Option hover/active color	This is the magic color that pops up when a user hovers their mouse over the card OR when they click and select the option.
Option hover/active text color	The color the option text turns into when the card is hovered over or selected.

List options question

This style is great for simple, clear answer choices. You have two main ways to display the options: using Images or using an Alphabet/Number Counter.

Multiple choice:	Toggle ON: Allows users to pick more than one option.
Skip:	Toggle ON: Makes the question optional. Users can move to the next question without answering.
Question:	Ask your question here?: Type in the main question (e.g., "What is your main goal?").
Heading Tag:	Select the size for your question text (e.g., H3). This helps with readability and SEO.
Options style:	Horizontal stack: Options are laid out side-by-side (where space allows). Vertical stack (Default on mobile): On smaller screens (phones), the options will automatically stack one on top of the other for better viewing.
Counter/image position:	Decides where the corresponding image or counter (A, B, C or 1, 2, 3) appears relative to the option text. Choose Top or Inside (usually aligned with the text).
Displaying Images vs. Counters
Image List Card	Show Counter: OFF You can upload a small image for each option to provide a visual cue.
Counter List Card	Show Counter: ON Images are hidden, and each option is prefixed with a letter or number instead.
If "Show Counter" is ON (Counter List Card):	Style: Choose between Alphabet (A, B, C...) or Number (1, 2, 3...). Style size: Set the font size for the counter (e.g., H3).
If "Show Counter" is OFF (Image List Card):	Desktop image width (60 px): Adjust the size of the images displayed on desktop computers Mobile image width (40 px): Adjust the size of the images displayed on mobile devices.
Question & Heading:	Ask your question here?: Type in your question! (e.g., "Which style speaks to you most?"). Heading Tag: This just tells the browser how important your question text is (H3 is usually a good size for a quiz question).
Options 1 (Individual Choice Block)	This block controls all the details for a single answer choice in your quiz (e.g., the "Dry Skin" option, the "Minimalist" style option, etc.). Enable option 1: Toggle ON to make this option visible and selectable by the user in the quiz. Option 1: This is the display text that appears on the image card (e.g., "Option 1," "Oily Skin," "Casual Style").
Tags:	Add a tag: This is the most important part for product filtering! Enter a product tag here that corresponds to the choice. Example: If the option is "Oily Skin," you would enter the tag `oily` here.
Content alignment:	Align the option text to the left, center, or right.
Option text size:	Sets the font size for the text on the card (H3 is usually a good starting point).
Text color	The default color of the option text.
Background color	The default background color of the option card.
Option hover/active color	This is the magic color that pops up when a user hovers their mouse over the card OR when they click and select the option.
Option hover/active text color	The color the option text turns into when the card is hovered over or selected.

Popup (Common in list and card blocks)

Popup
Enable pop up	Toggle ON to add a little help icon next to the question. Clicking it shows a pop-up with extra info.
Link text:	This is the text the user will see in the link or button for accessing the pop-up (e.g., "Access support and guidance here").
Pop up heading:	Enter the main title for the pop-up window (e.g., "Why We Ask This," or "Understanding Your Skin Type").
Pop up content:	Use this rich text editor to write the detailed information, guidance, or explanation that the user needs. You can use the formatting tools (bold, italics, links, lists) to make the content easy to read.
Content alignment:	Controls the horizontal alignment of the text content within the pop-up window (left, center, or right).

Results

This defines the look and feel of the results block on the page.

Results layout	How the results area appears when the quiz is finished. Page: The user is taken to a completely new page dedicated to their results. Drawer: The results appear in a slide-out panel or pop-up over the current page.
Products layout (Under Page layout)	How the recommended products are arranged. Carousel: Products display in a rotating slider (good for saving space). Grid: Products display in rows and columns.
Content:
Heading	Enter a big, welcoming title for the results page (e.g., "Meet Your New Routine!", or "Your Perfect Match").
Description (Rich Text Editor)	Write a personalized message to the user here. You can use formatting (bold, links, lists) to summarize their quiz profile or explain why these products were chosen.
Content alignment	Align the heading and description text (left, center, or right).
Enable add all products to cart:	Toggle ON to show a special button that lets the user add all recommended products to their shopping cart with a single click—great for boosting sales! Button text: Customize the text on this button (e.g., "Add all to cart" or "Buy the Bundle").
Badges (Enhance Your Results) Badges are visual indicators you can add to the results to highlight features or offers (like free shipping or a guarantee).
Style:	Choose a pre-defined icon for the badge (e.g., "Delivery box").
Color scheme	Select a color palette from your theme settings (e.g., Scheme 1) for the badge.
Custom icon	You can upload your own image to replace the default icon style.
Heading	Enter the short text that appears next to the icon (e.g., "Free Shipping over $50").

No Results (When there are NO Results)

These settings only appear if the quiz filtering (based on the user's answers) yields zero products.

Heading	A sympathetic message to the user (e.g., "Based on your results, we suggest:").
Style size	Sets the font size for the "No results" heading (e.g., H3)
Text (Rich Text Editor)	This is important! Use this area to guide the user on what to do next. You might suggest: Adjusting one of their answers. Contacting customer support. Browsing a general collection.
Content alignment:	Align the "No results" text content.
Retry button text:	The text on the button that allows the user to restart the quiz or go back to the beginning (e.g., "Retry").
Product Recommendations This is where you set up the default products to show when the automatic tag-filtering fails.
Heading	A title for your fallback recommendations (e.g., "Check Out Our Bestsellers," or "Top-Rated Products for Everyone").
Content alignment:	Align this heading (left, center, or right).
Products:	Click Select to manually choose specific, high-selling products that you want to show to everyone who hits the "no results" page. This ensures you always present a purchase option.
Collections:	Click Select to manually choose general collections to display (e.g., your "New Arrivals" or "Everything" collection).

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.