ShopBox

Cuando ShopBox contactó con Webyansh, se enfrentaban a varios problemas de desarrollo que les impedían ofrecer una experiencia de cliente memorable. Su web existente estaba construida sobre una arquitectura tecnológica obsoleta, lo que hacía que actualizar contenido o añadir nuevas funciones fuera lento y complicado para su equipo interno.

Una de las funcionalidades más importantes que faltaban era una calculadora de gastos de envío y un rastreador de pedidos. Ambas eran esenciales para que sus clientes pudieran estimar los costes de envío y los plazos de entrega directamente en la web.

Además, a pesar de contar con un nuevo diseño preparado por otro diseñador, el desarrollador contratado inicialmente no fue capaz de crear una réplica pixel-perfect de ese diseño. Y el diseño solo contemplaba la versión de escritorio, dejando la web sin una versión adaptada a móviles.

Para abordar estos retos, nuestro objetivo fue:

⬥ Garantizar una réplica pixel-perfect del diseño existente

⬥ Desarrollar una calculadora de costes y un rastreador de envíos fluidos

⬥ Implementar un diseño totalmente responsive para escritorio y móvil

ShopBox confió en nosotros para esta delicada tarea gracias a nuestra experiencia contrastada en soluciones de desarrollo web de alta calidad.

‍

ShopBox quería ofrecer transparencia total en el precio de sus servicios. Por eso, una calculadora de flete marítimo y aéreo fue el eje central de su plan de renovación.

Nos proporcionaron los datos de categorías de artículos en formato hoja de cálculo, junto con fórmulas de cálculo específicas.

Las mejores funciones de la calculadora:

• Integración con el CMS: importamos los datos de categorías de artículos desde la hoja de cálculo de ShopBox a su CMS, lo que permite a su equipo actualizar los datos en cualquier momento.
• Conversión y cálculo automáticos: para mejorar la usabilidad, implementamos la conversión automática entre kilogramos (kg) y libras (lbs) según la entrada del usuario, evitando conversiones manuales.
• Diseño de UI estático en Webflow: para la interfaz optamos por un diseño estático en Webflow, lo que simplificó el desarrollo y garantizó una interfaz limpia e intuitiva.

Flujo de trabajo backend de la calculadora:

1. Selección de artículo: el cliente selecciona un artículo de una lista proveniente del CMS, mostrada en un menú desplegable.
2. Introducción de datos: el cliente introduce el coste del artículo en $US y su peso en libras o kilogramos. Si el peso se introduce en una unidad, el valor correspondiente en la otra se calcula y muestra automáticamente.
3. Cálculo de costes: según el artículo seleccionado y los datos introducidos, se realiza una serie de cálculos para los distintos cargos arancel del artículo, tarifa de flete, recargo por combustible, tasa de manipulación, seguro y aranceles usando las fórmulas precisas facilitadas por ShopBox.
4. Visualización de resultados: los valores calculados se muestran dinámicamente en la interfaz, tanto en $US como en $EC. Un botón "Borrar" permite reiniciar todos los campos.

Usamos manipulación del DOM en JavaScript para dar vida a esta función. Al asociar un listener de evento "click" al botón "Calcular", garantizamos que los cálculos se realicen con precisión y que los resultados se actualicen en tiempo real en la interfaz.

Con esta nueva función de calculadora, ShopBox pudo ofrecer precios transparentes a sus clientes y sumar un punto más a su experiencia de usuario.

‍

Un rastreador de envíos fiable era uno de los requisitos clave de ShopBox cuando contactaron con nosotros. Sin embargo, no tenían claro cómo capturar y mostrar los datos de seguimiento de forma efectiva. Al tratarse de una función clave para mejorar la experiencia de usuario, asumimos el reto y desarrollamos una solución.

Integración de API

1. Estado actual del paquete (con fecha y hora)
2. Ubicación anterior
3. Transportista utilizado (como Bluedart)
4. Tiempos de envío y entrega

Diseño de la interfaz de usuario Usando Webflow, creamos una barra de progreso intuitiva que representa visualmente el recorrido del envío. Esta función permite a los clientes seguir el estado de su paquete con solo un vistazo.

Para quienes quieran más detalles, incluimos una opción para ver el historial de seguimiento completo. Un simple clic los redirige a packagetrackr.com, con el número de seguimiento ya rellenado, haciendo el proceso sencillo y cómodo.

Flujo de trabajo backend Para construir estas funcionalidades, usamos el método fetch de JavaScript para las llamadas a la API de "kd100". Este método recupera eficazmente datos en formato JSON con el estado del paquete y la información relacionada. Los datos recuperados se procesan y actualizan dinámicamente en la interfaz mediante el método querySelector, garantizando precisión y capacidad de respuesta.

Al desarrollar este rastreador fluido, ayudamos a ShopBox no solo a cumplir sus requisitos, sino también a mejorar significativamente su experiencia de usuario.

‍

Migración a Webflow y SEO técnico

• Migración al hosting de alto rendimiento de Webflow → 40% de carga de página más rápida (LCP < 2,5s)
• Implementación de diseño mobile-first y optimización de Core Web Vitals

Autoridad de dominio y visibilidad

• Puntuación de autoridad aumentó a 9 (desde ~1)
• Ranking de dominio de Semrush mejoró de ~3,2M a ~1,8M

Principales palabras clave (mercado de EE. UU.):

• "shop box" - Posición 1 (210 búsquedas/mes) - 39% de todo el tráfico orgánico
• "shopbox" -Posición 2 (480 búsquedas/mes) - 47% de todo el tráfico orgánico
• "customs duty calculator st lucia" - Posición 3 (30 búsquedas/mes)

Distribución geográfica y cuota de mercado

• Cuota de tráfico (EE. UU.): 34% (134 visitas/mes)
• Dinamarca: 20% (78 visitas/mes)
• India: 16% (65 visitas/mes)
• Cuota de mercado global frente a la competencia: 39% del tráfico total de la categoría

Perfil de backlinks

• 2.600+ backlinks totales (de 92 dominios)
• Follow vs. Nofollow: 2.600 Follow | 27 Nofollow

‍