ShopBox

Cuando Shopbox se puso en contacto con Webyansh, se enfrentaban a varios problemas de desarrollo que les impedían ofrecer una experiencia de cliente memorable. Su sitio web actual estaba construido sobre una base tecnológica anticuada, lo que dificultaba y requería mucho tiempo para su equipo interno actualizar el contenido o añadir nuevas funciones.

Una de las funciones más importantes que faltaban era una calculadora de costos de envío y un rastreador de envíos. Estas eran esenciales para que sus clientes pudieran estimar los costos de envío y el tiempo de entrega directamente en el sitio web.

Además, a pesar de tener un nuevo diseño preparado por otro diseñador, el desarrollador que contrataron inicialmente no pudo crear una réplica perfecta de este diseño en píxeles. Además, el diseño solo incluía la versión de escritorio, lo que dejaba al sitio web sin una versión optimizada para dispositivos móviles.

Para abordar estos desafíos, nuestro objetivo era:
Garantice una réplica perfecta en píxeles del diseño existente
Desarrolle una calculadora de costos y un rastreador de envíos perfectos
Implemente un diseño totalmente responsivo para usuarios de escritorio y móviles

Shopbox nos confió esta delicada tarea debido a nuestra probada experiencia en la entrega de soluciones de desarrollo web de alta calidad.

Shopbox quería ofrecer una transparencia total en los precios de sus servicios. Por lo tanto, una calculadora de fletes marítimos y aéreos estaba en el centro de sus planes de renovación.

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

Aquí están los mejores características de la calculadora:-

• Integración con CMS: Hemos importado los datos de las categorías de artículos de la hoja de cálculo de Shopbox a su CMS. Esta configuración permite al equipo de Shopbox 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 (libras) en función de las entradas del usuario. Esta función simplifica el proceso para los clientes, ya que garantiza que puedan introducir los datos de peso en sus unidades preferidas sin necesidad de realizar conversiones manuales.
• Diseño de interfaz de usuario estática con Webflow: Para la interfaz de usuario, optamos por un diseño estático utilizando Webflow. Esta decisión no solo simplificó el desarrollo, sino que también garantizó una interfaz limpia e intuitiva para los usuarios que interactuaban con la calculadora.

Aquí está el flujo de trabajo de backend de la calculadora:-

1. Selección de artículos: El proceso comienza cuando los clientes seleccionan un artículo de una lista proporcionada en el CMS, que luego se rellena en un menú desplegable.
2. Ingresando detalles: Los clientes ingresan el costo del artículo en dólares estadounidenses y su peso en libras o kg. Si el peso se introduce en una unidad, el valor correspondiente en la otra unidad se calcula y muestra automáticamente.
3. Cálculo de costos: Según el artículo seleccionado y los detalles introducidos, realizamos una serie de cálculos para varios cargos, incluidos los derechos del artículo, la tarifa de flete, el recargo por combustible, la tarifa de manipulación, el seguro y los aranceles. Estos se calculan mediante fórmulas precisas proporcionadas por ShopBox.
4. Visualización de los resultados: A continuación, los valores calculados se muestran de forma dinámica en la interfaz de usuario, y los valores de $US y $EC se muestran claramente. También se incluye un botón «Borrar» para restablecer todos los campos.

Usamos la manipulación del DOM de JavaScript para dar vida a esta función. Al conectar un detector de eventos en el que se hace clic al botón «Calcular», nos aseguramos de que los cálculos se realicen con precisión y de que los resultados se actualicen en tiempo real en la interfaz de usuario.

Con esta nueva función de calculadora, Shopbox pudo ofrecer precios transparentes a sus clientes y añadir otra estrella a su experiencia de usuario.

Un rastreador de envíos fiable era uno de los requisitos clave de Shopbox cuando se pusieron en contacto con nosotros. Sin embargo, no estaban seguros de cómo capturar y mostrar los datos de seguimiento de forma eficaz. Como la función era importante para mejorar la experiencia del usuario, asumimos el desafío y encontramos una solución.

Integración de API

1. Estado actual del paquete (con fecha y hora)
2. Ubicación anterior
3. Soporte usado (como Bluedart)
4. Plazos de envío y entrega
   ‍

Diseño de la interfaz de usuario

Con Webflow, creamos una barra de progreso fácil de usar que representa visualmente el recorrido del envío. Esta función permite a los clientes rastrear fácilmente el estado de sus paquetes con solo un vistazo.

Para aquellos que desean 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 introducido, lo que hace que el proceso sea sencillo y cómodo.

Flujo de trabajo de backend
datos de ted que contienen el estado del paquete y la información relacionada. A continuación, los datos obtenidos se analizan y actualizan dinámicamente en la interfaz de usuario mediante el método querySelector para garantizar la precisión y la capacidad de respuesta.

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

‍

Flujo de trabajo de backend

Para crear estas funcionalidades, utilizamos el método fetch en JavaScript para las llamadas de API a «kd100». Este método recupera el formato JSON de manera eficiente

Migración de flujo web y SEO técnico

• Se migró al alojamiento de alto rendimiento de Webflow → cargas de página un 40% más rápidas (LCP <2,5 s)
• Se implementó un diseño centrado en los dispositivos móviles y se optimizó Core Web Vitals
  ‍

Autoridad de dominio y visibilidad

• Puntuación de autoridad ascendió a 9 (desde ~1)
• Rango de dominio de Semrush mejorado de ~3.2M a ~1.8M

‍Palabras clave principales (mercado estadounidense):

• «caja de tienda» — Posición 1 (210 vol/mes): 39% de todo el tráfico orgánico
• «shopbox» — Posición 2 (480 vol/mes): 47% de todo el tráfico orgánico
• «calculadora de derechos de aduana en Santa Lucía» — Posición 3 (30 vol/mes)
  ‍

Cuota geográfica y 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 backlink

• Más de 2.600 backlinks totales (de 92 dominios)
• Seguir contra Nofollow: 2.600 Seguidores | 27 No seguir