Shopify Product Quiz

Shopify product recommendation quiz section. Features 5 types of filters: type, tags, vendor, price and options.
Section code available on GitHub

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.

Installation

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.

Quiz logic

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.

Browser support

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.

Dependencies

The quiz is built entirely on vanilla Javascript. Does not require jQuery or other library to be loaded.

CSS styles

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

Questions, bugs?

Please feel free to submit any bugs or code improvements on GitHub. Want to say hi? Mail me at mircea@typefolly.com