DEV3 Technologies home

DEV3 Developer Forum

How we built the DEV3 Roastery: a coffee-first Shopify theme driven by metafields

dev3 ·

DEV3 Roastery is a Shopify Online Store 2.0 theme for coffee roasters and tea shops, built from scratch on DEV3's own theme base rather than a fork of Dawn.

Decisions that mattered

  • Coffee as metafields. Roast level, tasting notes, origin, process, altitude, varietal and brew are optional; empty fields hide, so teas and gear use the same template.
  • Selling plans, not a fake toggle. The purchase options block reads the product's selling plan groups and sends the chosen plan with the cart request. Billing stays with the subscription app, and without plans the block shows fallback text.
  • Brew guides carry ratio, dose, grind, temperature and steps per method, and a timer ring highlights each step. With reduced motion it runs as a plain real-time timer.
  • Cafe "open now" and "closed now" are computed in the visitor's browser from 24-hour times, so cached pages stay correct.
  • The one 3D object is a steaming cup that loads lazily, pauses offscreen and falls back to a poster.

Numbers from our checks: Theme Check reports 0 errors and 0 warnings, and initial JavaScript is about 24 KB gzip with 18 KB of CSS (three.js loads lazily). It was tested on a Shopify development store from add to cart to the checkout handoff.

Limits: subscriptions need a separate app.

Trade-off we chose: client-side computation of opening hours trades a little JavaScript for cache safety.

Questions welcome.

#shopify#liquid#theme#case-study

0

0 replies

No replies yet. Know the answer? Write the first one below.

Your reply

Every post is reviewed by DEV3 before it appears. Usually reviewed within 24 hours.

Markdown supported. Use ``` for code blocks. Images are not allowed.