Shopify

Adaptador Shopify sin app, y sus límites reales.

Growth Lab funciona en Shopify sin instalar una app. El adaptador es un módulo opcional del SDK que detecta el contexto de la tienda y observa el carrito.

Activarlo

Instala el snippet en theme.liquid, dentro del <head>.
En Sitios → Configuración, activa Adaptador Shopify.

El SDK cargará shopify.js (≈0.95 KB gzip) solo cuando esa opción esté activa.

{% comment %} theme.liquid, dentro de <head> {% endcomment %}
<script
  src="https://cdn.growthlab.ecomlabs.dev/sdk/v1/bootstrap.js"
  data-site-id="site_TU_ID_PUBLICO"
  async
></script>

Qué detecta

Señal	Origen
Tipo de página	`home`, `product`, `collection`, `cart`, `search`, `blog`, `checkout`
Moneda	`Shopify.currency.active`
Locale	`Shopify.locale`
Tienda	`Shopify.shop`
Add to cart	`POST /cart/add.js`
Cambio de cantidad	`POST /cart/change.js`
Actualización de carrito	`POST /cart/update.js`
Clic hacia checkout	enlaces `/checkout`, `button[name="checkout"]`

El tipo de página alimenta la segmentación por page_type, así que puedes lanzar un experimento solo en páginas de producto sin escribir una regla de URL.

Cómo observa el carrito

El adaptador envuelve fetch y XMLHttpRequest y observa las respuestas de los endpoints de carrito. Todos los temas y apps de Shopify usan esos mismos endpoints, así que capta cualquier add to cart sin depender del marcado del tema.

Dos garantías:

La petición original siempre se ejecuta y su resultado se devuelve intacto. El comportamiento de tu tienda es idéntico con o sin el adaptador.
La respuesta se lee sobre un clon. Leer el cuerpo original lo consumiría y rompería el tema.

Si la instrumentación falla, el error se descarta silenciosamente antes de tocar la petición real.

Límite importante: precios, impuestos, envío y checkout

El adaptador es observacional. No modifica precios, impuestos, costes de envío ni el checkout, y no debe usarse para intentarlo.

Esto no es una limitación de esta implementación, es una propiedad de Shopify: esos valores se calculan en el servidor de Shopify. Cualquier cambio hecho desde JavaScript en el navegador sería:

Cosmético. El precio mostrado cambiaría; el que se cobra, no.
Engañoso para el cliente, que vería un importe distinto al del cargo.
Invisible en el checkout, que corre en checkout.shopify.com, fuera de tu dominio y sin tu JavaScript.

Un test de precio real necesita un conector de servidor autorizado (Shopify Functions, Scripts, o una app con permisos de precios). Growth Lab expone esas pruebas como funcionalidad pendiente de conector, no como algo que el snippet pueda hacer.

Lo que sí puedes testear con seguridad: copy, layout, imágenes, orden de elementos, CTAs, badges de envío gratis, urgencia, prueba social, y cualquier cambio de presentación.

Registrar compras

El checkout de Shopify está fuera de tu dominio, así que la conversión debe reportarse desde donde sí puedes ejecutar código. Cuatro opciones:

1. Página de agradecimiento (Order Status)

En Configuración → Checkout → Scripts adicionales:

<script
  src="https://cdn.growthlab.ecomlabs.dev/sdk/v1/bootstrap.js"
  data-site-id="site_TU_ID_PUBLICO"
  async
></script>
<script>
  window.GrowthLab = window.GrowthLab || { q: [] };
  GrowthLab.conversion('purchase', {
    value: {{ order.total_price }},
    currency: '{{ order.currency }}',
    orderId: '{{ order.order_number }}'
  });
</script>

order.total_price ya viene en unidades mínimas, que es exactamente lo que espera la API. orderId garantiza que una recarga de la página no duplique el pedido.

2. Google Tag Manager

Ver GTM.

3. Evento personalizado desde tu tema

GrowthLab.conversion('purchase', { value: 129900, currency: 'MXN', orderId: '1042' });

4. Conector de servidor (futuro)

Un webhook orders/create firmado permitiría atribuir compras sin depender del navegador. Es la única forma fiable de capturar pedidos con bloqueadores agresivos o compras completadas en otro dispositivo.

Navegación dinámica

Los temas con transiciones sin recarga (Hydrogen, temas con sections dinámicas, quick view, cart drawer) funcionan: el SDK detecta cambios de URL vía history y MutationObserver, y vuelve a resolver los experimentos en cada ruta.

Un visitante no cambia de variante al navegar: la asignación es determinística y persistente.