Personalized Wellness Quiz

An 8-question product recommendation quiz running on a live Shopify store, matching customers to supplements through curated mappings and dietary-aware filtering.

The Problem

Hewyn sells health supplements across 12 goal categories: sleep, stress, energy, gut health, and so on. Customers would land on the site, see 40+ products, and bounce because they didn’t know where to start. We needed something that translated “I want to sleep better and I’m vegan” into a short list of products that actually made sense together. The obvious answer was a quiz, but most Shopify quiz apps charge monthly fees and send data to third-party servers. For a health brand, that felt wrong.

The Approach

I built an 8-question quiz directly into the Shopify theme using Liquid templates and vanilla JavaScript. No app installs, no third-party dependencies. The quiz collects health goals, dietary preferences, lifestyle factors, and a few specifics like sleep quality and stress levels. Answers are stored in localStorage as the user progresses, so there’s no login required and nothing gets sent to a server until they add a product to cart.

The recommendation engine maps answer combinations to product handles through a curated lookup table. It’s not a scoring algorithm or a model. It’s a set of rules I wrote by hand after going through every product in the catalog. Dietary filtering runs on top: if you select vegan, collagen products get excluded automatically. If you don’t flag vegetarian restrictions, whey protein stays in the mix.

Results pull live product data through the Shopify Product API, so pricing and availability are always current. The Add to Cart button hits the Shopify Cart API directly, dropping the recommended product into the customer’s cart without a page reload.

Under the Hood

The recommendation engine maps answer combinations to products through curated rules:

const recommendations = {
  sleep: {
    default: ["magnesium-glycinate", "ashwagandha-ksm66"],
    vegan: ["magnesium-glycinate", "valerian-root"],
    // Collagen excluded for vegan automatically
  },
  energy: {
    default: ["vitamin-b-complex", "iron-bisglycinate", "coq10"],
    vegan: ["vitamin-b-complex", "iron-bisglycinate"],
  },
  // 12 goal categories, 48+ curated recommendations
};

function getRecommendations(answers) {
  const goals = answers.healthGoals;
  const diet = answers.dietaryPreference || "default";

  return goals.flatMap(goal =>
    recommendations[goal]?.[diet] ||
    recommendations[goal]?.default || []
  );
}

Results hit the Shopify Product API for live pricing:

// Fetch live product data (no stale prices)
const product = await fetch(
  `/products/${handle}.json`
).then(r => r.json());

// Add to cart without page reload
await fetch("/cart/add.js", {
  method: "POST",
  body: JSON.stringify({
    id: product.variants[0].id,
    quantity: 1,
  }),
});

Key Decisions

• Client-side with localStorage over a backend service. The quiz works without authentication, loads instantly, and stores nothing on our servers. For health-related questions, minimizing data collection was the right call. It also meant zero API costs for quiz interactions.

• Hardcoded curated mappings over ML or scoring algorithms. There’s no training data. We had maybe 200 orders at the time. More importantly, health supplement recommendations shouldn’t come from a black box. I wanted to be able to explain exactly why someone got recommended ashwagandha over magnesium. Hand-picked mappings make that possible.

• Vanilla JavaScript over React. This runs inside a Shopify Liquid theme. Adding a React build step for an 8-question quiz would have been overengineering. The entire thing is a single JS file that any developer can read and modify.

What I Learned

Curation beats algorithms when you actually know your products. I spent more time reading clinical studies on supplement interactions than I did writing JavaScript. The code was straightforward. Knowing that you shouldn’t recommend iron and calcium together, or that ashwagandha should be cycled, required a different kind of research.

The embarrassing lesson: the Add to Cart button showed a success animation but didn’t actually add the product. I’d tested the quiz flow dozens of times but never checked my cart afterward. Demo-quality and production-quality are different things. That bug taught me to always test the full transaction, not just the UI.

---

Built for Hewyn. Live on production. Architecture and recommendation logic shown freely.