Cómo la inteligencia artificial llevó a Shopify a recuperar el código limpio

Durante años, la evolución de las plataformas de comercio electrónico pareció seguir una regla sencilla: cuantas más posibilidades de personalización se ofrecieran, mejor sería la experiencia para los usuarios. Sin embargo, Shopify está demostrando ahora que una flexibilidad sin límites puede tener un coste elevado, especialmente cuando convierte un código relativamente sencillo en estructuras difíciles de comprender, mantener y modificar.

La empresa está preparando una nueva generación de temas para tiendas online, diseñada para sustituir progresivamente a Horizon, su actual tema base. La principal diferencia no se encuentra únicamente en el aspecto de las tiendas, sino en la forma en que está organizado su código. En lugar de depender de grandes archivos JSON, el nuevo enfoque recupera una estructura basada principalmente en HTML, complementada por el lenguaje de plantillas Liquid de Shopify.

Este cambio representa mucho más que una decisión técnica. También responde al uso creciente de agentes de inteligencia artificial en la creación y edición de tiendas online. La conclusión de Shopify resulta especialmente relevante para cualquier organización que trabaje en el ámbito digital: el código que una persona puede interpretar fácilmente también suele ser más sencillo de utilizar para una inteligencia artificial.

El regreso a un código legible

El nuevo tema base todavía no tiene un nombre definitivo, pero ya se está presentando a la comunidad de desarrolladores como una alternativa más sencilla a Horizon. Según Shopify, la nueva estructura contiene un 93% menos de líneas de código que el tema actual, lo que permite trabajar con archivos más pequeños, claros y fáciles de analizar.

Al abrir el directorio de plantillas, comerciantes y desarrolladores encuentran archivos de texto con HTML e instrucciones Liquid claramente identificables. En lugar de navegar por largas secuencias de configuraciones serializadas, pueden comprender la estructura de una página leyendo directamente su código.

Esta diferencia reduce la distancia entre lo que aparece en el editor visual y lo que existe en el código fuente. Una página deja de ser únicamente el resultado automático de numerosas opciones almacenadas en un archivo de configuración y vuelve a presentarse como un documento que puede leerse, comprenderse y adaptarse.

Para las empresas que dependen de la personalización continua de sus tiendas, este cambio puede traducirse en un mantenimiento más eficiente y una reducción del riesgo técnico. Una arquitectura legible facilita el trabajo de equipos internos, colaboradores tecnológicos y especialistas en desarrollo de comercio electrónico con Shopify Plus.

Cómo la personalización generó complejidad

En los primeros años de Shopify, los temas eran relativamente sencillos. Incluso una persona con conocimientos básicos de desarrollo web podía abrir una plantilla, identificar sus principales elementos y realizar pequeñas modificaciones. A medida que la plataforma creció, aparecieron nuevas opciones de personalización, bloques configurables y herramientas visuales capaces de controlar prácticamente todos los componentes de una página.

Esta evolución permitió que los comerciantes sin experiencia técnica desempeñaran un papel más activo en la construcción de sus tiendas. Los colores, botones, secciones, imágenes, tipografías y la disposición de los contenidos podían gestionarse desde el editor de la plataforma.

Sin embargo, cada nueva posibilidad exigía más definiciones y configuraciones. Las plantillas empezaron a depender de archivos JSON que describían la posición, el comportamiento y las propiedades de cada bloque. Aunque este sistema ofrecía una gran flexibilidad, también dificultaba la lectura del código y obligaba a los desarrolladores a consultar varios archivos para comprender una sola página.

La complejidad no apareció porque JSON fuera una tecnología inadecuada, sino porque las configuraciones comenzaron a representar demasiadas decisiones, reglas y dependencias.

El resultado fue una experiencia eficiente para el editor visual, pero menos intuitiva para quienes necesitaban desarrollar, diagnosticar u optimizar el tema. El código dejó de funcionar como una superficie de trabajo clara y pasó a comportarse como un resultado automático generado por el sistema.

La influencia de Shopify Sidekick

