Cómo el desarrollo personalizado avanzado de Shopify crea una mejor experiencia de usuario

Para Paravel, un vendedor de equipaje, bolsos y otros accesorios de viaje de alta calidad, innovadores y producidos de manera responsable, la funcionalidad personalizada es imprescindible. Los productos que producen y venden son únicos, por lo que para ellos era necesario ofrecer una experiencia de compra única a sus clientes.

Paravel necesitaba muchas funciones básicas de comercio electrónico para poder ejecutar operaciones prácticas a través de su tienda en línea. Originalmente, se crearon en una plataforma de código abierto llamada Spree, que tiene muchos adeptos y simpatizantes por el hecho de que es una plataforma de código abierto.

Spree, al igual que otras plataformas de código abierto como Magento, es extremadamente personalizable. También se puede integrar con una gran cantidad de complementos y aplicaciones de terceros, es altamente escalable y exhibe un nivel de intuición de interfaz de usuario que facilita el desarrollo de una interfaz compatible con dispositivos móviles.

Si bien esto es solo una instantánea de las diversas características funcionales de Spree, algunas de ellas tienen el mismo costo elevado que otras plataformas de código abierto. Pueden tener una funcionalidad casi ilimitada, pero requieren mucho tiempo de desarrollo e incluso más experiencia para lograrlo. Sin una amplia experiencia en codificación o experiencia en desarrollo, las plataformas como Spree pueden agotar rápidamente los recursos.

Paravel necesitaba esa experiencia de compra única, pero también necesitaba una solución lista para usar que ofreciera mucho a sus comerciantes de comercio electrónico. El problema para ellos era cómo podrían llevar su tienda de comercio electrónico meticulosamente diseñada y desarrollada de Spree a una plataforma más capaz.

Un Proceso de Migración Completo

Después de comunicarse con nuestro equipo de ventas, Paravel decidió que cambiarse a Shopify Plus era la respuesta, con algunas estipulaciones. Entre otras cosas, Paravel no quería experimentar ningún efecto negativo de la migración y querían que su nueva tienda ofreciera toda la funcionalidad de su tienda Spree y algo más. Para hacerlo, Paravel necesitaba más que un socio de Shopify Plus: necesitaba un experto de Shopify Plus.

Si bien Spree ofrecía opciones casi ilimitadas para la personalización, Shopify Plus, como plataforma SaaS de comercio electrónico alojada, podía ofrecerles mucho más. Con la ayuda de un equipo de desarrollo como 1Digital ^Ⓡ , Shopify Plus podría ofrecerles todas las personalizaciones que ofrecía Spree y más. Shopify Plus también ofreció funciones de seguridad mejoradas, tiempo de actividad garantizado, velocidad rápida del sitio, compatibilidad similar con aplicaciones y complementos de terceros, aceptación de varias opciones de pago, escalabilidad inmensa y mucho más. En ese momento, a Paravel se le encomendó la tarea de trasladar su tienda Spree existente, y su diseño y funcionalidad, a Shopify Plus.

Para algunos, el proceso de migración de un sitio web es desgarrador, pero sabíamos lo contrario. Con cientos de migraciones exitosas en el retrovisor y un equipo de desarrolladores para respaldar nuestros esfuerzos, sabíamos que podía hacerse sin ningún problema. Solo tomaría un proceso completo.

El proceso fue intenso, pero nada que 1Digital ^Ⓡ Agency no pudiera ejecutar con gran éxito. El proyecto requirió la migración de 32 campos de productos (incluidos nombres, descripciones, imágenes, precios y más), así como más de 4000 cuentas de clientes y pedidos cada uno. Para hacer esto, configuramos un servidor Linux temporal y escribimos un script personalizado para extraer y categorizar esta información del inventario de Spree de su sitio original.

Para moverlo, creamos otra secuencia de comandos personalizada para conectarse a la API de Shopify antes de importar correctamente todos los campos relevantes. Durante el proceso y posteriormente, se verificaron los datos para garantizar que estuvieran aterrizando correctamente en la nueva tienda, de modo que no solo no se perdiera nada, sino que todo se llenara donde se suponía que debía ir.

