The quiz acts as a product filter applied on 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 behaviour
Please feel free to submit any bugs or code improvements on GitHub. Want to say hi? Mail me at firstname.lastname@example.org