Comment le développement personnalisé avancé de Shopify crée une meilleure expérience utilisateur

Pour Paravel, un vendeur de bagages, sacs et autres accessoires de voyage de haute qualité, innovants et produits de manière responsable, la fonctionnalité personnalisée est un must. Les produits qu'ils fabriquent et vendent sont uniques, donc pour eux, il était nécessaire d'offrir une expérience d'achat unique à leurs clients.

Paravel avait besoin de nombreuses fonctionnalités de commerce électronique de base pour pouvoir exécuter des opérations pratiques via sa boutique en ligne. À l'origine, ils ont été construits sur une plate-forme open source appelée Spree, qui compte de nombreux adhérents et partisans du fait même qu'il s'agit d'une plate-forme open source.

Spree, comme d'autres plates-formes open source telles que Magento, est extrêmement personnalisable. Il peut également être intégré à un très grand nombre de plug-ins et d'applications tiers, il est hautement évolutif et présente un niveau d'intuition de l'interface utilisateur qui facilite le développement d'une interface adaptée aux mobiles.

Bien qu'il ne s'agisse que d'un aperçu rapide des différentes fonctionnalités de Spree, certaines d'entre elles ont le même coût élevé que d'autres plates-formes open source. Leurs fonctionnalités peuvent être presque illimitées, mais elles nécessitent beaucoup de temps de développement et encore plus d'expérience pour être accomplies. Sans une vaste expérience de codage ou une expérience en développement, des plates-formes comme Spree peuvent rapidement épuiser les ressources.

Paravel avait besoin de cette expérience d'achat unique en son genre, mais ils avaient également besoin d'une solution prête à l'emploi qui offrait beaucoup à leurs marchands de commerce électronique. Le problème pour eux était de savoir comment faire passer leur boutique de commerce électronique déjà méticuleusement conçue et développée de Spree à une plate-forme plus performante ?

Un processus de migration minutieux

Après avoir communiqué avec notre équipe de vente, Paravel a décidé qu'un passage à Shopify Plus était la réponse - avec quelques stipulations. Entre autres choses, Paravel ne voulait pas subir d'effets négatifs de la migration et souhaitait que son nouveau magasin offre toutes les fonctionnalités de son magasin Spree, voire certaines. Pour ce faire, Paravel avait besoin de plus qu'un partenaire Shopify Plus - ils avaient besoin d'un expert Shopify Plus.

Alors que Spree offrait des options de personnalisation presque illimitées, Shopify Plus, en tant que plate-forme SaaS de commerce électronique hébergée, pouvait leur offrir bien plus. Avec l'aide d'une équipe de développement comme 1Digital ^Ⓡ , Shopify Plus pourrait leur offrir toutes les personnalisations offertes par Spree et plus encore. Shopify Plus offrait également des fonctionnalités de sécurité renforcées, une disponibilité garantie, une vitesse de site rapide, une compatibilité similaire avec des applications et des plugins tiers, l'acceptation d'un certain nombre d'options de paiement, une évolutivité immense et bien plus encore. Paravel était, à ce stade, chargé de déplacer son magasin Spree existant, ainsi que sa conception et ses fonctionnalités, vers Shopify Plus.

Pour certains, le processus de migration d'un site Web est pénible, mais nous savions le contraire. Avec des centaines de migrations réussies dans le rétroviseur et une équipe de développeurs pour soutenir nos efforts, nous savions que cela pouvait être fait sans aucun problème. Cela prendrait juste un processus minutieux.

Le processus a été intensif, mais rien que 1Digital ^Ⓡ Agency ne pouvait exécuter avec brio. Le projet a nécessité la migration de 32 champs de produits (y compris les noms, les descriptions, les images, les prix, etc.) ainsi que plus de 4 000 comptes clients et commandes chacun. Pour ce faire, nous avons mis en place un serveur Linux temporaire et écrit un script personnalisé pour dessiner et catégoriser ces informations à partir de l'inventaire Spree de leur site d'origine.

Pour le déplacer, nous avons créé un autre script personnalisé pour se connecter à l'API Shopify avant d'importer correctement tous les champs pertinents. Pendant le processus et par la suite, les données ont été vérifiées afin de s'assurer qu'elles atterrissaient correctement dans le nouveau magasin, de sorte que non seulement rien ne soit perdu, mais que tout se remplisse là où il était censé aller.

