Saltar al contenido principal
Tu agencia digital de servicio completo y socio de estrategia con IA
1Digital
Caso de éxito

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

13 de noviembre de 2020 · 11 min read · ByMichael E
Manos escribiendo código en la pantalla de una laptop, con un segundo monitor que muestra código al fondo.

Para Paravel, un vendedor de maletas, bolsos y otros accesorios de viaje de alta calidad, innovadores y producidos de forma responsable, la funcionalidad personalizada es imprescindible. Los productos que fabrican y venden son únicos, así que para ellos era necesario ofrecer a sus clientes una experiencia de compra igual de única.

Paravel necesitaba mucha funcionalidad básica de eCommerce para poder gestionar operaciones prácticas a través de su tienda en línea. Originalmente, estaban construidos sobre una plataforma de código abierto llamada Spree, que tiene muchos seguidores y defensores precisamente por ser una plataforma de código abierto.

Spree, al igual que otras plataformas de código abierto como Magento, es extremadamente personalizable. También puede integrarse con una gran cantidad de plugins y apps de terceros, es muy escalable y ofrece un nivel de intuición en la interfaz que facilita el desarrollo de una interfaz adaptada a dispositivos móviles.

Aunque esto es solo un vistazo rápido a las diversas funciones de Spree, algunas tienen el mismo alto costo que en otras plataformas de código abierto. Su funcionalidad puede ser casi ilimitada, pero requieren mucho tiempo de desarrollo y aún más experiencia para lograrla. Sin una amplia experiencia en programación o formación en desarrollo, plataformas como Spree pueden agotar los recursos rápidamente.

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

Un proceso de migración minucioso

Tras hablar con nuestro equipo de ventas, Paravel decidió que la respuesta era pasarse a Shopify Plus, con algunas condiciones. Entre otras cosas, Paravel no quería sufrir ningún efecto negativo por la migración y quería que su nueva tienda ofreciera toda la funcionalidad de su tienda en Spree y más. Para ello, Paravel necesitaba algo más que un partner de Shopify Plus: necesitaba un experto en Shopify Plus.

Aunque Spree ofrecía opciones de personalización casi ilimitadas, Shopify Plus, como plataforma SaaS de eCommerce alojada, podía ofrecerles mucho más. Con la ayuda de un equipo de desarrollo como 1DigitalⓇ, Shopify Plus podía ofrecerles todas las personalizaciones que ofrecía Spree y más. Shopify Plus también ofrecía mayores funciones de seguridad, tiempo de actividad garantizado, alta velocidad del sitio, una compatibilidad similar con apps y plugins de terceros, aceptación de diversos métodos de pago, una enorme escalabilidad y mucho más. En ese punto, Paravel tenía la tarea de trasladar su tienda existente en Spree, con su diseño y su funcionalidad, a Shopify Plus.

Para algunos, el proceso de migración de un sitio web es angustiante, pero nosotros sabíamos que no tenía por qué serlo. Con cientos de migraciones exitosas a nuestras espaldas y un equipo de desarrolladores respaldando nuestro trabajo, sabíamos que podía hacerse sin ningún problema. Solo requeriría un proceso minucioso.

El proceso fue intensivo, pero nada que 1DigitalⓇ Agency no pudiera ejecutar con éxito rotundo. El proyecto requería la migración de 32 campos de producto (incluidos nombres, descripciones, imágenes, precios y más), así como más de 4,000 cuentas de clientes y otros tantos pedidos. Para ello, configuramos un servidor Linux temporal y escribimos un script personalizado para extraer y clasificar esta información del inventario de Spree de su sitio original.

Para trasladarla, creamos otro script personalizado que se conectaba a la API de Shopify antes de importar correctamente todos los campos relevantes. Durante el proceso y después, se verificaron los datos para asegurar que llegaran correctamente a la nueva tienda, de modo que no solo no se perdiera nada, sino que todo apareciera donde debía.

Nuestro proceso minucioso evitó la pérdida de datos, pero ¿qué pasa con la pérdida de tráfico? Si hay algo que desanima a los clientes de eCommerce ante la perspectiva de un cambio de plataforma (aunque vaya a traer enormes beneficios), es el miedo a perder tráfico o autoridad de dominio.

Por suerte, nuestro proceso de migración previene los daños al SEO con la misma meticulosidad con la que previene la pérdida de datos. Con Paravel, como hemos hecho en cada proyecto de migración, recopilamos todas las URL asociadas a su sitio web y luego configuramos redirecciones 301 hacia las URL correspondientes del nuevo sitio en Shopify. Como era de esperarse, Paravel no sufrió ninguna pérdida de tráfico ni fluctuación en sus posiciones una vez completada la migración.

Soporte, por si acaso

