Case study · Headless Commerce

Een premium deli, herbouwd als een headless commerce-ervaring.

We herbouwden Harvest Deli op een headless Shopify-architectuur en migreerden het merk van een .gr- naar een .nl-domein, zonder de moeizaam opgebouwde zoekposities op te geven.

  • Klant: Harvest Deli
  • Sector: Premium food en ecommerce
  • Diensten: Headless commerce, Storefront API, SEO-migratie

Harvest Deli is een premium foodmerk dat zijn oorspronkelijke storefront en Griekse domein was ontgroeid. De catalogus, het bestelproces en de merkpresentatie pasten niet langer bij de kwaliteit van het product. We ontwierpen en lanceerden een volledig headless winkel: Shopify als commerce-engine op de achtergrond, een custom ontkoppelde frontend voor de klant. Parallel voerden we een zorgvuldige SEO-migratie naar een .nl-domein uit, waarbij autoriteit, redirects en taalsignalen behouden bleven, zodat de overstap onzichtbaar was voor zowel klanten als Google.

De uitdaging

Het merk droeg twee lasten tegelijk. De bestaande storefront was strak gekoppeld aan een thema dat zowel snelheid als design beperkte, en het hele bedrijf draaide op een .gr-domein dat niet langer paste bij de richting van het merk. Een domeinwijziging op deze schaal is precies waar de meeste ecommerce-merken stilletjes een jaar aan SEO-waarde verliezen.

Onze opdracht was om beide zonder concessies te doen: een snellere, premium winkelervaring en een schone migratie naar het nieuwe domein waarbij geen enkele ranking, geen geïndexeerde productpagina en geen opgebouwde autoriteit verloren zou gaan.

De architectuur

We ontkoppelden de storefront volledig van Shopify. Shopify blijft de catalogus, voorraad, checkout en orders beheren, terwijl een custom Next.js-frontend die data uitleest via de Storefront API. Het resultaat is een winkel die snel is, volledig vormbaar en onafhankelijk van welk thema dan ook.

  • Custom productervaring: Product- en collectiepaginas zijn vanaf nul herbouwd met premium beeld, snel wisselen tussen varianten en een opmaak die het merk recht doet. Niets wordt beperkt door een thema.
  • Snelle headless winkelwagen: Een winkelwagen die rechtstreeks met de Storefront API communiceert en direct bijwerkt zonder volledige paginavernieuwing. Bij afrekenen draagt hij naadloos over aan de Shopify-checkout.
  • Domeinmigratieplan: Een complete URL-inventarisatie en redirectmap van het .gr-domein naar het nieuwe .nl-domein, voor elke product-, collectie- en content-URL. Oude links blijven werken, en hun autoriteit verhuist mee.
  • Hreflang en taalsignalen: Hreflang- en canonical-signalen zijn zo ingericht dat zoekmachines de nieuwe markt en taaltargeting begrepen, zonder de verhuizing als duplicate content te behandelen.
  • Gestructureerde data: Product-, breadcrumb- en organisatieschema zijn over de hele catalogus toegevoegd, zodat vermeldingen rijk blijven en in aanmerking komen voor uitgebreide resultaten na de migratie.
  • Performancebudget: Beeld, fonts en scripts zijn afgesteld op een strikt Core Web Vitals-budget. De winkel is gebouwd om direct aan te voelen op mobiel, niet alleen op de laptop van een developer.
  1. Discovery: We brachten de bestaande .gr-winkel in kaart: catalogusstructuur, verkeer en rankende paginas, en bepaalden precies welke autoriteit op het spel stond bij de verhuizing.
  2. Architectuur: We definieerden het headless model, de Storefront API-datalaag en de betaal- en checkoutaanpak voor de .nl-markt voordat er productiecode werd geschreven.
  3. Migratieplanning: We bouwden de volledige redirectmap, hreflang- en canonical-strategie en een gefaseerde uitrol, zodat de domeinwijziging gecontroleerd en omkeerbaar kon worden uitgevoerd.
  4. Build: We bouwden de ontkoppelde frontend, de headless winkelwagen en de productervaring op de Storefront API, met de SEO- en performance-eisen vanaf de eerste commit ingebouwd.
  5. Launch: We schakelden over naar het .nl-domein, activeerden redirects, dienden de nieuwe property en sitemaps in en monitorden indexering en rankings tot de verhuizing aantoonbaar stabiel was.

De winkel ging live op het nieuwe domein als een volledig headless commerce-platform. De migratie verliep zonder de rankinginstorting die normaal gepaard gaat met een wijziging van het topleveldomein.

Shopify Storefront API · Next.js · React · TypeScript · GraphQL · Tailwind CSS · Vercel Edge Network · Shopify Checkout · Google Search Console · Structured data (Schema.org)