Quiet luxury, engineered underneath.
Gramo is a specialty coffee brand from Cuernavaca with eight cafés across two cities. Its digital home is a bilingual, statically rendered storefront with WordPress behind it: every page composed from custom blocks, every order and inquiry reaching staff by SMS.
es-MX / EN · headless WordPress + Gatsby · WooCommerce, pay on delivery
The brand register is quiet luxury. The engineering underneath is anything but quiet: editors own every word, and the storefront ships as static pages.
-
Blocks in, React out
Pages are composed from a curated set of custom Gutenberg blocks and rendered through a block→React map. Editors compose in WordPress; Gatsby ships static, fast, safe pages.
-
Bilingual by structure
Spanish and English live as linked translation pairs on every content surface. A missing translation is omitted, never silently swapped for the other language.
-
Commerce that fits the counter
WooCommerce in MXN with pay-on-delivery, and Twilio SMS alerts so orders and inquiries reach staff where they actually work: on their phones.
Shipped
What the platform carries.
Thirteen page types in two languages, and the structured content behind them, all editable from WordPress by non-technical staff.
- Coffees with origin, roast, tasting notes and brew guidance
- Eight café locations with hours, amenities, maps and galleries
- Menu with prices, journal, team, testimonials and events
- Pay-on-delivery checkout in MXN through WooCommerce
- Subscription and wholesale inquiry pipelines
- A careers flow with a real CV pipeline
- Twilio SMS / WhatsApp alerts for orders and inquiries
- Idempotent content seeding: wp gramo install
Engineering that shows its work.
Gramo is where our commerce engine methodology lives: the documented engine-versus-brand split our WordPress builds share.
-
Plugin decides, theme presents
All business logic lives in the gramo-core plugin: CPTs, blocks, GraphQL, ordering, SMS, SEO. The theme is a minimal admin shell; the public frontend is Gatsby.
-
Content seeded from code
One idempotent command installs pages, products, locations and translations. The brand layer is data files; re-running never destroys an editor’s work.
-
The contract is GraphQL
WPGraphQL feeds static builds, and publishing content triggers a frontend rebuild automatically. Editors never think about deploys.
-
Performance in the brief
Lighthouse-100 targets, WCAG AA contrast, reduced-motion support. Written into the product record, not bolted on.
Under the hood
The stack, plainly.
- Frontend
- Gatsby 5 React TypeScript SCSS Modules GSAP (sparing)
- Backend
- Headless WordPress WPGraphQL WooCommerce (COD, MXN) gramo-core plugin Custom meta boxes (no ACF)
- Operations
- Twilio SMS / WhatsApp Inquiry pipelines Admin ops dashboard Production calendar Reports
- Quality
- PHPCS (WordPress-Core + Extra) PHPStan level 6 JS + SCSS linting CI on every push
- Infrastructure
- GitHub Actions wp-env local cPanel VPS Scoped rsync deploys Content-triggered rebuilds
Straight answers.
Why headless here?
The brand demanded total design control and speed: a quiet-luxury register that no theme could deliver. Headless keeps WordPress for the editors and gives the storefront to a static frontend that hits performance targets by construction.
Why pay-on-delivery?
Because that’s how this market buys at launch. Card payments, gift cards and loyalty are architected-for, deliberately not built yet. The checkout doesn’t block them, and we don’t claim them.
Can the café’s staff really run it?
That’s the point of the build. Every page is composed from blocks in WordPress, structured content uses purpose-built meta boxes, and publishing triggers the rebuild. No developer in the loop for content.
Want a brand site with this much under the hood?
Tell us what you’re building and the standard it has to meet. One conversation is enough to know whether we’re the right team.