Temas y front-end
Liquid
Liquid es el lenguaje de plantillas con el que se construyen los temas de Shopify. Se ejecuta en el servidor de Shopify antes de enviar el HTML al navegador, así que puede leer productos, colecciones, el cliente o el carrito, pero no puede reaccionar a nada que pase después en la página.
También: lenguaje Liquid, plantillas Liquid, Shopify Liquid
Entender dónde se ejecuta Liquid resuelve el 90 % de las dudas sobre qué se puede hacer en un tema. Liquid pasa una vez, en el servidor. Cuando el HTML llega al navegador, Liquid ya ha terminado: a partir de ahí todo es JavaScript.
Lo que eso implica en la práctica
- Un precio que depende del cliente se puede decidir en Liquid porque la sesión ya existe cuando se renderiza. Por eso
customer.b2b?es la forma correcta de que un precio mayorista no llegue nunca al HTML de un visitante sin sesión. - Un cambio de cantidad en el carrito no puede resolverlo Liquid: eso es la Cart API. Lo que sí se puede es pedirle a Shopify que vuelva a renderizar una sección y devolver su HTML.
- Un filtro de colección con 20 combinaciones no se monta con bucles de Liquid: se monta con los filtros nativos de la tienda.
El coste de un bucle
Liquid tiene límites de ejecución por página, y los temas lentos casi siempre tienen la misma causa: bucles anidados sobre colecciones grandes. Recorrer todas las variantes de todos los productos de una colección para calcular algo es la forma más rápida de que una página tarde segundos.
La alternativa suele ser un metacampo con el dato ya calculado. Mover el cálculo del render al momento de guardar es la optimización que más veces he aplicado.
Referencia: Liquid.