How We Scaled an 8-Figure Beauty DTC Brand by 142% YoY

THE ANATOMY OF A STAGNANT SCALE

An 8-figure cosmetics brand had a traffic problem. Or rather, they thought they did.

They were spending $350k/month on Meta, Google, and TikTok ads. Traffic was scaling at 30% YoY. But top-line revenue was flat. Acquisition costs were climbing. Profit margins were shrinking.

Here is the math they presented:

Think about this. They were running a customer acquisition machine that burned $3.86 on day zero. They expected to recover that margin on purchase number two. But only 16% of those buyers ever came back.

They had a bucket. It was leaking. And they wanted to pour more water in.

I told them: Stop the spend. Fix the leak. Scale the margins.

Here is how we did it. Technically.

AUDIT LAYER 01: THE 2.8-SECOND CART BOTTLENECK

We audited their Shopify Plus storefront. It was built using a standard liquid theme. The theme was packed with 14 third-party Shopify apps.

Every app injected external scripts: tracking pixels, reviews widgets, cart upsell engines, size guides, and exit-intent popups.

The result? Latency death.

When a user clicked “Add to Cart,” the browser executed three blocking synchronous network requests to third-party app servers. The time to interactive (TTI) on mobile was 4.2 seconds.

Every 100ms of delay in mobile page load drops conversions by 1%. Their cart latency was costing them roughly 40% of their add-to-cart conversion potential.

// app/api/cart/add/route.ts
import { NextRequest, NextResponse } from 'next/server';

export const runtime = 'edge';

const SHOPIFY_STOREFRONT_API_URL = process.env.SHOPIFY_STOREFRONT_API_URL!;
const STOREFRONT_ACCESS_TOKEN = process.env.STOREFRONT_ACCESS_TOKEN!;

export async function POST(req: NextRequest) {
  try {
    const { cartId, merchandiseId, quantity } = await req.json();
    
    // 1. Prepare Storefront Mutation payload
    const mutation = `
      mutation cartLinesAdd($cartId: ID!, $lines: [CartLineInput!]!) {
        cartLinesAdd(cartId: $cartId, lines: $lines) {
          cart {
            id
            totalQuantity
            cost {
              subtotalAmount { amount currencyCode }
            }
          }
          userErrors { field message }
        }
      }
    `;

    // 2. Fetch directly from Edge Cache using non-blocking POST
    const response = await fetch(SHOPIFY_STOREFRONT_API_URL, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Shopify-Storefront-Access-Token': STOREFRONT_ACCESS_TOKEN,
      },
      body: JSON.stringify({
        query: mutation,
        variables: { cartId, lines: [{ merchandiseId, quantity }] },
      }),
      next: { revalidate: 0 } // Bypass Cloudflare cache for write mutation
    });

    const { data, errors } = await response.json();
    
    if (errors || data.cartLinesAdd.userErrors.length > 0) {
      return NextResponse.json({ error: 'Cart operation failed' }, { status: 400 });
    }

    return NextResponse.json(data.cartLinesAdd.cart);
  } catch (error) {
    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
  }
}

THE ARCHITECTURAL FIX: STRANGLER FIG MIGRATION

We did not rebuild their entire site. A complete headless rebuild would take 6 months. They did not have 6 months.

We used the **Strangler Fig pattern**. We decoupled only the most high-traffic, high-friction component: the slide-out cart.

We built a custom Next.js Edge API handler that communicates directly with Shopify's Storefront API. We loaded this handler via a Cloudflare Worker proxying the store domain.

When a user clicks “Add to Cart,” the request is intercepted at the edge. The worker executes the cart mutation asynchronously, returns a 200 OK to the client in 12ms, and registers the tracking pixels in a non-blocking background queue.

This cut Time to Interactive (TTI) on add-to-cart operations from **4.2 seconds to 110 milliseconds**.

