De retour en 2015, Magento 2 arrive sur le marché, succédant à Magento 1 après 7 ans de bons et loyaux services. Un condensé de technologie, un vent frais sur le monde de l’e-commerce qui consolidera la position forte de Magento sur le marché et sa popularité qu’on lui connaît.
L’écart entre la sortie de Magento 2 et aujourd’hui est maintenant supérieur à celui de la première et seconde itération de Magento. Force est de constater que Luma, le thème par défaut, a fait son temps et ne répond plus aux attentes du Web en 2023.
Que faire ? Optimiser, tant bien que mal, un thème avec des technologies non obsolètes ? Ou se tourner vers l’avenir ? C’est la question qui a animé la création d’Hyvä, un nouveau thème pour Magento 2, qui remplace entièrement Luma, en utilisant la pointe des technologies actuelles.
Mais migrer son site vers un nouveau thème peut être coûteux, effrayant ou simplement ne pas convaincre par sa nouveauté et ses promesses. Voici donc 8 raisons pour vous aider à sauter le pas !
1. La communauté
Le thème Hyvä a été fondé par plusieurs grands noms de la communauté Magento dont Willem Wigman. Fort d’une expérience Magento depuis plus de 10 ans, ayant travaillé notamment chez integer_net et Vinai Kopp, grand contributeur de Magento, et particulièrement Mage-OS, formateur à la Magento U et aussi speaker pour MageTV.
Un noyau aussi fort permet d’avoir une communauté très active autour d’Hyvä, qui ne cesse de proposer de nouvelles compatibilités, features et débug pour un projet encore relativement nouveau mais pourtant si stable et puissant, compatible Magento Community et Adobe Commerce.
Les développeurs travaillant sur le développement d’un site utilisant Hyvä ont un accès privilégié au Slack de la communauté, ainsi qu’à un compte GitLab où les compatibilités de modules sont mises à disposition, en plus de pouvoir contribuer directement au code d’Hyvä. Sur Slack, il y a pléthore de développeurs front-end, back-end, et même DevOps, prêts à s’entraider, répondre à des questions ou proposer leur avis sur le code produit.
Outre la contribution open source communautaire, les grands éditeurs d’extensions Magento, tels qu’Amasty, MageMe ou encore JaJuMa, ont compris qu’il y avait un avenir très clair et pérenne pour Hyvä. Ils proposent dorénavant des compatibilités natives avec Hyvä. Blackbird rend aussi ses extensions compatibles, notamment Advanced Mega Menu Manager et Advanced Content Manager !
2. À la pointe de la technologie
La volonté première du thème Hyvä est de faciliter le développement front-end pour Magento. Le choix a donc été fait de se séparer de RequireJS et de se baser sur Alpine.js, librairie popularisée dans la communauté Laravel. Pour simplifier encore plus les choses Hyvä intègre Tailwind CSS, qui en plus d’accélérer les développements, permet aussi d’optimiser le poids des styles générés, ce qui impacte positivement la navigation client et le SEO.
Avec une moyenne d’une release par mois sur l’année 2023, l’équipe Hyvä continue de proposer des améliorations continues au produit, tout en veillant à assurer une compatibilité forte entre les nouvelles sorties et les versions précédentes. Les montées en versions sont également simplifiées via l’utilisation de scripts d’upgrade qui permettent de se mettre à jour tout en douceur et sans risque.
Nouvelles fonctionnalités, corrections mais aussi upgrade des différentes dépendances, les releases fréquentes permettent de profiter des améliorations des deux librairies principales d’Hyvä, Alpine.js et Tailwind CSS. Les équipes peuvent donc écrire du code moderne et de qualité tout au long de la vie du site et ainsi limiter la dette technique qui peut devenir bloquante sur les thèmes magento plus classiques.
3. Un boilerplate prêt à l’emploi pour les petits projets…
Hyvä est la solution parfaite pour les boutiques simples, le thème natif étant déjà très complet, moderne et performant. Toutes les fonctionnalités d’un Magento Open Source sont en effet disponibles “out of the box”. Son installation rapide en fait l’outil parfait pour un démarrage de projet immédiat.
L’utilisation de Tailwind CSS permet par ailleurs de procéder à des personnalisations fortes du thèmes natif sans avoir à repasser sur l’ensemble de la base de code. En effet, la simple redéfinition des couleurs de notre thème, de la taille du conteneur ou des différentes tailles d’écrans permettent de customiser le frontend en un temps record pour les projets qui mettent l’accent sur la simplicité.
4. … Et très modulable pour les gros projets
Hyvä nous facilite la vie sur les projets qui demandent plus de personnalisation ou de développements spécifiques pour des fonctionnalités custom. Le changement de stack technique de Knockout / RequireJS vers Alpine.js est un véritable gamechanger. Fini les dizaines de fichiers JavaScript chargés dans des ordres parfois incertains, Alpine.js est une dépendance unique et nous permet d’écrire du code propre, moderne et maintenable.
Dans le même registre, l’utilisation de Tailwind CSS facilite les intégrations et permet d’assurer une plus grande uniformité des pratiques pour les équipes qui interviendront tout au long de la vie du projet. On gagne encore ici en maintenabilité tout en bénéficiant d’un gain de temps considérable sur la phase d’intégration, ce qui marque un peu plus la fracture avec le thème natif Luma proposé par Magento.
L’équipe Hyvä a également pensé aux e-commerçants qui souhaiteraient faire cohabiter des websites avec des thèmes Luma et Hyvä sur la même instance Magento. Il est en effet très simple de configurer un thème Hyvä pour s’assurer qu’aucun impact ne se fera sur un autre site de l’instance, les instructions propres à Hyvä ne pouvant être interprétées par Magento que si le thème est activé sur le site visité. On peut donc envisager des migrations tout en douceur sur les boutiques de notre Magento.
5. Hyvä UI, une librairie de composants
Disponible depuis juillet 2023 pour tous les propriétaires d’une licence Hyvä, la librairie Hyvä UI est remplie de composants prêts-à-l’emploi pour aider les développeurs, marchands ou agences à intégrer des boutiques en ligne simplement et rapidement.
Ces composants sont parmi les plus prisés du monde l’e-commerce : header et footer, menus desktop et mobile, barre de notification, bannière hero, réassurance, blocs de contenus… Le choix ne désemplit pas et permet assurément de personnaliser sa boutique simplement et efficacement.
Un composant n’est pas exactement à votre goût ? Ils sont très facilements personnalisables pour les développeurs, et s’adaptent nativement à la palette de couleur de votre site grâce au fonctionnement de TailwindCSS.
Plus besoin de chercher, installer ou maintenir des modules pour donner vie à son site : ces composants sont récupérables depuis un seul et unique module maintenu sur GitLab par Hyvä et la communauté, intégrables en trois clics sur votre site !
6. Des performances à toutes épreuves
Un des véritables enjeux actuels d’une boutique en ligne, et du web plus généralement, est la performance. Les utilisateurs n’ont plus le temps, ils ne veulent pas attendre. Cela impacte également le degré de confiance accordé à un site internet : s’il met plus d’une poignée de secondes à charger, c’est déjà trop tard, quelque chose “ne va pas”.
Pas de panique ! Avec les technologies utilisées par Hyvä Themes, les performances discutables du thème natif Luma d’Adobe Commerce sont éclipsées. À l’aide d’un système de classes composites épuré, TailwindCSS permet de délivrer le style d’un site à moindre coût ; tandis qu’AlpineJS vient remplacer le robuste mais vieillissant jQuery pour donner un coup de peps et de modernité aux intéractions utilisateurs.
De tels changements sont majeurs pour la structuration d’un thème Magento : ce sont les noyaux durs qui sont exposés aux moteurs de recherche et aux robots qui les analysent. Là où Luma proposait, pour son thème de base, des performances Lighthouse avoisinant les 40/100 sur la page d’un produit, Hyvä atteint sans difficulté 99/100 !
De telles performances sont également réalisables grâce à un système de glyphes moderne, HeroIcons (par les fondateurs de TailwindCSS), qui permet de profiter pleinement des fonctionnalités proposées par les SVG, au sein même de Magento. La personnalisation est simple, le remplacement ou l’ajout de nouvelles icônes est fluide et rapide.
7. Le SEO au premier plan
Pour beaucoup, le SEO est malheureusement relégué au second plan. Faute d'intuitivité, d’intérêt ou de compréhension des enjeux, il est facile de passer à côté d’une des briques fondamentales du Web actuel. Hyvä cherche sans relâche à faciliter la vie de ceux qui leur font confiance, c’est pourquoi le thème est orienté vers une intégration répondant à tous les critères principaux du SEO dans l’e-commerce.
Les scores natifs étant de 100/100, il est important de le préciser car dans un contexte de concurrence rude, il est vital d’être correctement référencé par les moteurs de recherche pour faire grandir son activité.
Jusqu’à il n’y a pas si longtemps, le SEO était souvent considéré comme uniquement une poignée de mots-clés, ou de titres, formant un score. Récemment, les enjeux d’inclusivité ont bouleversé cette vision en mettant l’accent sur l’accessibilité. C’est pourquoi, depuis août 2023, Hyvä Themes répond nativement à la norme WCAG au niveau AA, pour apporter une réponse technique complète aux enjeux de l’e-commerce.
8. Plusieurs checkout en options
Le checkout est une étape cruciale, il est donc important de choisir la bonne solution pour offrir la meilleure expérience aux clients. L’équipe Hyvä en est pleinement consciente et propose plusieurs approches pour répondre à cette problématique.
On retrouve tout d’abord une fonctionnalité de “fallback” qui permet au checkout Luma de cohabiter avec le thème Hyvä. Avec cette option, le checkout est celui de Magento natif, les modules installés ou les développements déjà effectués sur cette partie sont conservés. Si c’est peut-être l’option à privilégier lors d’une migration d’un site existant vers un thème Hyvä, on ne bénéficiera pas des technologies propres à Hyvä pour personnaliser le checkout par la suite. Autre point à considérer, les performances du checkout Luma peuvent être en dessous de celles des autres options disponibles, ce qui peut être un frein considérable à la conversion.
L’option React Checkout est également disponible. Cette solution présente un intérêt réel pour les équipes de développement ayant une expérience React JS qui leur facilitera la personnalisation de l’expérience utilisateur. Avec la popularité de React, il s’agit ici aussi d’une option pertinente pour s’assurer de pouvoir faire évoluer le checkout de manière continue.
Hyvä propose enfin un checkout 100 % maison : Hyvä Checkout. Il s’agit d’un produit à part qui devra être prévu hors du coût de la licence initiale du thème. On retrouve ici tous les avantages du thème Hyvä pour le développement frontend (AlpineJs et Tailwind) couplé à la puissance de Magewire, un système inspiré du Livewire de la communauté Laravel.
Pour faire simple, cela permet de personnaliser le checkout et ses interactions grâce à du code PHP, ce qui offre la possibilité aux équipes Magento de livrer et de concevoir ces interactions de manière plus fluide. On peut ainsi atteindre un degré de personnalisation encore plus élevé en étant moins dépendant de modules externes, tout en améliorant les performances côté client.
Pour conclure
Huit raisons ne suffisent pas à décrire l’ampleur de la révolution technologique qu’incarne Hyvä dans l’écosystème Magento. C’est la réponse performante, clé en main et innovante pour proposer à nos clients des boutiques répondant du mieux possible aux besoins de leurs leads.
En plus de sensibiliser davantage à l’accessibilité, au SEO et aux bonnes pratiques de développement, sa communauté est parmi les plus actives, notamment par son entraide et ses acteurs pertinents. L’essayer, c’est l’adopter !
Besoin de le voir pour le croire ? Voici deux de nos références Hyvä : Bultex et Maison Kitsuné.
