Introducción al Error de Sintaxis Liquid en Shopify
Cuando personalizamos una tienda online en Shopify mediante la edición de código en las plantillas, es muy común encontrarnos con mensajes de error relacionados con el lenguaje de plantillas Liquid. El Error de Sintaxis Liquid (Liquid Syntax Error) bloquea la correcta visualización de tu página web, mostrando advertencias en la vista previa o impidiendo guardar los cambios realizados en el archivo.
Causas Principales del Error de Sintaxis en Liquid
Este tipo de fallo técnico suele producirse por pequeños descuidos al escribir código dentro de las secciones, bloques o snippets de tu tema de Shopify. Entre las causas más frecuentes destacan:
- Etiquetas de apertura o cierre mal escritas (por ejemplo, usar
{% if %}sin su correspondiente{% endif %}). - Uso incorrecto de filtros o espacios dentro de las llaves dobles
{{ }}o llaves con porcentaje{% %}. - Variables no definidas o llamadas a objetos inexistentes dentro del ecosistema de Shopify.
- Comillas faltantes o mal cerradas en los atributos de las etiquetas Liquid.
Método 1: Localizar la Línea del Error mediante el Mensaje de Shopify
El primer paso para solucionar el problema es leer detenidamente la alerta que proporciona el propio editor de código de Shopify. Sigue estos pasos:
- Accede a tu panel de administración de Shopify y dirígete a Canales de venta > Tienda online > Temas.
- Haz clic en el botón de los tres puntos (...) junto al tema activo y selecciona Editar código.
- Revisa la notificación de error que aparece en la parte inferior de la pantalla o en la barra superior al intentar guardar. El sistema suele indicar el nombre exacto del archivo (por ejemplo,
index.liquidoproduct-template.liquid) y el número de línea aproximado. - Navega hasta el archivo señalado y busca la línea exacta del fallo.
Método 2: Corregir Etiquetas y Sintaxis Comunes
Una vez identificada la sección conflictiva, debes revisar la sintaxis del código Liquid. Aplica las siguientes correcciones según corresponda:
- Asegúrate de que cada sentencia condicional tenga su cierre correcto. Ejemplo erróneo:
{% if product.available %} <p>En stock</p>. Ejemplo correcto:{% if product.available %} <p>En stock</p> {% endif %}. - Verifica el uso de filtros separados por barras verticales. Ejemplo correcto:
{{ product.title | capitalize }}. - Si sospechas de un bloque entero de código, coméntalo temporalmente utilizando la etiqueta
{% comment %} tu código aquí {% endcomment %}para verificar si el error desaparece.
Método 3: Revertir a una Versión Anterior del Archivo
Si has realizado múltiples modificaciones y no logras dar con el error exacto de sintaxis, Shopify ofrece una herramienta nativa de control de versiones para restaurar archivos individuales:
- Dentro del editor de código, abre el archivo que está generando el fallo.
- Busca en la parte superior del editor de código el enlace que dice Versiones anteriores (Older versions).
- Haz clic en él y selecciona la fecha y hora exacta previa a haber realizado los cambios defectuosos.
- Haz clic en Guardar para aplicar la versión estable anterior y comprobar que la tienda vuelve a funcionar con normalidad.