En los últimos cuatro meses hemos reconstruido buena parte de la tienda de Culture Shock Club. El trabajo suma más de 500.000 líneas cambiadas entre añadidos, eliminaciones y refactorizaciones. El resultado: una web más rápida, un proceso de compra más claro y cuentas de cliente más útiles.
Datos clave
- Cuatro meses de reconstrucción del storefront: más de 500,000 líneas cambiadas entre altas, bajas y refactors.
- Cada parte se publicó cuando estaba lista y luego se siguió afinando, no un solo relanzamiento.
- Las páginas clave marcan 95 or higher en Lighthouse en móvil y escritorio.
- Focos: primera pantalla más rápida, home más clara, quick add y búsqueda, fichas de producto, historial de pedidos consultable.
No lo guardamos todo para un gran relanzamiento. Publicamos cada parte en cuanto estaba lista y luego la seguimos puliendo.
Una primera pantalla más rápida
La página de inicio anterior cargaba un carrusel de productos antes de mostrar su primera vista completa. Eso obligaba a cargar al momento imágenes, variantes, precios, disponibilidad y el código del carrusel.
La nueva página de inicio carga primero su imagen de apertura. Las secciones de productos, las recomendaciones, la analítica y las herramientas de consentimiento se cargan después o solo cuando hacen falta.
También redujimos el trabajo inicial de fuentes, CSS y scripts. Los recursos se guardan mejor en caché y las acciones del carrito ya no recargan datos de la página que no tienen nada que ver.
Las páginas clave ya obtienen 95 o más en nuestras pruebas de Lighthouse, tanto en móvil como en ordenador. Además, se pueden usar antes, se mantienen más estables al navegar y exigen menos procesamiento en el móvil.
Una página de inicio con una estructura más clara
La página de inicio anterior dependía casi por completo de un único listado de productos. En el nuevo diseño, cada sección tiene una función concreta.
Las novedades pueden usar una galería compacta y las colecciones grandes, cuadrículas más densas. Los productos que ya aparecen arriba no se repiten en las secciones siguientes, así que hay menos repetición al hacer scroll.
Ahora la página de inicio puede presentar un lanzamiento, rescatar productos anteriores y llevar a los visitantes a distintas partes del catálogo sin repetir los mismos artículos.
Añadir rápido y buscar sin cambiar de página
Elegir una opción de producto no debería obligarte a salir de la página.
La función de añadir rápido se abre ahora como panel inferior en el móvil y como panel más amplio en ordenador. Las dos versiones dejan espacio para imágenes, variantes e información de tallas.
La búsqueda predictiva muestra resultados mientras escribes y guarda tus búsquedas recientes. Las fichas de resultados detalladas solo se cargan cuando hacen falta, así hay menos trabajo antes de empezar a buscar.
Así puedes comparar productos, elegir una opción y añadirla al carrito sin perder el hilo.
Páginas de producto pensadas para decidir la compra
Reorganizamos las páginas de producto en torno a la información que necesitas para comprar. Las imágenes, la variante elegida, el precio y los botones de compra aparecen primero. Tallas, envío, cuidados y devoluciones siguen a mano.
La galería admite ahora imágenes, vídeo, vídeo externo y contenido 3D. Al cambiar de color, la galería puede saltar directamente a la imagen correspondiente.
Los productos relacionados aparecen en una sección aparte, «More to Explore». Siguen a mano sin competir con la información principal del producto.
Un carrito que responde al instante
Antes, el carrito se volvía lento o poco fiable mientras procesaba cambios. Reconstruimos su forma de actualizarse para que responda al momento.
Los cambios de cantidad, las eliminaciones, los códigos de descuento y los precios se actualizan mientras el servidor confirma el resultado final. Después, el carrito ajusta las cantidades y los totales mostrados con la respuesta confirmada.
El progreso de las promociones también se ve mejor. El carrito muestra cuánto te falta para el envío gratis o una oferta por varias prendas y te avisa cuando lo consigues.
El carrito completo y el carrito lateral ahora funcionan casi igual. Así, los dos caminos hacia el pago son más coherentes.
Cuentas de cliente más útiles
Ahora la tienda sigue siendo útil después del pago.
Las cuentas de cliente incluyen un historial de pedidos con búsqueda, miniaturas de producto, totales, fechas y estado de envío. Cada pedido puede mostrar detalles del envío, reembolsos y devoluciones.
En los pedidos que lo permiten, puedes elegir productos, cantidades y motivos de devolución antes de enviar la solicitud desde tu cuenta.
También reconstruimos el selector de país e idioma. Puedes buscar por nombre de país, código de país, moneda o idioma, con resultados agrupados por región. Al cambiar de mercado te quedas en la misma página, y se actualizan el idioma y los precios.
Por qué la llamamos Energy Edition
Cada parte de esta versión apunta a la velocidad. La página de inicio hace menos trabajo antes de mostrarse por primera vez. Navegar exige menos cambios de página. El carrito responde al instante y las cuentas de cliente resuelven más cosas después del pago.
Ninguna función por sí sola define esta actualización. Es el resultado acumulado de reconstruir las partes de la tienda que más se usan.
Seguimos trabajando. Cuéntanos cuando algo vaya lento, no quede claro o te estorbe.
