zamir.cantillo@gmail.comZeCommerce · Performance · CASE STUDY 04

Sunrise Integration — eCommerce at Scale.

Frontend at scale for US clients — Shopify storefronts and Next.js applications optimized for Core Web Vitals.

ReactNext.jsTypeScriptShopify LiquidKlaviyo
🔒 sunrise-clients.example
DTC STOREFRONT
Sunrise
§ 01Case study

Context

Sunrise Integration runs the digital storefronts for a portfolio of US-based DTC brands. Each store has its own quirks — Shopify Liquid customisation, headless Next.js storefronts, Klaviyo flows, Recharge subscriptions, ShipStation integrations — and SEO and Core Web Vitals are the metrics the agency competes on.

Constraints

Performance budget is non-negotiable: every storefront has to land in the green band on Core Web Vitals. Shopify's Liquid templating engine restricts what you can do server-side. Third-party scripts (Klaviyo, Yotpo, ShipStation widgets) usually arrive untyped and untouched. Some clients expect feature parity with Amazon-class storefronts on a startup budget.

Approach

For each project I started by audit: a Lighthouse pass, a cumulative-layout-shift trace, and a network waterfall. The fix is rarely "rewrite everything"; usually it's three or four targeted changes — image sizes, font loading, deferred third-party scripts, hydration boundaries — that move the needle.

For Next.js storefronts I leaned on Next/Image, server components for product pages, and edge caching. For Liquid stores, the wins came from removing legacy JS bundles, splitting CSS, and inlining critical-path styles.

Solution

Performance before vs after — typical lift across the portfolio
Headless storefront pattern: Next.js + Shopify Storefront API

Outcome

Across the portfolio, Core Web Vitals consistently moved from the orange band into the green band. Search Console impressions and clicks improved on the stores where Sunrise also owns SEO.

(Exact metrics under client NDA — figures available on request.)

Reflection

For Shopify work, the boring discipline wins: minimize bundles, lazy-load images, defer third parties, audit fonts. For headless Next.js, prefer server components by default and only escape to client when the interaction truly needs it. Most of the perf wins on these projects came from doing less, not more.