Hair-type quiz
A quiz recommends products from hair type instead of leaving shoppers to filter a long catalog.
Case study · Shopify Plus
A mobile-first Shopify Plus store for JVN Hair
Shopify Plus store for JVN Hair: a hair-type quiz, Recharge subscriptions, a sustainability calculator and an accessible, mobile-first storefront. Delivered in three months in 2024.
Tech stack
- Shopify Plus
- Liquid
- Vue.js
- SCSS
- Recharge
- Klaviyo
- Okendo
01 — The challenge
What did the client need?
JVN Hair needed a store that could recommend by hair type, sell subscriptions, and explain sustainability without excluding anyone. A desktop-first theme and a generic catalog would have buried the quiz, the packaging choices and the education the brand is built on.
02 — The solution
What did we build?
We built a mobile-first Shopify Plus store. A hair-type quiz personalizes the catalog, Recharge runs subscriptions, and a sustainability calculator plus carbon-neutral shipping options sit next to the product. Vue.js handles the interactive pieces on a Liquid theme styled in SCSS. Klaviyo and Okendo cover email and reviews. Checkout was rebuilt as a shorter, multi-step flow, and the storefront was brought to a 98% accessibility score.
03 — Key features
What's inside
Finding the right product
Education hub
Guides and product education live in the same theme as the shop, so content and commerce stay together.
Social
Social content is pulled into the storefront without taking over the product page.
Inclusive design
Layout, type and interaction were built to an accessibility score of 98%.
Buying again
Subscriptions
Recharge manages replenishment so a subscription is a product choice, not a separate site.
Sustainability calculator
Shoppers can see the environmental impact of a choice before they add it.
Carbon-neutral shipping
Carbon-neutral shipping is an option in the purchase, not a footnote in the footer.
Checkout
A multi-step checkout replaces one long page, aimed at the mobile conversion the brand needed.
04 — Results and impact
What changed after launch
+73%
Mobile conversion
+156%
Subscription growth
2.2s
Page load
98%
Accessibility
05 — Architecture
How the pieces connect
- 01Hair-type quiz
- 02Personalized catalog
- 03Recharge subscription
- 04Checkout
Tech stack
- Shopify Plus
- Liquid
- Vue.js
- SCSS
- Recharge
- Klaviyo
- Okendo