Introducción al Error de Sintaxis Liquid en Shopify
Shopify utiliza un lenguaje de plantillas llamado Liquid para mostrar dinámicamente el contenido de tu tienda online. Cuando editas el código fuente de tu tema (Theme.liquid, product-template.liquid, etc.) y cometes un pequeño descuido tipográfico, aparece el temido error de sintaxis Liquid. Esto suele bloquear la visualización de tu página web, mostrando un mensaje de advertencia o rompiendo por completo el diseño visual para tus clientes.
Principales causas del error Liquid
Los fallos de sintaxis en Liquid son muy comunes durante la personalización avanzada de temas. Las causas más frecuentes incluyen:
- Omitir las etiquetas de cierre en variables o bucles, como
{% endif %}o{% endfor %}. - Uso incorrecto de los delimitadores
{{ }}para salidas de datos y{% %}para lógica de programación. - Errores tipográficos en los nombres de los filtros de Liquid (por ejemplo, escribir
| upcaseeen lugar de| upcase). - Comillas dobles o simples sin cerrar dentro de los atributos de las etiquetas HTML o Liquid.
Método 1: Revisar el mensaje de error y la línea afectada
Cuando Shopify detecta un error de sintaxis al guardar un archivo, por lo general te muestra una alerta directa en el editor de código indicando la línea exacta del fallo.
- Inicia sesión en tu panel de administración de Shopify y ve a Tienda online > Temas.
- Haz clic en el botón de los tres puntos (...) junto al tema activo y selecciona Editar código.
- Busca el archivo que modificaste recientemente (el editor suele marcar con un punto rojo los archivos con problemas).
- Lee atentamente la notificación flotante en la parte inferior o superior del editor, que te indicará el número de línea aproximado.
Método 2: Corregir etiquetas de control huérfanas
La causa número uno de este error es olvidar cerrar una estructura condicional. Debes verificar que cada apertura tenga su correspondiente cierre.
Ejemplo de código incorrecto:
{% if product.available %} <p>Disponible</p>Ejemplo de código corregido:
{% if product.available %} <p>Disponible</p> {% endif %}- Localiza la etiqueta de apertura
{% if %},{% unless %}o{% for %}en la línea indicada por el sistema. - Asegúrate de añadir la etiqueta de cierre correspondiente antes de guardar los cambios en el archivo.
Método 3: Restaurar una versión anterior del archivo
Si realizaste múltiples modificaciones y no logras identificar el error exacto en el código Liquid, Shopify cuenta con un historial de versiones muy útil.
- Dentro del editor de código de tu tema, abre el archivo afectado.
Haz clic en el enlace Versiones más recientes ubicado justo debajo del nombre del archivo en la parte superior.
Selecciona una fecha y hora anterior en la que tu tienda funcionaba correctamente.
Haz clic en Guardar para revertir el código defectuoso y comprobar que tu tienda vuelve a la normalidad.