Introducción al Error de Sintaxis en Liquid

Liquid es el lenguaje de plantillas de código abierto creado por Shopify que se utiliza para cargar contenido dinámico en las páginas de tu tienda virtual. Cuando se editan los archivos del tema (como index.liquid, product.json o theme.liquid) y se comete un pequeño fallo de sintaxis, Shopify bloquea la visualización de la página y muestra un mensaje de error que interrumpe la experiencia del usuario y puede afectar directamente a tus conversiones.

Causas Principales del Error en Liquid

• Etiquetas de apertura o cierre mal escritas (por ejemplo, usar {% if %} sin su correspondiente {% endif %}).
• Uso de filtros o variables no definidos o mal escritos en el código.
• Comillas faltantes o mal cerradas dentro de las sentencias u objetos.
• Modificaciones directas en archivos JSON con errores de formato.

Método 1: Revertir los cambios usando el Historial de Temas

La forma más rápida y segura de solucionar un error crítico en Liquid sin perder horas depurando código es utilizar la función nativa de control de versiones de Shopify.

1. Inicia sesión en tu panel de administración de Shopify.
2. Ve a Tienda online > Temas.
3. En tu tema activo, haz clic en el botón de los tres puntos (...) y selecciona Editar código.
4. Busca el archivo que editaste recientemente y que causó el error.
5. En la parte superior del editor de código del archivo, busca y haz clic en el enlace Historial de versiones anteriores.
6. Selecciona la versión previa al momento en que introdujiste el fallo y haz clic en Guardar.

Método 2: Validar y Corregir la Sintaxis Manualmente

Si necesitas mantener el código modificado y corregir el error de sintaxis manualmente, sigue estos pasos:

1. Identifica el mensaje exacto de error que muestra Shopify, el cual suele indicar la línea y el archivo afectado.
2. Revisa las etiquetas de control de flujo. Cada {% if %}, {% unless %} o {% for %} debe cerrarse estrictamente con su etiqueta final {% endif %}, {% endunless %} o {% endfor %}.
3. Asegúrate de que los objetos estén delimitados correctamente por dobles llaves {{ variable }} y las etiquetas lógicas por {% %}.
4. Utiliza un editor de código externo como Visual Studio Code con extensiones de soporte para Liquid para detectar errores de sintaxis en tiempo real antes de pegarlo en Shopify.