Nuestro minucioso proceso evitó la pérdida de datos, pero ¿qué pasa con la pérdida de tráfico? Si hay algo que aleja a los clientes de comercio electrónico de la perspectiva de una nueva plataforma (incluso si traerá grandes beneficios), es el miedo a perder tráfico o autoridad de dominio.

Afortunadamente, nuestro proceso de migración evita daños al SEO de forma tan meticulosa como evita la pérdida de datos. Con Paravel, como hemos hecho con cada proyecto de migración, recopilamos todas las URL asociadas con su sitio web y luego configuramos redireccionamientos 301 a las URL asociadas en el nuevo sitio web de Shopify. Como era de esperar, Paravel no sufrió ninguna pérdida de tráfico ni fluctuaciones en la clasificación después de que se completó la migración.

Soporte – Por si acaso

La migración a Shopify se llevó a cabo sin contratiempos, y Paravel estaba en camino a una nueva tienda Shopify Plus con funcionalidad mejorada y una mejor experiencia de usuario, pero solo para estar seguros, incluimos un período de soporte gratuito de 30 días con el proyecto de migración. . Cualquier agencia de migración de Shopify con un proceso probado debería hacerlo; es solo una parte integral de una estrategia de migración exitosa.

La duración de los períodos de soporte gratuito varía según el alcance del proyecto, pero en el caso de la migración de Paravel, asignamos 30 días. Esto les dio el tiempo de un mes completo para investigar su nuevo sitio web y abordar cualquier error de migración que pudiera surgir, que solucionaríamos sin cargo.

Incluso después, les permitimos permanecer en retención, sin pedirles depósito; simplemente facturando por cualquier cambio que registrarían después de que finalizara el período de soporte gratuito del sitio web. Pequeñas cosas como estas contribuyen en gran medida a garantizar un buen servicio al cliente, y nuestro objetivo es garantizar que las migraciones se realicen sin problemas, incluso cuando todo se verifica, se vuelve a verificar y se vuelve a verificar.

Un sitio web recientemente desarrollado

Pero no había terminado con una migración. Paravel tenía criterios para la mudanza asociados con la experiencia del cliente que ofrecería el nuevo sitio y, para asegurarnos de eso, tuvimos que desarrollar un nuevo sitio web de Shopify Plus para ellos.

Como parte de su proyecto, los desarrolladores de 1Digital ^Ⓡ Agency crearon una nueva página de inicio para ellos que estaba mejor integrada con la marca y ayudó a posicionar sus productos bajo una luz más deseable. Presentaba imágenes actualizadas de productos y de fondo que se alineaban mejor con los intereses y percepciones de su mercado objetivo. Considere la impresión elegante y sofisticada de la nueva página de inicio, a continuación, con una imagen fija de la antigua página de inicio debajo.

Para los visitantes de su página de inicio, el nuevo diseño sorprende de inmediato no solo por la estética superior de sus imágenes, sino también por el esfuerzo más concertado que hace para colocar el valor de los productos de Paravel al frente y al centro. También notará que hay un menú en la parte superior del nuevo diseño de la página de inicio que faltaba en el diseño anterior; la forma de acceder a sus productos anteriormente era desplazándose hacia abajo en la página hasta donde había un botón con la etiqueta "comprar la colección". La nueva página presenta características de navegación del sitio mucho mejores, como puede ver arriba.

Al desplazarse hacia abajo en la página de inicio, los visitantes pueden ver reseñas a través de un banner deslizante, obtener más información sobre categorías de productos populares e incluso ver cómo los clientes usan los productos a través de las redes sociales, como puede ver en algunas de las capturas de pantalla a continuación.

Además de la página de inicio, 1Digital ^Ⓡ creó una nueva plantilla de página de categoría junto con una página de "Nuestra historia" para Paravel, además de varias otras páginas del sistema. Entre las páginas que se desarrollaron se encontraban sus páginas de carrito y pago, páginas de inicio de sesión, páginas de certificados de regalo y páginas de "Gracias". Finalmente, personalizamos varias páginas de contenido, incluidas sus páginas de "Preguntas frecuentes" y "Términos".