La migración a Shopify se realizó sin contratiempos, y Paravel iba en buen camino hacia una nueva tienda en Shopify Plus con funcionalidad mejorada y una mejor experiencia del usuario, pero para ir a lo seguro, incluimos un periodo de soporte gratuito de 30 días con el proyecto de migración. Cualquier agencia de migración a Shopify con un proceso probado debería hacerlo; es parte integral de una estrategia de migración exitosa.

La duración de los periodos 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 un mes completo para revisar su nuevo sitio web y atender cualquier error de migración que pudiera surgir, que nosotros corregiríamos sin costo.

Incluso después, les permitimos seguir con nosotros bajo un acuerdo de retención, sin pedirles ningún depósito; simplemente les facturábamos los cambios que registraran una vez terminado el periodo gratuito de soporte del sitio web. Pequeños detalles como estos contribuyen mucho a un buen servicio al cliente, y nos esforzamos por que las migraciones salgan bien, incluso cuando todo se ha revisado, vuelto a revisar y revisado una vez más.

Un sitio web desarrollado desde cero

Pero la migración no fue el final. Paravel tenía criterios para el cambio relacionados con la experiencia del cliente que ofrecería el nuevo sitio, y para cumplirlos tuvimos que desarrollar un sitio web completamente nuevo en Shopify Plus para ellos.

Como parte de su proyecto, los desarrolladores de 1DigitalⓇ Agency crearon una nueva página de inicio mejor integrada con la marca y que ayudaba a presentar sus productos de forma más atractiva. Incluía imágenes de producto y de fondo actualizadas que se ajustaban mejor a los intereses y percepciones de su mercado objetivo. Observa la impresión elegante y sofisticada de la nueva página de inicio, abajo, con una captura de la antigua página de inicio debajo.

para9

Para quienes visitan su página de inicio, el nuevo diseño llama la atención de inmediato no solo por la estética superior de sus imágenes, sino por el esfuerzo decidido por poner el valor de los productos de Paravel al frente y al centro. También notarás que en la parte superior del nuevo diseño hay un menú que faltaba en el diseño anterior; antes, la forma de acceder a sus productos era desplazarse hacia abajo hasta un botón que decía “shop the collection”. La nueva página cuenta con funciones de navegación mucho mejores, como puedes ver arriba.

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

Además de la página de inicio, 1DigitalⓇ creó una nueva plantilla de página de categoría junto con una página “Our Story” para Paravel, además de varias otras páginas del sistema. Entre las páginas desarrolladas estaban las de carrito y pago, las de inicio de sesión, las de certificados de regalo y las de “Thank You”. Por último, personalizamos varias páginas de contenido, incluidas sus páginas de “FAQ” y “Terms”.

Un diseño web responsivo de alta calidad es fundamental para el eCommerce hoy en día, y los desarrolladores de 1DigitalⓇ prepararon con cuidado un sitio web responsivo actualizado para Paravel como parte del proyecto. En beneficio de la experiencia del usuario de Paravel, el nuevo diseño responsivo de 1DigitalⓇ se adapta automáticamente a pantallas más pequeñas, redimensionando y reorganizando 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 a las categorías de productos de Paravel, también añadimos nuevas funciones que ellos podían ofrecer a sus clientes, mejorando así la experiencia del cliente.

Instalamos un Metafield Editor en su plantilla de página de categoría para que Paravel pudiera hacer cambios rápidos en algunas de las insignias que aparecían en su página de categoría. Esto les permitió editar campos personalizados para mostrar de forma más destacada las promociones asociadas a productos “new”, “bestseller” o “featured”.

Esta función aparentemente sencilla devuelve mucho poder a los administradores de Paravel para hacer cambios rápidos y fáciles en la presentación de su sitio web sin trabajar con un desarrollador. A una persona se le puede dar un pescado o enseñarle a pescar, y nosotros le dimos a Paravel instrucciones detalladas sobre cómo usar y administrar la app para que pudiera hacer cambios fácilmente incluso después de cerrado el proyecto.

De forma similar, los desarrolladores de 1DigitalⓇ crearon muestras de producto (Product Swatches) y la funcionalidad de vista rápida (Quick View) en las páginas de colecciones de Paravel. Creamos un script personalizado para su página de colecciones en Shopify Plus capaz de obtener y mostrar la información deseada.

El script de estas muestras también garantizaba que, cuando un cliente hacía clic en la muestra del color que le interesaba, la imagen del producto se mostrara en ese color. Además, mostraba el precio correspondiente al cambio, así como cualquier opción de “personalización” o, si era necesario, un mensaje de “agotado”.

Desarrollo avanzado: funcionalidad de la página de producto

Paravel pone un gran énfasis en la experiencia del cliente, por lo que necesitaba mucha funcionalidad adicional en su plantilla de página de producto, incluidas capacidades añadidas para ayudar a personalizar la experiencia de compra.

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

