The quiz acts as a product filter applied to a selected collection. Each answer will add the matching products to the final results. Currently, there are implemented 5 types of filters that can be applied: product type, tags, vendor, price, and options. An answer can have multiple filters.
Download the session files from GitHub
Copy sections/quiz.liquid to your theme sections folder.
Copy snippets/quiz-data.liquid to your theme snippets folder.
Copy assets/quiz.js to your theme assets folder.
Each quiz answer can contain one or more filtering rules. On the initial quiz collection products, those filtering rules will be applied. The end result will contain only the matching products.
The quiz is built as a progressive enhancement component. IntersectionObserver, CSS Snap Points, CSS Scroll Behavior, CSS Custom Properties are used to provide the best user experience. However, the browser support for those features is not required for the quiz functionality.
The functionality baseline is ES5.
Out of the box, the section will have just the basic layout styles. Headings, paragraphs, links will inherit your theme styles. This is an on purpose behavior
Please feel free to submit any bugs or code improvements on GitHub. Want to say hi? Mail me at firstname.lastname@example.org