Für Menschen und AI Agents gebaut: Unser erster Blick auf Vercel Shop

Shopping Agents, die im Shop einkaufen

Die zweite Seite betrifft Shopping Agents, also ChatGPT, Perplexity und Co., die im Auftrag von Menschen Produkte suchen. Vercel Shop macht den Shop für sie lesbar, ohne die Seiten für menschliche Besucher zu verändern. Das haben wir uns in der Demo direkt angeschaut:

• Markdown statt HTML. Startseite, Produkte, Collections und Suche liefern strukturiertes Markdown, wenn ein Client danach fragt oder man .md an die URL hängt. Probieren Sie es selbst: Einfach in der Demo an eine Produkt-URL .md anhängen. Diese Varianten sind auf noindex gesetzt und verweisen per Canonical auf die HTML-Seite, damit Google weiterhin die richtige Seite indexiert.
• llms.txt. Eine kompakte Übersicht über den Shop für AI Agents, mit Links zu Policies, Collections und Sitemap.
• Universal Commerce Protocol (UCP). Catalog Search, Live-Verfügbarkeit pro Variante, Cart und Checkout stellt Shopify über UCP bereit, Vercel Shop leitet diese Endpoints auf der eigenen Domain weiter.
• WebMCP. Experimentell und standardmäßig aus: Search und Cart als strukturierte Tools für Agents im Browser.

Dazu kommt optional der Shop Agent, ein eingebauter Chat Assistant auf Basis von Vercels Agent Framework Eve. Er findet Produkte, beantwortet Fragen zu Versand oder Rückgabe und ändert den Warenkorb. Bestellen und bezahlen kann er nicht, der letzte Klick bleibt beim Menschen. Wie das live aussieht, zeigt Vercels eigener Merch-Shop.

Für uns ist das keine Theorie: Für unsere eigene Website haben wir llms.txt bereits umgesetzt, und das Thema AI Visibility beschäftigt inzwischen fast jedes Kundengespräch. Dass ein Shop-Template das jetzt ab Werk mitbringt, ist ein deutliches Signal.

Fast by Default: Architektur, Caching und Security

Performance ist bei Vercel Shop kein nachträgliches Tuning, sondern in der Architektur angelegt. Beim Durchklicken der Demo und beim Blick in den Code sind uns vor allem diese Entscheidungen aufgefallen:

• Shell first. Seitentitel, Hauptbild, Preis und Verfügbarkeit der gewählten Variante kommen so früh wie möglich. Recommendations, Filter oder Account-Daten laden in eigenen Suspense Boundaries nach. Die Seite wartet also nicht auf den langsamsten Shopify Request.
• Caching mit klaren Regeln. Öffentliche Daten wie Produkte, Collections und Menüs laufen über die Cache Components und Cache Tags von Next.js. Cart, Session und Kundendaten landen nie in einem Shared Cache.
• Webhook Revalidation. Ändert jemand ein Produkt im Shopify Admin, invalidiert ein signierter Webhook genau die betroffenen Inhalte. Ohne Webhooks können Produktdaten laut Doku bis zu rund 30 Tage im Cache bleiben, die Einrichtung ist also Pflicht und nicht Kür.
• Saubere Variant URLs. Farbe und Größe stehen als lesbare Parameter in der URL, etwa ?Color=Blue&Size=XS. Alte Liquid-Links mit ?variant= werden automatisch umgeleitet, und Shopify-Pfade wie Cart Permalinks oder /cart.js funktionieren weiter. Für Migrationen von bestehenden Themes ist das ein echter Pluspunkt.

Beim Thema Security spielt das Setup seine Stärke aus: Checkout und Payment-Daten bleiben komplett bei Shopify, Kartendaten berühren die Storefront nie. Customer Sessions sind verschlüsselt und liegen in HttpOnly Cookies, API Secrets bleiben serverseitig. Auf Vercel kommen Firewall und DDoS Protection dazu, optional auch die unsichtbare Bot Detection BotID.

Wichtig für die Einordnung: Das sind Architekturentscheidungen, keine Benchmarks. Wie schnell ein konkreter Shop am Ende ist, hängt wie immer von Bildern, Third-Party Scripts und dem eigenen Code ab.

Einordnung: Warum Headless, und worauf man achten sollte

Headless war für viele Shops lange ein "eigentlich spannend, aber zu aufwendig". Genau dieses Argument schwächt Vercel Shop deutlich ab. Wer mehr will als ein Theme hergibt, also eigene Markenwelten, viel Content, individuelle Integrationen oder Top-Performance, bekommt jetzt ein solides Fundament statt eines leeren Repos. Ein gut gebautes Theme bleibt für viele Händler trotzdem eine valide Wahl, der Unterschied liegt vor allem im Spielraum:

Shopify Theme (Liquid)

• Hosting bei Shopify, ohne eigenen Betrieb
• Inhalte im Theme Editor des Shopify Admin
• Gestaltung innerhalb der Theme-Logik
• Integrationen über Shopify Apps
• AI-Lesbarkeit abhängig von Theme und Apps
• Schneller Start, aber Grenzen beim Ausbau

Vercel Shop (Headless)