La adopción de Shopify Sidekick aceleró la necesidad de revisar esta arquitectura. El asistente de inteligencia artificial permite que los comerciantes describan mediante lenguaje natural los cambios que desean realizar. En lugar de buscar un código de color o modificar manualmente una configuración, el usuario puede pedir al sistema que cambie el fondo de una sección, añada un botón o reorganice determinados contenidos.

Según los datos divulgados por la empresa, alrededor del 20% de los comerciantes de Shopify ya utiliza Sidekick para editar temas y ha generado aproximadamente 25 millones de modificaciones en un solo año. Esta utilización a gran escala obligó a Shopify a pensar no solo en la experiencia humana, sino también en la forma en que los modelos de inteligencia artificial interpretan y modifican una tienda.

Los agentes de IA se benefician de las mismas características del código que valoran los desarrolladores:

• Estructuras fáciles de leer e interpretar.
• Contratos explícitos entre componentes.
• Reglas de validación coherentes.
• Mensajes de error y comentarios útiles.
• Menos dependencias ocultas entre archivos.

Esta conclusión está influyendo en la forma en que se construyen las plataformas digitales. En lugar de crear una capa adicional dedicada exclusivamente a la inteligencia artificial, Shopify ha optado por mejorar la propia base tecnológica. Al simplificar el código para los agentes, también lo ha hecho más accesible para desarrolladores, comerciantes y equipos de mantenimiento.

HTML y Liquid como lenguaje común

La elección de HTML no es casual. Los principales modelos de inteligencia artificial han sido entrenados con grandes cantidades de código web y reconocen fácilmente las relaciones entre elementos, atributos y contenidos. HTML es expresivo, utiliza una estructura local y necesita relativamente pocos tokens para describir una interfaz.

Liquid complementa esta base al permitir incorporar lógica, datos y componentes dinámicos. En la nueva arquitectura, Shopify ha introducido una sintaxis renovada, un nuevo analizador y mecanismos más rigurosos para ejecutar instrucciones en el servidor.

Para el usuario, estos cambios se traducen en bloques componibles y tipados que pueden convivir directamente con HTML. Cada componente puede recibir valores, configuraciones, sustituciones y otras instrucciones sin obligar al desarrollador a reconstruir toda la página.

Los nuevos parámetros desempeñan una función similar a las propiedades utilizadas en bibliotecas como React, pero sin exigir la creación de un DOM virtual. Shopify también ha incorporado un mecanismo de actualización parcial que permite modificar una zona específica de la página sin volver a procesar todo el contenido.

Este enfoque puede mejorar el rendimiento de la tienda, simplificar el mantenimiento y reducir la cantidad de JavaScript necesario. Para que estas ventajas produzcan resultados reales, la arquitectura debe acompañarse de prácticas consistentes de SEO técnico, accesibilidad y calidad del código.

Menos código reactivo y más acciones normalizadas

Otra novedad importante es la introducción de acciones normalizadas. Estas acciones representan acontecimientos frecuentes en una tienda online, como actualizar el carrito, cambiar una variante de producto o responder a una interacción del usuario.

Al proporcionar una forma coherente de gestionar estos eventos, Shopify espera eliminar miles de líneas de código reactivo actualmente presentes en Horizon. En lugar de que cada tema implemente su propia lógica, los desarrolladores podrán recurrir a mecanismos comunes, documentados y previsibles.

La empresa también ha creado alrededor de 20 nuevas reglas para comprobar que los temas generados cumplen los requisitos establecidos en materia de contratos, estructura, validación, complejidad, niveles de anidación y tamaño de los archivos. Esta validación es especialmente importante cuando una parte del código se crea o modifica mediante inteligencia artificial.

Un agente puede producir rápidamente una solución funcional, pero dicha solución debe respetar determinados límites técnicos y prácticas de calidad. Las reglas automáticas ayudan a evitar que una modificación aparentemente sencilla introduzca problemas de rendimiento, seguridad o mantenimiento.

Una arquitectura declarativa no siempre es más sencilla

