Cada segundo adicional de carga reduce la tasa de conversión entre un 7% y un 20%. El 53% de los usuarios en móvil abandona una página que tarda más de 3 segundos. En moda, donde la decisión de compra es muy visual y la mayoría del tráfico es móvil, la velocidad de aparición de las imágenes es crítica.

Este era el punto de partida de SATORISAN.

La marca necesitaba mejorar la velocidad de su ecommerce, pero la auditoría inicial reveló que el problema no se solucionaría con pequeños ajustes. La tienda había acumulado una deuda técnica considerable y su estructura dificultaba tanto el mantenimiento como la evolución futura de la plataforma.

La solución fue reconstruir el theme prácticamente desde cero, respetando el diseño y las necesidades de la marca, pero utilizando una arquitectura más limpia, actualizable y alineada con los estándares de Shopify.

SATORISAN: una marca internacional con tres tiendas Shopify

SATORISAN es una marca española de calzado premium conocida por su identidad propia, su cuidado por la artesanía y su filosofía de diseño consciente.

Su presencia internacional se gestiona a través de tres tiendas Shopify diferenciadas:

• Una tienda para el mercado español.
• Una tienda para el mercado europeo.
• Una tienda para el resto del mundo.

La plataforma digital debía ser capaz de trasladar la identidad visual de la marca a los distintos mercados, ofrecer una experiencia de compra fluida y facilitar el trabajo diario de los equipos de ecommerce y branding.

Sin embargo, la estructura técnica existente ya no estaba respondiendo a estas necesidades.

El problema inicial: una tienda lenta y difícil de mantener

La necesidad que motivó inicialmente el proyecto era clara: mejorar la velocidad de carga de la web.

No obstante, antes de modificar el código realizamos una auditoría completa para entender qué estaba afectando realmente al rendimiento. El análisis mostró que la lentitud no procedía de un único elemento, sino de la acumulación de diferentes problemas técnicos.

Código residual de aplicaciones desinstaladas

Durante años, la tienda había utilizado distintas aplicaciones externas para incorporar funcionalidades y construir páginas.

Algunas de estas aplicaciones ya no estaban activas, pero parte de su código seguía dentro del theme. Entre aplicaciones, Shogun y librerías que ya no eran necesarias, se cargaban más de 2 MB de JavaScript por página.

Aplicaciones como Shogun o Preorder Globo habían dejado scripts, llamadas y dependencias que continuaban afectando al rendimiento de la tienda.

JavaScript desactualizado y desarrollos acumulados

La web también contenía desarrollos realizados en diferentes etapas y por distintos equipos.

Al no existir una documentación técnica centralizada, se habían ido acumulando modificaciones, parches y llamadas a métodos antiguos de Shopify. Algunos desarrollos se solapaban entre sí y otros utilizaban APIs o estructuras que ya no respondían a las mejores prácticas actuales de la plataforma.

El resultado era un código difícil de interpretar y todavía más complejo de modificar sin generar errores en otras partes de la tienda.

Un theme que no podía actualizarse

El theme había sido modificado y resubido de una forma que impedía aplicar actualizaciones con normalidad.

Esto suponía un riesgo importante. Cada nueva actualización de Shopify o del propio theme podía requerir rehacer numerosas personalizaciones, aumentando el tiempo de mantenimiento y la probabilidad de que alguna funcionalidad dejara de funcionar.

Dependencia de aplicaciones para crear landings

El equipo de branding utilizaba Shogun para crear páginas y landings.

Aunque esta herramienta permitía construir nuevos diseños sin editar directamente el código, también generaba varias limitaciones:

• Coste recurrente de la aplicación.
• Dependencia de una plataforma externa.
• Menor control sobre el código generado.
• Limitaciones para adaptar las landings al diseño de la marca.
• Mayor carga de scripts y recursos externos.

En la práctica, el equipo no tenía autonomía completa. Para determinados cambios necesitaba recurrir a la aplicación o solicitar soporte técnico.

Core Web Vitals afectados

La combinación de JavaScript innecesario, peticiones externas y recursos pesados perjudicaba la velocidad de carga, especialmente desde dispositivos móviles.

El theme anterior tenía aproximadamente 511 KB de CSS que debía procesarse antes de mostrar la página. En la tienda española, el contenido principal tardaba alrededor de 2.600 ms en aparecer y la respuesta a las interacciones se situaba en unos 256 ms.

Estas son dos de las Core Web Vitals: indicadores que ayudan a medir cuánto tarda una página en mostrar su contenido principal y en responder a las acciones del usuario.

El problema, por tanto, no era únicamente técnico. También podía afectar a la experiencia de compra, al posicionamiento orgánico y a la conversión.

La auditoría: entender antes de desarrollar

Antes de tocar una sola línea de código, analizamos en profundidad el estado real de las tres tiendas.

