Introducción al Error de Sintaxis Liquid en Shopify
El motor de plantillas de Shopify, conocido como Liquid, es la base sobre la cual se construyen todas las tiendas en esta plataforma. Sin embargo, cuando realizamos modificaciones manuales en el código fuente de nuestros temas (como Debut, Dawn o temas personalizados), es muy común cometer pequeños errores tipográficos que provocan una caída visual en la tienda o impiden que la página cargue correctamente, mostrando un mensaje de error de sintaxis.
Causas Principales del Error en Liquid
Los errores en los archivos Liquid suelen ocurrir por razones muy específicas relacionadas con la estructura del código. Las causas más frecuentes incluyen:
- Etiquetas de apertura o cierre incompletas (por ejemplo, olvidar cerrar un bloque
{% if %}con un{% endif %}). - Uso incorrecto de los delimitadores de variables
{{ }}en lugar de las etiquetas de control{% %}. - Variables no definidas o filtros mal escritos.
- Comillas o símbolos especiales mal escapados dentro de las cadenas de texto.
Método 1: Identificar el Archivo y la Línea del Error desde el Editor
Cuando ocurre un fallo crítico de sintaxis, Shopify suele bloquear la visualización de la tienda en el frontend y muestra una advertencia directa en el panel de administración. Sigue estos pasos para localizarla:
- Inicia sesión en tu panel de administración de Shopify y dirígete a Tienda online > Temas.
- Haz clic en el botón de los tres puntos (...) junto al tema activo y selecciona Editar código.
- Busca la barra de notificaciones superior o revisa los archivos recientes modificados. Shopify marcará con un punto rojo o un mensaje de advertencia el archivo exacto donde se originó el fallo de sintaxis Liquid.
- Abre el archivo indicado y desplázate hasta el número de línea que especifica el mensaje de error del sistema.
Método 2: Corregir Etiquetas y Delimitadores en el Código
Una vez ubicado el fragmento defectuoso, debes aplicar la corrección lógica utilizando la sintaxis oficial de Liquid:
- Revisa que todas las condiciones lógicas tengan su correspondiente etiqueta de cierre. Ejemplo incorrecto:
{% if product.available %}(falta el cierre).Disponible
- Asegúrate de cerrarlo correctamente añadiendo la instrucción final:
{% if product.available %}.Disponible
{% endif %} - Verifica que los filtros estén separados correctamente mediante el símbolo pleca
|. Ejemplo:{{ product.title | downcase }}. - Haz clic en el botón Guardar en la esquina superior derecha del editor y recarga tu tienda en una pestaña de incógnito para verificar que el error ha desaparecido.