Notre processus minutieux a empêché la perte de données, mais qu'en est-il de la perte de trafic ? S'il y a une chose qui dissuade les clients de commerce électronique de la perspective d'un changement de plate-forme (même si cela apportera d'énormes avantages), c'est la peur de perdre du trafic ou de l'autorité de domaine.

Heureusement, notre processus de migration prévient les dommages au référencement aussi méticuleusement qu'il prévient la perte de données. Avec Paravel, comme nous l'avons fait pour chaque projet de migration, nous avons collecté toutes les URL associées à leur site Web, puis mis en place des redirections 301 vers les URL associées sur le nouveau site Web Shopify. Sans surprise, Paravel n'a subi aucune perte de trafic ni aucune fluctuation de classement une fois la migration terminée.

Assistance - Juste au cas où

La migration vers Shopify s'est déroulée sans accroc, et Paravel était en bonne voie vers une nouvelle boutique Shopify Plus avec des fonctionnalités améliorées et une meilleure expérience utilisateur, mais juste pour être sûr, nous avons inclus une période d'assistance gratuite de 30 jours avec le projet de migration. . Toute agence de migration Shopify avec un processus éprouvé devrait le faire ; cela fait simplement partie intégrante d'une stratégie de migration réussie.

La durée des périodes de support gratuit varie selon la portée du projet, mais dans le cas de la migration de Paravel, nous avons alloué 30 jours. Cela leur a donné un mois complet pour enquêter sur leur nouveau site Web et résoudre les bogues de migration qui pourraient apparaître - que nous corrigerions gratuitement.

Même après, nous leur avons permis de rester en acompte, sans leur demander de caution ; facturant simplement toutes les modifications qu'ils enregistreraient après la fin de la période de support gratuite du site Web. De petites choses comme celles-ci contribuent grandement à assurer un bon service client, et nous visons à garantir que les migrations se déroulent sans heurts, même lorsque tout est vérifié, revérifié et revérifié.

Un site Web nouvellement développé

Mais ce n'était pas fini avec une migration. Paravel avait des critères pour le déménagement associés à l'expérience client que le nouveau site offrirait, et pour s'en assurer, nous avons dû développer un tout nouveau site Web Shopify Plus pour eux.

Dans le cadre de leur projet, les développeurs de 1Digital ^Ⓡ Agency ont conçu pour eux une toute nouvelle page d'accueil qui était mieux intégrée à la marque et a aidé à positionner leurs produits sous un jour plus attrayant. Il présentait des images de produits et d'arrière-plan mises à jour, mieux alignées sur les intérêts et les perceptions de leur marché cible. Considérez l'impression élégante et sophistiquée de la nouvelle page d'accueil, ci-dessous, avec une photo de l'ancienne page d'accueil en dessous.

Pour les visiteurs de leur page d'accueil, la nouvelle mise en page frappe immédiatement non seulement par l'esthétique supérieure de ses images, mais aussi par l'effort le plus concerté qu'elle déploie pour placer la valeur des produits de Paravel au premier plan. Vous remarquerez également qu'il y a un menu en haut de la nouvelle mise en page de la page d'accueil qui manquait dans la conception précédente ; Auparavant, la façon d'accéder à leurs produits consistait à faire défiler la page jusqu'à l'endroit où se trouvait un bouton intitulé «acheter la collection». La nouvelle page propose de bien meilleures fonctionnalités de navigation sur le site, comme vous pouvez le voir ci-dessus.

En faisant défiler la page d'accueil, les visiteurs peuvent voir les avis via une bannière coulissante, en savoir plus sur les catégories de produits populaires et même voir comment les clients utilisent les produits via les médias sociaux, comme vous pouvez le voir dans certaines des captures d'écran ci-dessous.

En plus de la page d'accueil, 1Digital ^Ⓡ a créé un nouveau modèle de page de catégorie ainsi qu'une page "Notre histoire" pour Paravel, en plus de plusieurs autres pages système. Parmi ces pages qui ont été développées figuraient leurs pages de panier et de paiement, les pages de connexion, les pages de chèques-cadeaux et les pages de remerciement. Enfin, nous avons personnalisé un certain nombre de pages de contenu, y compris leurs pages "FAQ" et "Conditions".

