Shopify Product Quiz

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

Words: Mircea Piturca

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.

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 another 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 behavior

Questions, bugs?

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