CASE STUDY · HOME APPLIANCES · AGENTIC THEME
An agentic Shopify theme for a considered purchase
A ground-up Shopify theme where buying advice is part of the storefront rather than a chat widget bolted to the corner. Five questions size the product, a compare panel reads the spec sheet, and every handoff reaches a human on WhatsApp with context already attached.
- Client
- Cravia Industries · 2026
- Scope
- Design system in Liquid · Nine page templates · Agentic size advisor · Spec-driven compare · Catalog data migration
- Stack
- Shopify skeleton theme · Liquid sections & blocks · Metafields · Vanilla JS · Theme Check
THE PROBLEM
Kitchen chimneys are decided by physical constraints — platform width, burner count, how much the household fries, and whether a duct can reach an outside wall. Buyers rarely know which model fits, so they phone the shop instead of ordering. The catalog was online; the reasoning that sells it was not.
The specifications existed only as free text buried inside product descriptions. Nothing on the page could filter, compare, or reason over them, because structurally they were prose.
The brand sells through a local distributor who installs and services every unit. The storefront had to hand customers to those people with context intact, not attempt to replace them.
APPROACH
Structure the data, then build the reasoning on top of it.
Tokens before components
Palette, type scale, and shape were defined once as Liquid custom properties, so every section inherits the system instead of restating it. Changing the accent is one setting, not a search across files.
Skeleton, not a fork
We started from Shopify's minimal starter rather than forking a heavy commercial theme. Nothing ships that nobody wrote, and upgrades never fight a vendor's abstractions.
Structure the data first
Specifications were parsed out of description prose into typed metafields. Once suction and noise were numbers rather than sentences, the interface could rank, compare, and explain them.
Put the reasoning in the theme
The advisor, the compare verdict, and the per-product fit check are theme sections reading store data — no external service, no API bill, no latency between a click and an answer.
Hand off to people
Every agentic surface ends at a human. WhatsApp links carry the product, the price, and the page the customer was reading, so the distributor opens a conversation already in progress.
WHAT MAKES IT AGENTIC
The advice is the interface.
Five-question size advisor
A chat-shaped flow derives chimney width from the widest signal across platform size, burner count, and cooking load, then recommends a quiet BLDC motor when the kitchen is open-plan or the frying is heavy. It shows its reasoning as bullet points rather than just naming a model, and each width and motor pairing maps to a real product through section blocks the merchant controls.
Spec-driven compare verdict
Tick two or more models and the panel assembles a comparison table from metafields, parses the leading number out of each spec string, and ranks them to write a short verdict — which unit moves the most air, which runs quietest. The copy is generated from the data, so it cannot drift from the spec sheet.
Per-product fit check
Each product page carries a fit-check panel sourced from its own metafield, stating plainly which platform widths and burner counts the model suits, with a route into the advisor when the buyer wants it confirmed.
Context-carrying WhatsApp
A floating button, a product-page CTA, and a header link all compose the message from the page the customer is on. The distributor receives the model and the URL, not a cold 'hi'.
DECISIONS
The calls that cost us something.
Format money in Liquid, never in JavaScript
A first pass reformatted prices in the browser and quietly destroyed Indian digit grouping — ₹11,990.00 became ₹11990.00. Variant prices are now pre-formatted server-side by Shopify's money filter, so the browser never guesses a currency convention.
Separate merchant content from developer code
Theme pushes overwrite the JSON files the theme editor writes to, so every deploy silently erased the client's own settings and uploads. Those paths are now ignored on push: layout and behaviour belong to the repository, content and configuration belong to the merchant.
Progressive enhancement by default
Navigation, the mobile drawer, and every accordion are native disclosure elements. With JavaScript unavailable the store still browses and still sells; the agentic layers enhance it rather than gate it.
Keep translation keys literal
Building keys dynamically reads elegantly and fails silently in production. Written as literals, static analysis catches a typo before it ships — which it did, twice.
Let token scope shape the plan
A theme-scoped token cannot write products, and no amount of retrying changes that. Rather than pretend otherwise, the catalog migration was rebuilt as a structured import: fifteen products and their specifications parsed, typed, and handed over as a file the merchant imports in two clicks.
OUTCOMES
- 9
- Page templates built
- 0
- Theme Check offenses
- 15
- Products migrated
- 154
- Spec values structured
Start with a written audit
Send us your store URL and the problem you want solved. You will receive written findings and a recommended next step — whether or not you engage us.