El objetivo de esta fase era responder a cuatro preguntas:

• ¿Qué elementos estaban ralentizando la web?
• ¿Qué código podía recuperarse?
• ¿Qué partes debían reconstruirse?
• ¿Qué arquitectura permitiría evolucionar la tienda en el futuro?

Durante la auditoría realizamos un inventario de las aplicaciones, localizamos los scripts residuales y revisamos las principales plantillas y secciones del theme.

También medimos el rendimiento inicial de la tienda en mobile y desktop, tomando como referencia las Core Web Vitals y otros indicadores relacionados con la carga de recursos.

A partir de ese análisis clasificamos cada elemento en tres categorías:

• Código que podía mantenerse.
• Código que podía optimizarse.
• Código que debía rehacerse completamente.

Esta clasificación permitió definir el alcance del proyecto, estimar las horas necesarias y establecer un orden de prioridades junto con SATORISAN.

Reconstrucción del theme siguiendo los estándares de Shopify

La conclusión de la auditoría fue que intentar reparar la estructura existente habría requerido numerosos parches y habría mantenido gran parte de los problemas de fondo.

Por eso decidimos construir un nuevo theme siguiendo las directrices actuales de Shopify.

La reconstrucción afectó a las principales áreas de la tienda, entre ellas:

• Página de inicio.
• Header y navegación.
• Fichas de producto.
• Páginas de colección.
• Carrito lateral.
• Landings.
• Megamenú.
• Funcionalidad de preventa.
• Filtros y etiquetas.

El objetivo no era únicamente reproducir el diseño anterior. Cada componente debía reconstruirse utilizando código limpio, recursos mínimos y funcionalidades nativas siempre que fuera posible.

Menos dependencias externas y más desarrollo propio

Uno de los principios del proyecto fue reducir la dependencia de aplicaciones externas.

No todas las aplicaciones de Shopify son negativas. Muchas resuelven necesidades específicas de forma rápida y eficiente. El problema aparece cuando una tienda acumula aplicaciones que realizan tareas similares, cargan recursos en todas las páginas o dejan código después de ser eliminadas.

En este caso sustituimos las principales funcionalidades de Shogun y Preorder Globo por desarrollos propios adaptados a las necesidades reales de SATORISAN.

Uno de los ejemplos de esta estrategia es el sistema de aviso de disponibilidad (back in stock): en lugar de depender de una app externa, se desarrolló una integración propia con la plataforma de email marketing, totalmente adaptada al diseño e idioma de cada tienda.

Este enfoque permite controlar mejor qué código se ejecuta, cuándo se carga y qué función cumple dentro de la tienda.

También reduce el riesgo de que una actualización, un cambio de tarifa o la desaparición de una aplicación afecte a funcionalidades esenciales del ecommerce.

Secciones reutilizables para que branding pueda crear landings

Uno de los mayores retos del proyecto era dar autonomía al equipo de branding sin volver a depender de un constructor externo.

Para conseguirlo desarrollamos un sistema de secciones configurables desde el editor visual de Shopify.

En lugar de crear una sección diferente para cada posible diseño, construimos un conjunto reducido de secciones reutilizables con múltiples opciones de personalización.

Desde el editor, el equipo puede modificar aspectos como:

• Distribución de los contenidos.
• Textos y llamadas a la acción.
• Imágenes y vídeos.
• Alineaciones.
• Espaciados.
• Colores.
• Variantes de diseño.
• Orden de los bloques.

De esta forma, una misma sección puede adoptar composiciones visuales muy diferentes sin necesidad de duplicar código.

El equipo de branding puede combinar estas secciones para crear nuevas landings directamente desde Shopify, manteniendo el control creativo y reduciendo la dependencia del departamento técnico.

La inversión en desarrollo se realiza una vez, pero las secciones pueden reutilizarse en futuras campañas, lanzamientos y páginas de categoría.

Un único carrito para mobile y desktop

La tienda anterior utilizaba comportamientos diferentes para el carrito en función del dispositivo.

Esto aumentaba la complejidad del desarrollo y podía provocar inconsistencias entre mobile y desktop.

En el nuevo theme unificamos el funcionamiento para ambos dispositivos.

La solución aprovecha la llamada nativa al carrito de Shopify, pero aplica el diseño personalizado definido por SATORISAN. De esta manera se mantiene la experiencia visual de la marca sin construir una funcionalidad paralela sobre el carrito original.

El resultado es una estructura más sencilla, coherente y fácil de mantener.

Lectura recomendada: Shopify Checkout: seguridad, velocidad y escalabilidad para potenciar tu e-commerce

Una arquitectura preparada para futuras actualizaciones

Otro objetivo prioritario era que SATORISAN pudiera actualizar el theme sin tener que reconstruir todas las personalizaciones.