• Eigenes Next.js-Projekt mit Hosting auf Vercel, inklusive Edge, Firewall und Skalierung
• Commerce in Shopify, Content in einem CMS wie Sanity, beides sauber getrennt
• Volle Gestaltungsfreiheit, jede Seite und jede Komponente liegt im eigenen Code
• Shopify Apps plus eigene Routes, Search, Analytics und beliebige APIs
• Markdown, llms.txt und UCP out of the box, bereit für Agentic Commerce
• Mehr Initialaufwand, den das Template aber deutlich reduziert

Gut zu wissen vor dem Projektstart: Ein Template ist kein fertiger Shop. Beim Ausprobieren und beim Durcharbeiten der Doku sind uns ein paar Punkte aufgefallen, die man einplanen sollte. Keiner davon ist ein Showstopper, aber alle gehören in die Projektplanung:

• Vieles ist bewusst ausgeschaltet. Customer Accounts, Shop Agent, Analytics, Bot Protection und WebMCP sind standardmäßig deaktiviert. Das ist eigentlich angenehm, weil nur läuft, was man wirklich braucht, jede Funktion braucht aber eigene Konfiguration.
• Webhooks decken nicht alles ab. Produkte, Collections und Metaobjects werden sofort aktualisiert. Pages, Blogartikel, Policies, Menüs und Inventory dagegen nicht, hier braucht es eine eigene Strategie. Mit Sanity als CMS ist das für redaktionelle Inhalte ohnehin gelöst.
• Eine Sprache, ein Markt. Der Standard ist ein Deployment mit einer Sprache. i18n und Shopify Markets kommen über Skills dazu, für den DACH-Raum ist das praktisch immer Teil des Projekts.
• Der Shop Agent braucht Leitplanken. Der Chat ist öffentlich erreichbar, Modellkosten haben keine eingebaute Obergrenze. Gesprächsinhalte gehen an den Model Provider, und Conversations sind standardmäßig nicht an einen Kunden gebunden. Für europäische Shops heißt das: Rate Limits, Spending Limits und eine saubere DSGVO-Prüfung, bevor der Assistant live geht.
• Customer Accounts brauchen HTTPS und feste URLs. Shopify akzeptiert keine Wildcards bei Callback URLs, jede Production- und Preview-Domain muss einzeln registriert werden. Lokal geht das nur über einen öffentlichen HTTPS-Tunnel.
• Der Headless Sales Channel ist Pflicht. Produkte, die nur im Online Store veröffentlicht sind, erscheinen in der Storefront nicht. Das ist die klassische Stolperfalle beim ersten Setup: Wenn die Startseite leer bleibt, liegt es fast immer daran.

Wie wir bei Digit-One damit arbeiten wollen

Im Alltag setzen wir für E-Commerce auf Shopify und für Webprojekte auf Next.js mit Sanity. Wenn ein Shop mehr braucht, als ein Theme hergibt, kombinieren wir alle drei zu unserem Full Stack für Headless Commerce. Vercel Shop passt da ziemlich genau hinein, weil das Template ausdrücklich darauf ausgelegt ist, dass man eigenes CMS, eigene Search und eigene Analytics danebenstellt. Nach unseren ersten Tests sieht unser Plan so aus:

1. Shopify bleibt die Single Source of Truth für Commerce. Preise, Verfügbarkeit, Cart und Checkout kommen aus Shopify, genau wie im Template vorgesehen. Daran rütteln wir nicht.
2. Sanity übernimmt das Storytelling. Landingpages, Markenwelten, Lookbooks und redaktionelle Inhalte pflegt das Marketing in Sanity, verknüpft mit Produkten aus Shopify. So bekommen Redakteure einen komfortablen Editor, ohne dass Produktdaten doppelt gepflegt werden.
3. Das Template ist der Startpunkt, nicht das Ergebnis. Wir übernehmen das Fundament und bauen darauf das, was den Shop unterscheidet: Design, Content-Module, Integrationen. Über den update-shop Skill bleiben Verbesserungen aus dem Original nachziehbar.
4. Eigene Skills für Kundenprojekte. Die Doku empfiehlt selbst, wiederkehrende Konventionen als Project Skills festzuhalten. Genau so arbeiten wir: Jeder Shop bekommt seine eigenen Regeln für Komponenten, Data Fetching und Tests, damit AI-gestützte Entwicklung koEinordnung: Warum Headless, und worauf man achten solltensistent bleibt.
5. AI Visibility von Anfang an. Markdown Responses, llms.txt und Structured Data konfigurieren wir mit, statt sie später nachzurüsten. Wer heute einen Shop baut, baut ihn auch für Shopping Agents.

Nicht jeder Shop braucht Headless. Für viele Händler ist ein gut gebautes Shopify Theme nach wie vor die wirtschaftlichere Wahl, und das sagen wir auch so. Spannend wird Vercel Shop für Marken mit viel Content, mehreren Märkten, individuellen Integrationen oder dem Anspruch, im Agentic Commerce früh dabei zu sein. Und wer bereits ein anderes System im Einsatz hat, muss nicht alles wegwerfen: Wir schauen uns an, was da ist, und optimieren dort, wo es sich lohnt.