L'importance d'une conception de site Web réactif de haute qualité est essentielle pour le commerce électronique de nos jours, et les développeurs de 1Digital ^Ⓡ ont pris soin de préparer un site Web réactif mis à jour pour Paravel dans le cadre du projet. Dans l'intérêt de l'expérience utilisateur de Paravel, le nouveau design réactif de 1Digital ^Ⓡ s'adapte automatiquement aux écrans plus petits, redimensionnant et reformatant le texte en conséquence.

Développement avancé - Fonctionnalité de la page de catégorie

Lorsque les développeurs 1Digital ^Ⓡ ont transféré toutes les informations associées aux catégories de produits de Paravel, nous avons également ajouté de nouvelles fonctionnalités à transmettre à leurs clients, améliorant ainsi l'expérience client.

Nous avons installé un éditeur de métachamps dans leur modèle de page de catégorie afin que Paravel puisse apporter des modifications rapides à certains des badges qui apparaissaient sur l'affichage de leur page de catégorie. Cela leur a permis de modifier des champs personnalisés afin que les promotions associées aux produits «nouveaux», «best-sellers» ou «en vedette» puissent être affichées plus en évidence.

Cette fonctionnalité apparemment simple redonne beaucoup de pouvoir aux administrateurs de Paravel pour apporter des modifications rapides et faciles à l'affichage de leur site Web sans travailler avec un développeur. Un homme peut recevoir un poisson ou apprendre l'art, et nous avons fourni des instructions détaillées à Paravel sur la façon d'utiliser et de gérer l'application afin qu'il puisse facilement apporter des modifications même après la clôture du projet.

De même, les développeurs de 1Digital ^Ⓡ ont créé des fonctionnalités d'échantillons de produits et de vue rapide sur les pages des collections de Paravel. Nous avons créé un script personnalisé pour leur page de collections Shopify Plus qui a pu récupérer et afficher les informations souhaitées.

Le script de ces échantillons garantissait également que lorsqu'un client cliquait sur l'échantillon associé à la couleur qui l'intéressait, l'image du produit s'affichait dans cette couleur. De plus, il afficherait le prix applicable associé au changement ainsi que toutes les options de « personnalisation » ou, si nécessaire, un message « en rupture de stock ».

Développement avancé - Fonctionnalité de la page produit

Paravel accorde une grande importance à l'expérience client et, à ce titre, ils avaient besoin de nombreuses fonctionnalités supplémentaires pour leur modèle de page de produit, y compris des capacités supplémentaires pour aider à personnaliser l'expérience d'achat.

Par conséquent, dans le cadre de l'aspect de développement avancé du projet, 1Digital ^Ⓡ a aidé à créer un nouvel ensemble de fonctionnalités amélioré pour personnaliser l'expérience d'achat sur leur site Web, en particulier sur leur page produit.

Nous avons configuré leur modèle de page de produit afin qu'il s'affiche de la même manière que leur ancien magasin Spree. Nous avons ensuite créé une barre "ajouter au panier" qui resterait en bas de l'affichage de la page produit. C'était la partie facile.

Nous avons également développé un outil pour leur modèle de page produit qui permettrait aux acheteurs de personnaliser leur expérience d'achat et de la rendre plus réaliste. En plus d'offrir à ses clients la possibilité de voir à quoi ressemblerait un sac donné (ou un autre produit) en utilisant la fonctionnalité d'échantillon décrite ci-dessus, Paravel donne également à ses clients la possibilité de personnaliser leurs produits.

Paravel était intéressé par les fonctionnalités d'amplification de la conversion d'un outil réaliste qui permettrait à ses clients de voir réellement à quoi ressembleraient leurs produits une fois personnalisés, nous avons donc créé un outil leur permettant de le faire.

L'outil que nous avons construit pour Paravel affichait une fenêtre contextuelle avec les mots "Personnaliser" lorsqu'un client visitait la page du produit. Nous avons ensuite créé un outil qui permettrait au client de personnaliser le produit en fonction du style et de la couleur du lettrage qui apparaîtrait comme un monogramme avec leurs initiales.

