So betreibst du Framer Landing Pages mit einem Shopify Store

Bau deine Framer Landing Pages für Kampagnen und lass Warenkorb und Checkout in deinem Shopify Store. Ein Cart Permalink trägt den Käufer hinüber und füllt ihm gleich den Warenkorb. Zwei Dinge zerlegen dieses Setup. Dein Analytics kommt mit zwei Domains durcheinander, und deine Preise laufen auseinander. Beides bekommst du an einem Nachmittag in den Griff.

Trenn deine Framer Landing Pages von deinem Shopify Store

Framer bekommt die Seiten, die du oft änderst und bei denen du Gestaltungsfreiheit willst: Kampagnenseiten, Advertorials, die Markengeschichte, Launch-Seiten und Quiz-Ergebnisse. Shopify behält alles, wo Geld fließt: Produktseiten, Kollektionen, Warenkorb, Checkout, Kundenkonten und Bestellstatus. Bau den Checkout nicht nach.

Die Trennung funktioniert, weil die beiden Gruppen unterschiedliche Jobs haben und in völlig unterschiedlichem Takt bearbeitet werden. Diesen Monat stellst du vier Landing-Page-Varianten live und fasst den Checkout null Mal an.

Die Übergabe läuft über einen Cart Permalink

Shopify dokumentiert ein URL-Format, das den Warenkorb direkt über einen Link füllt. Richte deinen Framer-Button auf deinshop.de/cart/VARIANT_ID:QUANTITY. Einen Rabatt hängst du mit ?discount=CODE an. Mehrere Artikel trennst du mit Komma, zum Beispiel /cart/11111:1,22222:2. Mit ?storefront=true landet der Käufer auf der Warenkorbseite statt direkt im Checkout.

Die Variant-ID findest du in der URL im Shopify-Admin, wenn du eine Variante öffnest. Halte pro Angebot einen Permalink in einer gemeinsamen Notiz fest. Eine falsche Variant-ID schickt jeden Käufer zur falschen Packungsgröße, und auffallen wird es dir erst im Fulfillment-Report.

Bring das Tracking in Ordnung, bevor du den ersten Euro in Ads steckst

Hier brechen die meisten Setups aus Framer und Shopify still zusammen. Der Besucher startet auf deiner Framer-Domain und endet im Shopify-Checkout. Ohne die richtige Konfiguration zählt GA4 eine Session als zwei, und Meta verliert die Verbindung zwischen Klick und Kauf.

Mach vier Dinge. Trag beide Domains in die Liste für domainübergreifende Messung in GA4 ein, oder leg beide auf dieselbe Root-Domain. Installier den Meta-Pixel in Framer und zusätzlich über Shopify Customer Events. Reich deine UTMs durch den Permalink weiter, damit die Quelle den Sprung übersteht. Mach dann einen echten Testkauf und prüf, dass er einmal in GA4 und einmal in Meta auftaucht, weder doppelt noch gar nicht.

Halt den Preis in beiden Systemen ehrlich

In dem Moment, in dem deine Framer-Seite 49 Dollar sagt und Shopify 54 abbucht, hast du Rückerstattungsanfragen und ein Bewertungsproblem. Schreib den Preis pro Seite an genau eine Stelle. Niemals in ein exportiertes Bild, und schon gar nicht in die Hero-Grafik, an der du zwei Stunden gesessen hast.

Sobald du über drei Landing Pages hinaus bist, zieh das Angebot in eine Framer-CMS-Collection mit Feldern für Preis, Vergleichspreis, Permalink und Lagerbestand. Eine Änderung aktualisiert dann jede Seite. Setz dir eine monatliche Erinnerung, jede Live-Seite neben ihrem Shopify-Produkt zu öffnen und zu prüfen, ob beide übereinstimmen.

Schütz die Geschwindigkeit, für die du bezahlt hast

Framer-Seiten starten schnell. Dann baut jemand ein Chat-Widget, einen Heatmap-Recorder, zwei Pixel und ein Bewertungs-Embed ein, und der Hero braucht im 4G-Netz vier Sekunden. Googles Schwelle für Largest Contentful Paint liegt bei 2,5 Sekunden im 75. Perzentil echter mobiler Besuche. Das ist dein Budget für die ganze Seite.

Liefer das Hero-Bild in der Größe aus, in der es wirklich gerendert wird. Lass Lazy Loading dort weg. Bewertungs-Widgets lädst du nur unterhalb des Folds. Und teste auf einem echten Handy über gedrosseltes Mobilfunknetz statt auf dem Desktop im Büro-WLAN.

Wann Framer das falsche Werkzeug ist

Ein Katalog mit 200 SKUs, Filtern, Suche und täglich wechselnden Beständen gehört zu Shopify, und Framer übernimmt nur die Kampagnenseiten. Framer verdient seinen Platz dort, wo Designqualität und Iterationsgeschwindigkeit über das Ergebnis entscheiden, also bei Landing Pages statt beim Stöbern im Katalog.

Der Aufbau, in dieser Reihenfolge

Verbinde deine Framer-Domain. Bau eine Landing Page und einen Cart Permalink. Setz den Pixel auf beiden Plattformen und reich die UTMs durch den Link weiter. Mach einen echten Kauf und verfolg ihn durch GA4, Meta und die Shopify-Bestellung. Erst danach schickst du Werbebudget darauf.

Plan einen Tag für diese erste Seite und eine Stunde für jede weitere. Geschwindigkeit ist der ganze Grund für diesen Stack, ein neuer Winkel sollte also an einem Nachmittag live gehen statt in einem Sprint.