AUDIT LAYER 02: DYNAMIC EDGE PRICING WITH CLOUDFLARE WORKERS

The brand served buyers in the US, UK, and Germany. They had separate localization engines that fetched user geolocations client-side via a JavaScript script, determined their country, and updated prices in the DOM.

Here is what the user saw: a page would load, display $50.00 for 1.5 seconds, then suddenly flick to £42.00 or €48.00.

This is **Cumulative Layout Shift (CLS)** death. It destroys user trust. AI crawlers saw the USD pricing and ignored international shipping data.

We built a Cloudflare Worker geolocator that checks request headers (`CF-IPCountry`) at the edge.

// workers/geolocalization.js
export default {
  async fetch(request, env, ctx) {
    const countryCode = request.headers.get('CF-IPCountry') || 'US';
    const url = new URL(request.url);

    // Skip static assets
    if (url.pathname.includes('/_next/') || url.pathname.includes('/assets/')) {
      return fetch(request);
    }

    const response = await fetch(request);
    
    // Inject geo cookie and country header for downstream server-side rendering
    const newResponse = new Response(response.body, response);
    newResponse.headers.set('Set-Cookie', `X-User-Country=${countryCode}; Path=/; Secure; SameSite=Lax`);
    newResponse.headers.set('X-User-Country', countryCode);
    
    return newResponse;
  }
};

The edge worker intercepts incoming traffic, reads the geocountry header, and forwards the geocode directly to Next.js. Next.js prerenders the page server-side with the correct localization variables before it ever reaches the user.

Cumulative Layout Shift dropped to **0.00**. Page load speed increased by **1.4 seconds** for international buyers.

AUDIT LAYER 03: PREDICTIVE COHORT RE-ENGAGEMENT

Now, let's look at their repeat purchase rate. 16% was killing their business model.

Their retention flow was generic. If you bought their signature moisturizer, you got a generic discount email 30 days later. If you bought their shampoo, you got the same discount email 30 days later.

But moisturizer lasts 45 days. Shampoo lasts 60 days.

Sending an email before the customer needs the product is spam. Sending it too late means they already bought a competitor's product.

We built a serverless Python pipeline on AWS Lambda that connects Shopify order history to a PostgreSQL analytics instance.

-- Calculate Average Purchase Interval (API) per product category
WITH user_orders AS (
  SELECT 
    customer_id,
    product_category,
    created_at,
    LAG(created_at) OVER (PARTITION BY customer_id, product_category ORDER BY created_at) as prev_order_date
  FROM order_items
  WHERE created_at > NOW() - INTERVAL '365 days'
)
SELECT 
  product_category,
  COUNT(DISTINCT customer_id) as total_repeat_customers,
  AVG(EXTRACT(EPOCH FROM (created_at - prev_order_date)) / 86400)::integer as avg_replenishment_days
FROM user_orders
WHERE prev_order_date IS NOT NULL
GROUP BY product_category;

The pipeline calculated the exact replenishment cycle for every product category. It grouped customers into **dynamic cohorts** based on their purchase items.

The AWS Lambda script evaluated these cohorts daily and pushed the ready-to-buy profiles directly to Klaviyo lists using Klaviyo's Profile Sync API.

Instead of generic blasts, customers received highly personalized, predictive replenishment reminders precisely when their bottles were running low (e.g. at Day 42 for moisturizer, Day 56 for shampoo).

This single automation lifted repeat purchase rate from **16% to 28.8%** within 120 days.

THE BOTTOM-LINE MATH

Here is the result of sealing these three leaks:

Because they were retaining 80% more customers, their Customer Lifetime Value (LTV) doubled.

Because conversion rate went from 1.8% to 3.4%, they doubled their sales from the *exact same* advertising traffic. They did not spend a single additional dollar on Meta or Google.

They scaled top-line revenue from **$8.2M ARR to $19.8M ARR** in 12 months.

That is the power of technical, data-driven scaling.