Come usare landing page Framer su uno store Shopify

Costruisci le tue landing page Framer per le campagne e tieni carrello e checkout dentro il tuo store Shopify. Un cart permalink porta di là chi compra e gli riempie il carrello. Due cose rompono questo setup. I tuoi dati si confondono con due domini e i tuoi prezzi si allontanano tra loro. Puoi sistemare tutte e due le cose in un pomeriggio.

Separa le landing page Framer dallo store Shopify

Framer si prende le pagine che cambi spesso e su cui vuoi libertà di design: landing page di campagna, advertorial, la storia del brand, le pagine di lancio e i risultati dei quiz. Shopify tiene tutto quello che ha a che fare con i soldi: pagine prodotto, collezioni, carrello, checkout, account clienti e stato dell'ordine. Il checkout lascialo dov'è.

La divisione funziona perché i due gruppi fanno lavori diversi e si modificano a ritmi molto diversi. Questo mese pubblicherai quattro varianti di landing page e toccherai il checkout zero volte.

Il passaggio di consegne è un cart permalink

Shopify documenta un formato di URL che riempie un carrello direttamente da un link. Punta il pulsante di Framer su yourstore.com/cart/VARIANT_ID:QUANTITY. Aggiungi uno sconto con ?discount=CODE. Aggiungi più di un articolo con una virgola, tipo /cart/11111:1,22222:2. Aggiungi ?storefront=true se vuoi che chi compra atterri sulla pagina del carrello invece di andare dritto al checkout.

L'ID della variante lo trovi nell'URL dell'admin Shopify quando apri una variante. Tieni un permalink per offerta in una nota condivisa. Un ID variante sbagliato manda tutti quelli che comprano sul formato sbagliato, e te ne accorgerai solo dal report della logistica.

Sistema il tracciamento prima di spendere un dollaro in ads

È qui che quasi tutti i setup Framer più Shopify si rompono in silenzio. Il visitatore parte dal tuo dominio Framer e finisce sul checkout Shopify. Senza la configurazione giusta, GA4 conta una sessione come due e Meta perde il legame tra il clic e l'acquisto.

Fai quattro cose. Aggiungi entrambi i domini alla lista della misurazione cross-domain di GA4, oppure mettili tutti e due sullo stesso dominio radice. Installa il pixel di Meta in Framer e di nuovo tramite Shopify Customer Events. Passa i tuoi UTM attraverso il permalink, così la sorgente sopravvive al salto. Poi fai un acquisto di prova vero e verifica che compaia una volta in GA4 e una volta in Meta, non due e non zero.

Tieni il prezzo onesto in due sistemi

Nel momento in cui la tua pagina Framer dice 49 dollari e Shopify ne addebita 54, ti arrivano richieste di rimborso e un problema di recensioni. Scrivi il prezzo esattamente in un punto per pagina. Non metterlo mai dentro un'immagine esportata, e mai dentro la grafica hero che ti ha portato via due ore.

Quando superi le tre landing page, sposta l'offerta in una collezione CMS di Framer con i campi prezzo, prezzo barrato, permalink e disponibilità. Una modifica sola aggiorna ogni pagina. Metti un promemoria mensile per aprire ogni pagina live accanto al suo prodotto Shopify e controllare che i due coincidano.

Proteggi la velocità che hai pagato

Le pagine Framer partono veloci. Poi qualcuno aggiunge un widget di chat, un registratore di heatmap, due pixel e un embed di recensioni, e la hero ci mette quattro secondi in 4G. La soglia di Google per il Largest Contentful Paint è 2,5 secondi al 75° percentile delle visite mobile reali. Quello è il budget per tutta la pagina.

Servi l'immagine hero alla misura in cui viene mostrata davvero. Sulla hero salta il lazy loading. Carica i widget delle recensioni solo sotto il fold. Prova su un telefono vero con rete mobile limitata invece che su un desktop con il wifi dell'ufficio.

Quando Framer è lo strumento sbagliato

Un catalogo da 200 SKU con filtri, ricerca e scorte che cambiano ogni giorno sta in Shopify, con Framer usato solo per le pagine di campagna. Framer si guadagna il posto dove qualità del design e velocità di iterazione decidono il risultato, cioè sulle landing page più che sulla navigazione di un catalogo.

Il setup, in ordine

Collega il tuo dominio Framer. Costruisci una landing page e un cart permalink. Aggiungi il pixel su tutte e due le piattaforme e passa gli UTM nel link. Fai un acquisto vero e seguilo dentro GA4, Meta e l'ordine Shopify. Solo dopo puntaci sopra il budget pubblicitario.

Metti in conto un giorno per la prima pagina e un'ora per ogni pagina successiva. La velocità è tutto il motivo per cui usi questo stack, quindi un angolo nuovo deve andare online in un pomeriggio invece che in uno sprint.