Introducción al Error de Sintaxis Liquid en Shopify
El motor de plantillas Liquid es el corazón visual de Shopify, permitiendo mostrar dinámicamente los productos, colecciones y datos de los clientes. Sin embargo, un pequeño error tipográfico al editar el código de tu tema puede romper por completo el diseño de tu tienda online, mostrando mensajes de error crípticos o secciones en blanco.
¿Cuáles son las causas comunes del error de Liquid?
Los errores en los archivos Liquid suelen ocurrir por los siguientes motivos:
- Falta de etiquetas de cierre en condicionales (
{% if %}sin su correspondiente{% endif %}). - Uso incorrecto de los delimitadores
{{ }}para variables y{% %}para lógica. - Filtros mal escritos o nombres de variables inexistentes en el objeto del tema.
- Comillas o caracteres especiales mal escapados dentro de las cadenas de texto.
Método 1: Revisar el Historial de Cambios del Tema
Si el error comenzó inmediatamente después de editar el código, puedes revertir los cambios de manera muy sencilla desde el panel de administración.
- Inicia sesión en tu panel de control de Shopify y ve a Tienda online > Temas.
- Haz clic en los tres puntos (...) junto al tema activo y selecciona Editar código.
- Busca el archivo que modificaste recientemente (por ejemplo,
index.liquidoproduct-template.liquid). - En la parte superior del editor de código, haz clic en el botón Historial.
- Selecciona una versión anterior del archivo previa al fallo y haz clic en Guardar.
Método 2: Validar la Sintaxis de Etiquetas y Filtros
Si necesitas mantener el código nuevo, debes auditar línea por línea para encontrar el error tipográfico.
- Identifica el archivo y la línea exacta que menciona el mensaje de error de Shopify.
- Comprueba que cada apertura de etiqueta tenga su respectivo cierre, por ejemplo:
{% for product in collection.products %}debe cerrarse obligatoriamente con{% endfor %}. - Asegúrate de no mezclar los delimitadores. Las variables van entre llaves dobles
{{ product.title }}y las sentencias de control entre llaves y porcentajes{% assign variable = true %}. - Utiliza la vista previa del tema para verificar que los cambios se hayan aplicado correctamente antes de publicarlos.