Cet outil s'affiche sous forme de widget sur la page du produit après que le client a cliqué sur "Personnaliser" et est très facile à manipuler et à personnaliser en fonction de ses préférences. Afin de garantir que le produit afficherait correctement la personnalisation, nous avons dû créer un script personnalisé qui afficherait avec précision les lettres que le client avait saisies, dans le style qu'il avait sélectionné, sur la bonne zone du produit, comme on peut le voir dans l'image ci-dessous. Comme dernier niveau de fonctionnalité, nous avons créé un "modèle en nylon" qui permettrait aux clients de Paravel de personnaliser leurs produits avec des lettres brodées au lieu de lettres ou d'appliques peintes à la main.

Nous avons créé quelques personnalisations supplémentaires pour les pages de produits de Paravel, notamment la mise en œuvre de quatre onglets à partir des pages de produits sur leur ancien magasin Spree via le codage HTML. Nous avons également recréé la fonctionnalité "Choisissez votre propre aventure" de la boutique Spree de Paravel, qui permet aux clients de personnaliser davantage les produits de Paravel avec des appliques et des motifs peints à la main, en plus de quelques autres personnalisations pour préserver l'intégrité de la fonctionnalité d'origine qui est apparue sur leur magasin Spree.

Intégration avec les applications critiques

Pour sécuriser la fonctionnalité de sa nouvelle boutique Shopify Plus et garantir une expérience utilisateur fluide et agréable, 1Digital ^Ⓡ Agency a dû intégrer la nouvelle boutique de Paravel à ses applications critiques pour l'entreprise.

Entre autres choses, les clients de Paravel se sont appuyés sur des critiques et des témoignages que Paravel a pu dessiner et afficher via YotPo, dont nous nous sommes assurés qu'ils étaient parfaitement intégrés pour eux. Paravel s'est également fortement appuyé sur l'utilisation de Zaius pour l'engagement client et le CRM, nous avons donc effectué cette intégration ainsi que ce qui précède.

En plus de cela, Paravel utilise les fonctionnalités offertes non seulement par RJ Metrics mais aussi par Talkable. Ces applications fournissent des données précieuses aux administrateurs de Paravel et permettent des programmes de marketing de référence sécurisés.

1Digital ^Ⓡ Agency a intégré toutes ces applications au nouveau magasin de Paravel en plus de coder et de développer son nouveau site Web Shopify Plus. Nous avons conclu ce projet, d'envergure complète, impliquant une migration et un développement personnalisé avancé, sans accroc. C'est-à-dire que le client n'a subi aucune interruption indue de ses activités, aucune perte de trafic et est passé à un magasin nouvellement développé avec des fonctionnalités personnalisées avancées sans le moindre accroc. Pour ce faire, il faut de l'expérience et des processus approfondis, que 1Digital ^Ⓡ intègre dans notre flux de travail.

La solution complète

Certains fournisseurs adaptent leurs services à un ou deux services hautement spécialisés, mais nous savons que les problèmes rencontrés par les marchands de commerce électronique sont divers. Si nous n'avions pu offrir que des services de développement, nous n'aurions pas pu migrer Paravel de Spree vers Shopify Plus, qui est l'une des principales plateformes de commerce électronique pour les marchands en ligne. De même, si nous nous étions limités à effectuer des migrations, nous n'aurions pas pu personnaliser leur nouvelle boutique comme ils le souhaitaient.

Les services de conception et de développement Shopify Plus, même lorsqu'ils sont associés à nos services de migration, ne sont qu'un petit aperçu de ce que propose 1Digital ^Ⓡ Agency. En plus de nos services de conception personnalisés Shopify, nous proposons également des campagnes de marketing numérique complètes, y compris des campagnes SEO et PPC hautement compétitives, soigneusement étudiées et ciblées.

Cette réussite repose sur le fait que nous avons pu migrer Paravel de Spree vers une boutique Shopify Plus nouvellement développée avec des fonctionnalités avancées. Beaucoup de nos autres études de cas de commerce électronique se concentrent sur d'autres plates-formes de commerce électronique telles que la conception et le développement de BigCommerce, des services Magento similaires et des campagnes de marketing numérique. Jetez un coup d'œil à notre répertoire et si vous voulez voir comment nous pouvons résoudre les problèmes auxquels sont confrontées vos activités en ligne, appelez-nous au 888-982-8269.

Télécharger le PDF