Comment faire tourner des landing pages Framer sur une boutique Shopify

Construisez vos landing pages Framer pour les campagnes, et gardez le panier et le paiement dans votre boutique Shopify. Un cart permalink fait traverser l'acheteur et remplit son panier à sa place. Deux choses cassent ce montage. Vos statistiques se perdent entre deux domaines, et vos prix finissent par diverger. Vous pouvez régler les deux en une après-midi.

Séparez vos landing pages Framer de votre boutique Shopify

Framer prend les pages que vous changez souvent et sur lesquelles vous voulez de la liberté : pages de campagne, advertorials, histoire de marque, pages de lancement et résultats de quiz. Shopify garde tout ce qui touche à l'argent : fiches produit, collections, panier, paiement, comptes clients et suivi de commande. Ne refaites pas le tunnel de paiement.

La séparation marche parce que les deux ensembles font des jobs différents et se modifient à des rythmes très différents. Vous allez publier quatre variantes de landing page ce mois-ci, et toucher au paiement zéro fois.

Le relais, c'est un cart permalink

Shopify documente un format d'URL qui remplit un panier directement depuis un lien. Pointez votre bouton Framer vers yourstore.com/cart/VARIANT_ID:QUANTITY. Ajoutez une remise avec ?discount=CODE. Ajoutez plusieurs articles avec une virgule, comme /cart/11111:1,22222:2. Ajoutez ?storefront=true si vous voulez que l'acheteur arrive sur la page panier au lieu d'aller droit au paiement.

Vous trouvez l'ID de variante dans l'URL de l'admin Shopify quand vous ouvrez une variante. Gardez un permalien par offre dans une note partagée. Un mauvais ID de variante envoie tous les acheteurs vers le mauvais format, et vous ne le verrez qu'au rapport de préparation des commandes.

Réglez le tracking avant de dépenser le moindre centime en publicité

C'est là que la plupart des montages Framer plus Shopify cassent en silence. Le visiteur commence sur votre domaine Framer et finit sur le paiement Shopify. Sans la bonne configuration, GA4 compte une session pour deux, et Meta perd le lien entre le clic et l'achat.

Faites quatre choses. Ajoutez les deux domaines à la liste de mesure inter-domaines de GA4, ou mettez les deux sur le même domaine racine. Installez le pixel Meta dans Framer, et aussi via les Customer Events de Shopify. Faites passer vos UTM dans le permalien pour que la source survive au saut. Puis faites un vrai achat de test et vérifiez qu'il apparaît une fois dans GA4 et une fois dans Meta, pas deux fois et pas zéro.

Gardez le même prix dans les deux systèmes

Le jour où votre page Framer dit 49 dollars et où Shopify en facture 54, vous récoltez des demandes de remboursement et un problème d'avis. Écrivez le prix à un seul endroit par page. Ne le mettez jamais dans une image exportée, ni dans le visuel du hero qui vous a pris deux heures.

Au-delà de trois landing pages, déplacez l'offre dans une collection CMS Framer avec des champs pour le prix, le prix barré, le permalien et le stock. Une seule modification met alors toutes les pages à jour. Mettez un rappel mensuel pour ouvrir chaque page en ligne à côté de sa fiche produit Shopify et vérifier que les deux disent la même chose.

Protégez la vitesse que vous avez payée

Les pages Framer démarrent vite. Puis quelqu'un ajoute un widget de chat, un enregistreur de heatmap, deux pixels et un module d'avis, et le hero met quatre secondes en 4G. Le seuil Largest Contentful Paint de Google est de 2,5 secondes au 75e centile des vraies visites mobiles. C'est votre budget pour toute la page.

Servez l'image du hero à la taille où elle s'affiche vraiment. Ne la mettez pas en lazy loading. Ne chargez les widgets d'avis que sous la ligne de flottaison. Testez sur un vrai téléphone avec un réseau mobile bridé plutôt que sur un ordinateur en wifi de bureau.

Quand Framer est le mauvais outil

Un catalogue de 200 références avec filtres, recherche et stock qui change tous les jours appartient à Shopify, avec Framer réservé aux pages de campagne. Framer mérite sa place là où la qualité du design et la vitesse d'itération décident du résultat, et ça veut dire les landing pages plutôt que la navigation dans un catalogue.

Le montage, dans l'ordre

Connectez votre domaine Framer. Construisez une landing page et un cart permalink. Ajoutez le pixel sur les deux plateformes et faites passer les UTM dans le lien. Faites un vrai achat et suivez-le dans GA4, dans Meta et dans la commande Shopify. Seulement après, envoyez du budget publicitaire dessus.

Comptez une journée pour cette première page et une heure pour chacune des suivantes. La vitesse est toute la raison d'être de ce montage, donc un nouvel angle doit partir en ligne dans l'après-midi plutôt que dans un sprint.