Configuramos su plantilla de página de producto para que se mostrara de forma similar a su antigua tienda en Spree. Luego creamos una barra fija de “add to cart” que permanecía en la parte inferior de la página de 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 y hacerla más realista. Además de ofrecer a sus clientes la posibilidad de ver cómo se vería un bolso determinado (u otro producto) mediante la funcionalidad de muestras descrita arriba, Paravel también da a sus clientes la posibilidad de personalizar sus productos.

A Paravel le interesaban las ventajas para la conversión de una herramienta realista que permitiera a sus clientes ver cómo quedarían sus productos una vez personalizados, así que creamos una herramienta que les permitiera hacerlo.

La herramienta que construimos para Paravel mostraba una ventana emergente con la palabra “Personalize” cuando un cliente visitaba la página de producto. Luego creamos una herramienta que permitiría al cliente personalizar el producto según 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 de producto después de que el cliente hace clic en “Personalize” y es muy fácil de manipular y personalizar según sus preferencias. Para asegurar que el producto mostrara correctamente la personalización, tuvimos que crear un script personalizado que mostrara con precisión las letras introducidas por el cliente, en el estilo seleccionado, sobre el área correcta del producto, como se puede ver en la imagen de abajo. Como último nivel de funcionalidad, creamos una “Nylon Template” que permitiría a los clientes de Paravel personalizar sus productos con letras bordadas en lugar de letras pintadas a mano o Appliqué.

Hubo algunas personalizaciones más que creamos para las páginas de producto de Paravel, incluida la implementación mediante código HTML de cuatro pestañas de las páginas de producto de su antigua tienda en Spree. También recreamos la funcionalidad “Choose Your Own Adventure” de la tienda en Spree de Paravel, que permite a los clientes personalizar aún más los productos de Paravel con aplicaciones (Applique) y diseños pintados a mano, además de algunas otras personalizaciones para preservar la integridad de la funcionalidad original de su tienda en Spree.

Integración con apps fundamentales

Para asegurar la funcionalidad de su nueva tienda en Shopify Plus y garantizar una experiencia del usuario fluida y agradable, 1DigitalⓇ Agency tuvo que integrar la nueva tienda de Paravel con sus apps esenciales para el negocio.

Entre otras cosas, los clientes de Paravel dependían de las reseñas y testimonios que Paravel podía obtener y mostrar mediante YotPo, que nos aseguramos de integrar sin problemas. Paravel también dependía mucho de Zaius para la interacción con los clientes y el CRM, así que realizamos esa integración además de la anterior.

Además de estas, Paravel aprovecha la funcionalidad que ofrecen no solo RJ Metrics, sino también Talkable. Estas apps proporcionan datos valiosos a los administradores de Paravel y permiten programas de marketing de referidos seguros.

1DigitalⓇ Agency integró todas estas apps con la nueva tienda de Paravel, además de  programar y desarrollar su nuevo sitio web en Shopify Plus. Concluimos este proyecto de amplio alcance, que implicó una migración y desarrollo personalizado avanzado, sin contratiempos. Es decir, el cliente no sufrió interrupciones indebidas en su negocio ni pérdida de tráfico, y pasó a una tienda recién desarrollada con funcionalidad personalizada avanzada sin el menor tropiezo. Lograrlo requiere experiencia y procesos minuciosos, y 1DigitalⓇ integra ambos en su flujo de trabajo.

La solución completa

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

Los servicios de diseño en Shopify Plus y de desarrollo, incluso combinados 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 en Shopify, también ofrecemos campañas integrales de marketing digital, incluidas campañas de SEO y PPC altamente competitivas, bien investigadas y dirigidas.

Esta historia de éxito se basa en que pudimos migrar a Paravel de Spree a una tienda en Shopify Plus recién desarrollada y con funcionalidad avanzada. Muchos de nuestros otros casos de éxito de eCommerce se centran en otras plataformas de eCommerce, como diseño y desarrollo en BigCommerce, servicios similares para Magento y campañas de marketing digital. Echa un vistazo a nuestro repertorio y, si quieres ver cómo podemos resolver los problemas que enfrenta tu negocio en línea, llámanos al 888-982-8269.

Descargar PDF

Comparte este artículo

¿Quieres ayuda para aplicar estas ideas?

Recibe una propuesta gratis y sin compromiso de nuestro equipo, o conoce WorkspaceCMS, nuestra plataforma totalmente administrada, con IA desde el inicio y SEO nativo.

★ Revisión gratis de visibilidad en IA

Pregúntale a la IA por un negocio como el tuyo. ¿Apareces en la respuesta?

Estrategas reales. Herramientas de IA reales. Crecimiento real. - 1Digital® desde 2012