Liquid o JavaScript: cómo decidir la arquitectura de un theme de Shopify

Cuando una ficha de producto depende de JavaScript para mostrar información que ya existe en Shopify, la tienda añade una dependencia al recorrido de compra. Eso puede complicar el diagnóstico, el…

La decisión práctica es asignar cada responsabilidad a la capa adecuada: Liquid para renderizar información disponible durante la respuesta del servidor y JavaScript para las interacciones que realmente lo requieren.

Empieza por el contenido necesario para comprar

Título, precio, disponibilidad inicial, imágenes y enlaces principales deben ser comprensibles en el HTML que entrega la tienda siempre que la solución lo permita. Después, el navegador puede agregar comportamiento como seleccionar variantes, actualizar el carrito o mostrar una interacción sin recargar toda la página.

Esto no significa eliminar JavaScript. Una selección de variante puede requerir actualizar precio, disponibilidad y medios; el objetivo es evitar que la página dependa innecesariamente de esperar una petición o inicializar una aplicación completa para mostrar información básica.

Decide con una matriz sencilla

Necesidad	Punto de partida	Comprobación
Información inicial del producto	Liquid y datos disponibles en la página	Revisar HTML y respuesta cuando JavaScript falla
Cambio de variante	JavaScript acotado al componente	Probar precio, disponibilidad e imagen
Datos externos que cambian	Integración con respuesta y fallback definidos	Medir tiempo de espera y fallas
Personalización por cliente	Flujo apropiado para el dato y permisos	Evitar exponer información sensible

Para una tienda con catálogo amplio en México, prueba una ficha con numerosas variantes, una sin inventario y otra con una app de suscripciones o preventa. El rendimiento de un producto sencillo no representa necesariamente toda la tienda.

Prueba la experiencia completa

Haz cambios en una copia del theme. Registra el comportamiento antes de modificarlo y comprueba que no se rompan precios, selección de variante, carrito, medición y accesibilidad. En DevTools revisa el trabajo del hilo principal y la secuencia que muestra el contenido, no solamente el tamaño descargado.

La documentación de Shopify sobre arquitectura de themes describe las piezas disponibles. Para el contexto completo de themes, aplicaciones e integraciones consulta la guía de desarrollo Shopify.