bcdianco / operator
Context
Shinjiru Wellness is a Philippine wellness brand running four supplement SKUs, each with a distinct functional job: Gut In Shape for gut health, Cravelle for cravings, Lunea for sleep, and Calmara for stress. The engagement was never just "build four landing pages" — it was build the landing pages and wire them into the order pipeline that PH e-commerce actually runs on: Facebook Messenger commerce, Google Sheets as the source of truth, and a POS system pulling orders out of the same data.
The pages live on WebCake, a hosted PH page builder. WebCake's clean-v3 architecture (released May 2026, mid-engagement) opened four global injection slots — Before Head, Before Body, Custom CSS, Custom JavaScript — which let the build share styling and interactivity across every page instead of inlining everything into each Custom HTML block. That platform shift dropped per-page payload roughly 60% and is what the final architecture is built around.
The Challenge
Four problems stacked on top of each other, and the work was solving all four without letting any of them turn into a bottleneck for the others.
- One design system, four distinct products. Each SKU has its own color territory — navy for Gut In Shape, cream for Cravelle, lilac for Lunea, deep purple for Calmara — but the layout, type scale, and component vocabulary all had to read as one product line. The risk was making four near-identical pages with a swapped accent color; the goal was four pages that felt like siblings without feeling like duplicates.
- Mobile-first because that's where PH e-commerce lives. Most traffic to a Philippine wellness brand arrives on a phone, often on a cellular connection. The page weight budget and the breakpoint strategy both started from "what works on a 5-inch screen on 4G" and worked outward. WebCake's mobile preview also breaks
@mediaqueries — those fire at the iframe viewport rather than the displayed canvas — which forced a different responsive strategy. - A real order pipeline, not just a form. Philippine SMB e-commerce runs through Facebook Messenger, not a hosted checkout. The order CTA had to route the customer into Messenger where a chatbot (Botcake) collects and confirms the order, then the order data had to flow into a backend the operator could actually use — Google Sheets — without manual copy-paste.
- POS and attribution from day one. Pancake POS pulls orders for fulfillment, Meta Pixel attributes conversions back to the ad spend, and both needed to be wired up at launch — not bolted on after the pages were "done."
Approach
The order of decisions mattered more than the decisions themselves.
- Globals first, per-page HTML thin. Once WebCake shipped the four injection slots, the architecture flipped: shared CSS, shared JS, shared
<head>markup all live in global slots. Each product page's Custom HTML block is just the per-product content scaffold wrapped in<div class="shj-page" data-product="...">. The data attribute drives per-product theming entirely from the global CSS. One global edit propagates to all four pages. - Container queries, not viewport queries. Because WebCake's mobile preview misreports
@mediawidth, the responsive system is built on@container shj (max-width: ...)against aninline-sizecontainer scoped to.shj-page. That sidesteps the preview bug and behaves correctly in the editor, on desktop, and on real phones. - Order flow routed to Messenger commerce. The product-page order CTA opens a WebCake modal (custom JS) that collects name + phone + email + address + product/bundle selection. On submit, the customer is routed to the Shinjiru Facebook page where Botcake confirms the order conversationally — a familiar pattern for PH buyers, and a friction reduction vs. unfamiliar checkout flows.
- Apps Script as the order pipeline glue. Order confirmations arrive in Gmail. A Google Apps Script triggers on inbox events, parses the order, and appends rows to the canonical orders Google Sheet. Pancake POS pulls from the same data source for fulfillment. Meta Pixel fires on the order CTA so paid-ad attribution lines up with the actual conversion event.
- Conversion stack built in JS, not faked in CSS. Once Custom JS was available globally, the urgency countdown, FAB show-after-hero behavior, modal auto-bundle-select, scroll-triggered reveals, sheen drift, and per-product theme switching all become real interactive elements instead of CSS hacks.
What I Built
The four landing pages. Each ships with the same conversion-stack components, themed per product:
- Hero with click-to-play founder/testimonial video and tap-to-unmute overlay
- Vertical testimonial reel in the page's color territory
- Facebook-style community comments — four Tagalog cards per product
- FDA notification card — full document, click to enlarge on mobile
- Trivia / myth section ("Mga bagay na hindi mo alam")
- Ingredient deep-dive with float + shape-outside cards
- Comparative positioning panel framing the product as a safer alternative (without naming competitors)
- Pricing tile with strikethrough original, % saved badge, and the locked promo price
- 30-day money-back guarantee block with oversized confident typography
- 5-minute urgency countdown + live stock counter above the pricing block
- Floating "Order now" CTA that appears once the customer scrolls past the hero
- Order modal — name / phone / email / address / reason, auto-selects the bundle the customer clicked
- 60-day ritual closer as the last section before the footer
The shared globals. Site-wide CSS handles typography, color territories, animations (scroll reveal, sheen drift, gradient drift, breathing rings, mascot blink, FAB pulse, button shimmer), and the responsive container-query system. Site-wide JS handles modal open/close + form state, the urgency countdown, FAB show-on-scroll, the per-product theme switcher, and Meta Pixel event firing.
The order-ops pipeline. This is the part that lives outside WebCake:
- Order modal → Facebook Messenger. Modal submit deep-links the customer to the Shinjiru Facebook page with their selected bundle pre-stamped in the conversation context.
- Botcake confirms the order. The Messenger bot collects any missing detail, confirms the bundle and total, and triggers the order-receipt email.
- Gmail → Google Apps Script → Google Sheets. An Apps Script polls Gmail for new order receipts, parses them, and appends each order as a row in the canonical orders Sheet. The Sheet is the single source of truth.
- Pancake POS pulls from the same Sheet for fulfillment tracking — packing slips, courier handoff, status updates.
- Meta Pixel fires the conversion event on order-CTA submit so paid ads can be optimized against actual orders, not just landing-page clicks.
The four pages with their color territories — click any to open the live landing page in a new tab:
The four pages with their color territories — click any to open the live landing page in a new tab:
Timeline
The engagement compressed into roughly three weeks of focused build work after the initial assets and details landed.
- April 25 — kickoff meeting. Brand alignment, scope confirmation, asset audit. No build work yet.
- April 29 — build start. Clean-v1 scaffold goes up. First product page wired end-to-end.
- May 9 — clean-v2. Founder section, Pexels hotlinked imagery, copy locked, first cross-product visual audit.
- May 12 — clean-v3. Vertical video rows, sound-aware testimonial autoplay, local background asset migration off Pexels for production.
- Current — polish pass. Fluid type scale, urgency block clickable, hero mobile cap, ingredient card compaction, "in real life" section heading.
Iteration discipline: every global edit rebuilds all four previews together. A change that looks right in Gut In Shape gets verified in Cravelle, Lunea, and Calmara before it lands.
Outcome
Four landing pages live at shinjiruwellness.ph/calmara, /cravelle, /lunea, and /gut-in-shape. Order flow routes through Facebook Messenger via Botcake, orders auto-populate the canonical Google Sheet via Apps Script, Pancake POS pulls fulfillment data from the same Sheet, and Meta Pixel fires on order-CTA submit for paid-ad attribution.
The clean-v3 globals architecture cut per-page payload roughly 60% versus the inline-everything approach the build started from. Each product carries its own 30-day bonus pack — diet, sleep, or stress management — wired into the page's value stack so the perceived offer is consistent across the line. The shared globals mean a polish edit propagates to all four pages with a single save, which kept the polish phase moving instead of stalling on per-product drift.
What I'd repeat
Two patterns carried this engagement.
Globals-first architecture. Once WebCake exposed the four injection slots, every shared concern — typography, color territories, animations, modals, countdowns, attribution — moved into a single place. Per-page HTML became thin per-product content wrapped in a data-product attribute that drives theming from global CSS. The system can't fork because there's nothing to fork — one shared source of truth, four data-attribute variants.
Route the conversation, don't recreate it. Instead of building a custom checkout inside the landing page, the order CTA routes the customer into Facebook Messenger where Botcake handles confirmation conversationally. That's the channel PH buyers already trust. The landing page's job is to convert the click — Messenger's job is to convert the conversation. Apps Script glues the two together by pulling Botcake's order receipts out of Gmail into the operator's Google Sheet, and Pancake POS reads from there. The whole pipeline is composed of tools the operator already pays for; nothing custom is hosted, nothing custom needs to be maintained.