La importancia de un diseño de sitio web receptivo de alta calidad es fundamental para el comercio electrónico en la actualidad, y los desarrolladores de 1Digital ^Ⓡ tuvieron cuidado de preparar un sitio web receptivo actualizado para Paravel como parte del proyecto. En interés de la experiencia del usuario de Paravel, el nuevo diseño receptivo de 1Digital ^Ⓡ se adapta automáticamente a pantallas más pequeñas, cambiando el tamaño y reformateando el texto en consecuencia.

Desarrollo avanzado: funcionalidad de la página de categoría

Cuando los desarrolladores de 1Digital ^Ⓡ transfirieron toda la información asociada con las categorías de productos de Paravel, también agregamos algunas funciones nuevas para que las transmitieran a sus clientes, mejorando así la experiencia del cliente.

Instalamos un editor de metacampos en la plantilla de su página de categoría para que Paravel pudiera realizar cambios rápidos en algunas de las insignias que aparecían en la pantalla de su página de categoría. Esto les permitió editar campos personalizados para que las promociones asociadas con productos "nuevos", "superventas" o "destacados" pudieran mostrarse de manera más destacada.

Esta característica aparentemente simple devuelve mucho poder a los administradores de Paravel para realizar cambios rápidos y fáciles en la visualización de su sitio web sin trabajar con un desarrollador. A un hombre se le puede dar un pez o enseñarle el arte, y proporcionamos instrucciones detalladas a Paravel sobre cómo usar y administrar la aplicación para que puedan realizar cambios fácilmente incluso después de que el proyecto se haya cerrado.

Del mismo modo, los desarrolladores de 1Digital ^Ⓡ crearon Muestras de productos y la funcionalidad Vista rápida en las páginas de colecciones de Paravel. Creamos un script personalizado para su página de colecciones de Shopify Plus que podía obtener y mostrar la información deseada.

La secuencia de comandos para estas muestras también aseguró que cuando un cliente hiciera clic en la muestra asociada con el color de interés, la imagen del producto se mostraría en ese color. Además, mostraría el precio aplicable asociado con el cambio, así como cualquier opción de "personalización" o, si es necesario, un mensaje de "agotado".

Desarrollo avanzado: funcionalidad de la página del producto

Paravel pone un gran énfasis en la experiencia del cliente y, como tal, requería una gran cantidad de funciones adicionales de su plantilla de página de producto, incluidas capacidades adicionales para ayudar a personalizar la experiencia de compra.

Por lo tanto, como parte del aspecto de desarrollo avanzado del proyecto, 1Digital ^Ⓡ ayudó a crear un nuevo y mejor conjunto de funciones para personalizar la experiencia de compra en su sitio web, específicamente en la página de su producto.

Configuramos la plantilla de la página de su producto para que se muestre de manera similar a su antigua tienda Spree. Luego creamos una barra de "agregar al carrito" que permanecería en la parte inferior de la pantalla de la página del producto. Esa fue la parte fácil.

También desarrollamos una herramienta para su plantilla de página de producto que permitiría a los compradores personalizar su experiencia de compra y hacerla más realista. Además de ofrecer a sus clientes la capacidad de ver cómo se vería una bolsa determinada (u otro producto) usando la funcionalidad de muestra descrita anteriormente, Paravel también brinda a sus clientes la capacidad de personalizar sus productos.

Paravel estaba interesado en las funciones de aumento de conversión de una herramienta realista que permitiría a sus clientes ver realmente cómo se verían sus productos una vez personalizados, por lo que creamos una herramienta que les permitiera hacerlo.

La herramienta que construimos para Paravel mostraba una ventana emergente con las palabras "Personalizar" cuando un cliente visitaba la página del producto. Luego creamos una herramienta que permitiría al cliente personalizar el producto de acuerdo con el estilo y el color de las letras que aparecerían como un monograma con sus iniciales.

