Ingredient intelligence.

§ 01Context

The client is building an ingredient-intelligence database for pet food — safety and quality scoring, allergens, recall history — and wanted to surface it two ways: a public consumer site with a label scanner and a pet-profile quiz, and a SaaS quiz widget that pet stores and vet clinics embed on their own storefronts to give shoppers ingredient-aware recommendations.

§ 02Challenge

Three problems stacked on top of each other. First, the raw data is a mess — open food databases, regulator recall feeds, and manufacturer pages, none of it clean or consistent. Second, the same recommendation logic has to run behind a website and a merchant-embedded widget without being written twice. Third, that widget has to load inside any Shopify theme without its CSS colliding with the store's — and do all of it cheaply.

One brain, three surfaces — the same recommendation logic runs the website, the Shopify storefront, and a 65KB widget on someone else's theme.— Architecture note

§ 03Architecture

• A framework-agnostic core. The recommendation engine, product search and feeding math live in one package that takes a database handle as an argument — so identical logic runs behind the Next.js site, the Shopify storefront routes and the standalone widget, with no duplication. Raw parameterized SQL was chosen over an ORM query-builder because search needs dynamic WHERE clauses an ORM fights.
• A curation pipeline. A small, cheap vision+text model normalizes ingredients, maps tags, extracts guaranteed-analysis from scraped pages and scans labels from photos — turning ~8,000 unstructured products into a graded dataset.
• Two-tier product matching. Barcode match first (high-confidence, auto-confirm), then fuzzy name/brand similarity, with a merchant review queue for the uncertain middle — all under strict per-shop data isolation.

§ 04The widget

The embeddable widget is the part that had to be perfect, because it runs on stores we don't control. It's React compiled to a single ~65KB self-contained bundle (no module system on a storefront), with all CSS hand-written and prefixed so it can't collide with the merchant's theme, delivered through a Shopify Theme App Extension embed block that works on legacy and modern themes alike. Add-to-cart goes through Shopify's own cart API; every shop's data is isolated by ID. It ships well under a 150KB budget.

§ 05Result

1. 8,000+ graded products for ~$30. A messy public corpus turned into a clean, scored dataset at 99.4% normalization — AI used where it pays, measured honestly where it doesn't.
2. One core, three surfaces. Site, Shopify storefront and widget share the same recommendation brain.
3. A widget merchants can actually install. 65KB, zero theme collisions, per-merchant isolation.
4. A base built to scale. A data spine ready for hundreds of SEO pages and a merchant SaaS tier.

— Related: Custom Shopify App case · Building a Custom Shopify App. Building on Shopify or with data at the core? Start a conversation.