Para ello evitamos modificar directamente los archivos originales siempre que fue posible. Cuando una funcionalidad necesitaba cambios importantes, duplicamos el componente y creamos una versión propia claramente identificada.

La arquitectura se diseñó para concentrar las modificaciones inevitables sobre el código base en un número muy limitado de archivos.

Esto significa que, cuando se produzca una actualización futura, el equipo técnico sabrá exactamente qué elementos debe revisar y qué personalizaciones necesita volver a aplicar.

El proceso queda además documentado para evitar que el conocimiento dependa exclusivamente de las personas que participaron en el desarrollo inicial.

Un proyecto organizado por sprints y con seguimiento semanal

La reconstrucción se planificó mediante un roadmap dividido en sprints.

Primero abordamos la limpieza del código y la nueva arquitectura base. Después desarrollamos las secciones principales y, por último, incorporamos las funcionalidades más avanzadas.

Durante todo el proyecto mantuvimos reuniones semanales con el equipo de SATORISAN, donde revisamos conjuntamente las tareas, mostramos las nuevas funcionalidades, resolvimos dudas, validamos decisiones y acordamos los próximos pasos.

Este sistema permitió avanzar de manera progresiva y validar cada etapa antes de continuar.

También dio al cliente visibilidad permanente sobre el estado del proyecto, evitando que la tienda se desarrollara durante meses sin revisiones intermedias.

Documentación técnica y guía de gestión de recursos

Un desarrollo no termina cuando la nueva web se publica.

Para que una plataforma sea sostenible, el equipo que la gestiona debe entender cómo funciona y qué criterios debe seguir para mantener su rendimiento.

Por eso entregamos dos tipos de documentación.

Documentación técnica del proyecto

Recoge los principales cambios realizados, el funcionamiento de las secciones, las decisiones de arquitectura y los archivos que deben revisarse en futuras actualizaciones.

Esta documentación permite que cualquier desarrollador que trabaje posteriormente con la tienda pueda entender qué se ha construido y por qué.

Guía para el equipo de branding

También preparamos una guía específica con las dimensiones, proporciones, formatos y pesos recomendados para imágenes y vídeos.

La optimización técnica puede perder parte de su efecto si los recursos visuales que se publican posteriormente son excesivamente pesados.

Con esta guía, el equipo puede crear y subir nuevos assets respetando las necesidades visuales de la marca sin perjudicar la velocidad de carga.

Resultados: una tienda más rápida, limpia y autónoma

El proyecto permitió transformar una estructura difícil de mantener en una plataforma preparada para seguir creciendo. Las mejoras también se reflejan en las métricas de rendimiento de las tres tiendas:

El LCP mide cuánto tarda en aparecer el contenido principal de la página, como una imagen destacada o un banner. El INP mide el tiempo de respuesta cuando el usuario realiza una acción, por ejemplo, seleccionar una talla o añadir un producto al carrito.

Las tres tiendas pasan de «Necesita mejora» a «Bueno» en la clasificación de Google en las tres Core Web Vitals.

La optimización de imágenes también ofrece margen para seguir mejorando. Según la estimación incluida en la guía entregada al cliente, aplicar las recomendaciones de formatos y pesos permitiría reducir el peso de las imágenes de la homepage de 5,5–11 MB a 1,4–2,4 MB por visita. Se trata de un ahorro estimado, sujeto a los recursos que el equipo publique en adelante.

Más allá de la velocidad de carga, entre los principales resultados del proyecto destacan:

• Eliminación del código residual de Shogun y Preorder Globo.
• Reducción de scripts y dependencias externas.
• Nueva arquitectura alineada con los estándares de Shopify.
• Mayor facilidad para actualizar el theme.
• Unificación del carrito para mobile y desktop.
• Secciones flexibles para crear landings desde Shopify.
• Mayor autonomía para los equipos de branding y ecommerce.
• Documentación completa para facilitar futuros desarrollos.

Además de mejorar el rendimiento actual, el proyecto reduce los costes y riesgos asociados al mantenimiento futuro.

Más que una mejora de velocidad

En muchos ecommerce, los problemas de rendimiento se intentan resolver comprimiendo imágenes, instalando una nueva aplicación o modificando scripts concretos.

Estas acciones pueden ayudar, pero no siempre solucionan el problema de fondo.

Cuando una tienda ha acumulado años de desarrollos, aplicaciones y modificaciones sin una arquitectura clara, la solución puede requerir replantear completamente su base técnica.

El caso de SATORISAN demuestra que una reconstrucción bien planificada no solo permite mejorar la velocidad. Sino también convertir Shopify en una plataforma más autónoma, escalable y fácil de mantener, capaz de responder tanto a las necesidades actuales del negocio como a sus próximos años de crecimiento.