Zo draai je Framer landing pages op een Shopify store

Bouw je Framer landing pages voor campagnes en houd de winkelwagen en de checkout binnen je Shopify store. Een cart permalink brengt de koper over en vult zijn winkelwagen alvast. Twee dingen slopen deze opzet. Je analytics raakt in de war van twee domeinen, en je prijzen lopen uit elkaar. Allebei los je op in een middag.

Scheid je Framer landing pages van je Shopify store

Framer krijgt de pagina's die je vaak aanpast en waar je designvrijheid wilt: campagne landing pages, advertorials, het merkverhaal, launchpagina's en quizuitslagen. Shopify houdt alles wat met geld te maken heeft: productpagina's, collecties, winkelwagen, checkout, klantaccounts en orderstatus. Bouw de checkout niet na.

Die scheiding werkt omdat de twee groepen ander werk doen en in een heel ander tempo bewerkt worden. Je zet deze maand vier varianten van een landing page live en komt nul keer aan je checkout.

De overdracht is een cart permalink

Shopify documenteert een URL-formaat dat een winkelwagen rechtstreeks vanuit een link vult. Laat je Framer-knop wijzen naar yourstore.com/cart/VARIANT_ID:QUANTITY. Voeg een korting toe met ?discount=CODE. Voeg meer dan één artikel toe met een komma, zoals /cart/11111:1,22222:2. Zet er ?storefront=true achter als je wilt dat de koper op de winkelwagenpagina landt in plaats van direct in de checkout.

Het variant ID vind je in de URL van je Shopify admin zodra je een variant opent. Houd per aanbieding één permalink bij in een gedeelde notitie. Een verkeerd variant ID stuurt elke koper naar het verkeerde formaat, en je ziet het pas terug in het fulfilmentrapport.

Repareer je tracking voordat je een dollar aan advertenties uitgeeft

Hier gaan de meeste combinaties van Framer en Shopify stilletjes mis. De bezoeker begint op je Framer-domein en eindigt in de Shopify checkout. Zonder de juiste instellingen telt GA4 één sessie als twee, en verliest Meta het verband tussen de klik en de aankoop.

Doe vier dingen. Zet allebei de domeinen in de lijst voor cross-domain meting in GA4, of hang ze allebei onder hetzelfde hoofddomein. Installeer de Meta pixel in Framer, en nog een keer via Shopify Customer Events. Geef je UTM's mee in de permalink, zodat de bron de sprong overleeft. Doe daarna één echte testaankoop en controleer of die één keer in GA4 en één keer in Meta verschijnt, niet twee keer en niet nul keer.

Houd je prijs kloppend in twee systemen

Op het moment dat je Framer-pagina 49 dollar zegt en Shopify 54 rekent, krijg je verzoeken om geld terug en een probleem met je reviews. Schrijf de prijs op precies één plek per pagina. Zet hem nooit in een geëxporteerde afbeelding, en nooit in de hero-graphic waar je twee uur aan hebt gewerkt.

Zodra je boven de drie landing pages komt, zet je de aanbieding in een Framer CMS-collection met velden voor prijs, compare at price, permalink en voorraadstatus. Één aanpassing werkt dan elke pagina bij. Zet een maandelijkse herinnering om elke live pagina naast zijn Shopify-product te openen en te checken of ze overeenkomen.

Bescherm de snelheid waar je voor betaald hebt

Framer-pagina's beginnen snel. Dan zet iemand er een chatwidget bij, een heatmap-recorder, twee pixels en een review-embed, en doet je hero er vier seconden over op 4G. De drempel van Google voor Largest Contentful Paint ligt op 2,5 seconden bij het 75e percentiel van echte mobiele bezoeken. Dat is je budget voor de hele pagina.

Serveer je hero-afbeelding op de maat waarop hij echt getoond wordt. Zet lazy loading er niet op. Laad review-widgets alleen onder de fold. Test op een echte telefoon met afgeknepen mobiele data in plaats van op een desktop met kantoorwifi.

Wanneer Framer het verkeerde gereedschap is

Een catalogus van 200 SKU's met filters, zoeken en dagelijkse voorraadwijzigingen hoort in Shopify, met Framer alleen voor de campagnepagina's. Framer verdient zijn plek waar designkwaliteit en snelheid van itereren de uitkomst bepalen, en dat betekent landing pages en geen catalogus om doorheen te bladeren.

De opzet, op volgorde

Koppel je Framer-domein. Bouw één landing page en één cart permalink. Zet de pixel op allebei de platforms en geef je UTM's mee in de link. Doe één echte aankoop en volg hem door GA4, Meta en de Shopify-bestelling heen. Pas daarna zet je er advertentiebudget op.

Reken op een dag voor die eerste pagina en een uur voor elke pagina daarna. Snelheid is de hele reden om deze stack te draaien, dus een nieuwe invalshoek gaat live in een middag in plaats van in een sprint.