Las arquitecturas basadas en configuraciones resultan útiles cuando todas las posibilidades pueden anticiparse. El problema aparece cuando el usuario necesita realizar algo que no estaba contemplado en el conjunto inicial de opciones.

Pensemos en una sección configurada para mostrar dos botones. En una arquitectura basada exclusivamente en ajustes, el desarrollador debe decidir con antelación cuántos botones estarán disponibles, qué campos tendrán y cómo se organizarán. Si el comerciante necesita añadir un tercer botón, puede ser necesario modificar el esquema completo de la sección.

Con HTML, esta necesidad puede resolverse de una forma más natural. Los botones pueden agruparse dentro de un elemento y es posible añadir nuevos componentes sin alterar toda la estructura de configuración. Esta libertad controlada acerca el desarrollo a la forma en que fueron concebidas originalmente las páginas web.

Esto no significa abandonar los componentes, los sistemas visuales o los editores. Significa encontrar un equilibrio entre personalización y claridad, garantizando que la plataforma siga siendo accesible sin ocultar por completo su estructura técnica.

Qué pueden aprender las empresas de este cambio

La nueva dirección de Shopify demuestra que prepararse para la inteligencia artificial no consiste únicamente en adoptar herramientas nuevas. También exige revisar sistemas, procesos y arquitecturas que han acumulado complejidad con el paso del tiempo.

Las empresas que quieran integrar agentes de IA en sus canales digitales deberían empezar por evaluar la calidad de su base tecnológica. Un código fragmentado, una documentación incompleta, contratos implícitos y comportamientos incoherentes dificultan tanto el trabajo humano como la automatización.

Una auditoría de arquitectura puede ayudar a identificar componentes redundantes, archivos excesivamente complejos, dependencias innecesarias y oportunidades de normalización. Este trabajo puede integrarse en un análisis más amplio de la infraestructura de sistemas, relacionando rendimiento, escalabilidad, seguridad y capacidad de evolución.

Entre los principales beneficios de un enfoque orientado a la legibilidad se encuentran:

1. Mayor rapidez al implementar modificaciones.
2. Menor dependencia de conocimientos técnicos concentrados en una sola persona.
3. Reducción de errores introducidos por automatizaciones o agentes de IA.
4. Integración más sencilla entre los equipos de diseño, contenido y desarrollo.
5. Mayor capacidad para probar, validar y documentar cada componente.

El futuro del código puede ser más humano

Durante años, la industria tecnológica intentó reducir la cantidad de texto y hacer que los formatos de datos fueran cada vez más compactos. JSON ganó terreno en numerosos contextos por ser menos detallado que XML, mientras que diferentes lenguajes específicos trataron de representar procesos complejos mediante sintaxis reducidas.

La expansión de la inteligencia artificial está cuestionando ahora esta tendencia. Los modelos de lenguaje han sido entrenados para interpretar relaciones semánticas, instrucciones descriptivas y estructuras similares a la comunicación humana. Por ese motivo, los formatos más explícitos pueden ofrecer mejores resultados que los lenguajes excesivamente condensados.

La experiencia de Shopify sugiere que el mejor código para una inteligencia artificial no necesita estar adaptado artificialmente a las máquinas. Puede ser simplemente buen código: claro, previsible, bien documentado y organizado mediante responsabilidades fáciles de identificar.

Al recuperar HTML y reforzar Liquid mediante componentes, contratos y validaciones, Shopify no está rechazando la innovación. Está reconociendo que la innovación sostenible depende de unas bases comprensibles.

Para comerciantes y marcas, este cambio puede facilitar la creación de experiencias digitales más personalizadas sin convertir cada modificación en un proyecto técnico complejo. Para los desarrolladores, representa la posibilidad de volver a comprender una página mediante la lectura de su código. Para los agentes de inteligencia artificial, ofrece un entorno más seguro y eficiente en el que ejecutar instrucciones.

La principal conclusión es sencilla: cuando una arquitectura está diseñada para ser comprendida, todo el mundo trabaja mejor - personas, equipos y máquinas.