Cómo usar landing pages de Framer en una tienda Shopify

Monta tus landing pages de Framer para las campañas y deja el carrito y el pago dentro de tu tienda Shopify. Un enlace directo al carrito lleva al comprador al otro lado y le deja el carrito lleno. Dos cosas rompen este montaje. Tus analíticas se lían con dos dominios, y los precios se te descuadran. Las dos se arreglan en una tarde.

Separa tus landing pages de Framer de tu tienda Shopify

Framer se queda con las páginas que cambias a menudo y en las que quieres libertad de diseño: landing pages de campaña, advertoriales, la historia de marca, las páginas de lanzamiento y los resultados de un quiz. Shopify se queda con todo lo que toca dinero: páginas de producto, colecciones, carrito, pago, cuentas de cliente y estado del pedido. No rehagas el checkout.

La separación funciona porque los dos grupos hacen trabajos distintos y se editan a ritmos muy distintos. Este mes vas a publicar cuatro variantes de landing page y vas a tocar el checkout cero veces.

El traspaso es un enlace directo al carrito

Shopify documenta un formato de URL que llena el carrito directamente desde un enlace. Apunta tu botón de Framer a yourstore.com/cart/VARIANT_ID:QUANTITY. Añade un descuento con ?discount=CODE. Añade más de un artículo con una coma, así: /cart/11111:1,22222:2. Y añade ?storefront=true si quieres que el comprador aterrice en la página del carrito en vez de ir directo al pago.

El VARIANT_ID lo encuentras en la URL del admin de Shopify cuando abres una variante. Guarda un enlace por oferta en una nota compartida. Un VARIANT_ID equivocado manda a todos los compradores al tamaño de pack equivocado, y no te enteras hasta el informe de envíos.

Arregla el tracking antes de gastar un dólar en anuncios

Aquí es donde se rompen en silencio casi todos los montajes de Framer con Shopify. El visitante empieza en tu dominio de Framer y termina en el pago de Shopify. Sin la configuración correcta, GA4 cuenta una sesión como dos y Meta pierde el vínculo entre el clic y la compra.

Haz cuatro cosas. Añade los dos dominios a la lista de medición entre dominios de GA4, o pon los dos bajo el mismo dominio raíz. Instala el píxel de Meta en Framer y otra vez a través de Shopify Customer Events. Pasa tus UTM por el enlace para que la fuente sobreviva al salto. Y luego haz una compra real de prueba y confirma que aparece una vez en GA4 y una vez en Meta, ni dos veces ni ninguna.

Mantén el precio honesto en dos sistemas

En cuanto tu página de Framer dice 49 dólares y Shopify cobra 54, te llegan peticiones de reembolso y un problema de reseñas. Escribe el precio en un único sitio por página. Nunca lo metas dentro de una imagen exportada, y menos dentro del gráfico del hero que te costó dos horas.

Cuando pases de tres landing pages, mueve la oferta a una colección del CMS de Framer con campos para precio, precio comparativo, enlace de carrito y estado de stock. Con una sola edición actualizas todas las páginas. Ponte un recordatorio mensual para abrir cada página en vivo al lado de su producto de Shopify y comprobar que las dos dicen lo mismo.

Protege la velocidad por la que pagaste

Las páginas de Framer arrancan rápidas. Luego alguien añade un chat, un grabador de mapas de calor, dos píxeles y un widget de reseñas, y el hero tarda cuatro segundos en 4G. El umbral de Largest Contentful Paint de Google es de 2,5 segundos en el percentil 75 de las visitas reales desde el móvil. Ese es tu presupuesto para la página entera.

Sirve la imagen del hero al tamaño al que se ve de verdad. No le pongas lazy loading. Carga los widgets de reseñas solo por debajo del fold. Y prueba en un móvil real con datos móviles limitados en vez de en un escritorio con el wifi de la oficina.

Cuándo Framer es la herramienta equivocada

Un catálogo de 200 SKU con filtros, buscador y cambios de stock a diario va en Shopify, con Framer solo para las páginas de campaña. Framer se gana su sitio donde la calidad del diseño y la velocidad de iteración deciden el resultado, y eso son landing pages más que navegar un catálogo.

El montaje, por orden

Conecta tu dominio de Framer. Monta una landing page y un enlace de carrito. Pon el píxel en las dos plataformas y pasa las UTM por el enlace. Haz una compra real y síguela por GA4, por Meta y por el pedido de Shopify. Solo entonces apunta la inversión publicitaria hacia ahí.

Cuenta con un día para esa primera página y una hora para cada página siguiente. La velocidad es toda la razón para usar este stack, así que un ángulo nuevo debería estar en vivo en una tarde en vez de en un sprint.