Esta herramienta se muestra como un widget en la página del producto después de que el cliente hace clic en "Personalizar" y es muy fácil de manipular y personalizar según sus preferencias. Para garantizar que el producto mostrara la personalización correctamente, tuvimos que crear un script personalizado que mostrara con precisión las letras que el cliente había ingresado, en el estilo que seleccionó, sobre el área derecha del producto, como se puede ver. en la imagen de abajo. Como nivel final de funcionalidad, creamos una "Plantilla de nailon" que permitiría a los clientes de Paravel personalizar sus productos con letras bordadas en lugar de letras pintadas a mano o apliques.

Hubo algunas personalizaciones más que creamos para las páginas de productos de Paravel, incluida la implementación de cuatro pestañas de las páginas de productos en su antigua tienda Spree a través de codificación HTML. También recreamos la funcionalidad "Elige tu propia aventura" de la tienda Spree de Paravel, que permite a los clientes personalizar aún más los productos de Paravel con apliques y diseños pintados a mano, además de algunas otras personalizaciones para preservar la integridad de la funcionalidad original que apareció en su tienda Spree.

Integración con aplicaciones críticas

Para asegurar la funcionalidad de su nueva tienda Shopify Plus y garantizar una experiencia de usuario fluida y agradable, 1Digital ^Ⓡ Agency tuvo que integrar la nueva tienda de Paravel con sus aplicaciones críticas para el negocio.

Entre otras cosas, los clientes de Paravel confiaron en las reseñas y testimonios que Paravel pudo dibujar y mostrar a través de YotPo, que nos aseguramos de que estuviera perfectamente integrado para ellos. Paravel también se basó en gran medida en el uso de Zaius para la interacción con el cliente y CRM, por lo que realizamos esa integración además de la mencionada anteriormente.

Además de estos, Paravel hace uso de la funcionalidad proporcionada no solo por RJ Metrics sino también por Talkable. Estas aplicaciones brindan datos valiosos a los administradores de Paravel y permiten programas de marketing de referencia seguros.

La agencia 1Digital ^Ⓡ integró todas estas aplicaciones con la nueva tienda de Paravel, además de codificar y desarrollar su nuevo sitio web Shopify Plus. Concluimos este proyecto, de alcance integral, que supuso una migración y un desarrollo personalizado avanzado, sin complejos. Es decir, el cliente no experimentó interrupciones indebidas en el negocio, ni pérdida de tráfico, y pasó a una tienda recién desarrollada con funciones personalizadas avanzadas sin ningún contratiempo. Hacer eso requiere experiencia y procesos minuciosos, los cuales 1Digital ^Ⓡ integra en nuestro flujo de trabajo.

La solución completa

Algunos proveedores ajustan sus servicios a uno o dos servicios altamente especializados, pero sabemos que los problemas que enfrentan los comerciantes de comercio electrónico son diversos. Si solo pudiéramos ofrecer servicios de desarrollo, no habríamos podido migrar Paravel de Spree a Shopify Plus, que es una de las principales plataformas de comercio electrónico para comerciantes en línea. Del mismo modo, si nos limitáramos a realizar migraciones, no habríamos podido personalizar su nueva tienda como ellos querían.

Los servicios de diseño y desarrollo de Shopify Plus, incluso cuando se combinan con nuestros servicios de migración, son solo una pequeña muestra de lo que ofrece 1Digital ^Ⓡ Agency. Además de nuestros servicios de diseño personalizado de Shopify, también ofrecemos campañas integrales de marketing digital que incluyen campañas de SEO y PPC altamente competitivas, minuciosamente investigadas y dirigidas.

Esta historia de éxito depende del hecho de que pudimos migrar Paravel de Spree a una tienda Shopify Plus recientemente desarrollada con funcionalidad avanzada. Muchos de nuestros otros estudios de casos de comercio electrónico se centran en otras plataformas de comercio electrónico como el diseño y desarrollo de BigCommerce, servicios similares de Magento y campañas de marketing digital. Eche un vistazo a nuestro repertorio y si desea ver cómo podemos resolver los problemas que enfrenta su negocio en línea, llámenos al 888-982-8269.

Descargar PDF