Comment élever votre magasin avec Shopify Hydrogen

L'ensemble de fonctionnalités existant de Shopify est fantastique pour les entreprises qui viennent de s'installer et qui ont besoin de démarrer rapidement. Les défis surviennent lorsque vous cherchez à vous différencier de la concurrence avec une vitrine unique. Heureusement, l'avenir des magasins en ligne est là et vous aurez besoin du framework Shopify Hydrogen pour en tirer le meilleur parti.

Commerce électronique sans tête avec Shopify Hydrogen

Le comportement et les préférences des consommateurs évoluent à une vitesse difficile à suivre, ce qui entraîne une longue série de pratiques de commerce électronique devenues monnaie courante. Du shopping mobile à la recherche vocale, le dernier terme à rejoindre ce groupe est le "commerce électronique sans tête" - et ce n'est pas un terme qu'aucune entreprise axée sur la croissance ne peut se permettre d'ignorer.

Les plates-formes de commerce électronique sans tête ont reçu 1,6 milliard de dollars de financement rien qu'en 2020-2021. Cette avancée dans le commerce électronique aide les entreprises à rester sur la bonne voie dans un marché en évolution grâce à une architecture unique qui dissocie la couche frontale du magasin du backend. De cette façon, les éléments esthétiques de base tels que les styles de texte, les images et les boutons peuvent être personnalisés indépendamment sans affecter la tarification et l'infrastructure de paiement de votre boutique.

Hydrogen est un cadre basé sur React pour Shopify qui donne aux propriétaires d'entreprise le pouvoir de réussir avec des composants prêts à l'emploi pour le commerce électronique sans tête.

Voici pourquoi ça vaut le coup

Ressortir

Les options existantes de Shopify pour la personnalisation via les préréglages et les thèmes de magasin sont déjà très bonnes, mais avec le nombre croissant de vitrines, vous devrez éventuellement trouver un moyen de vous démarquer de la foule.

Les utilisateurs sont 40 % plus susceptibles de dépenser plus pour une expérience d'achat personnalisée, et Shopify Hydrogen vous offre les outils pour y parvenir. Séparer le frontend et le backend de votre boutique présente une opportunité unique d'augmenter le trafic Web et les revenus.

Cela semble bien, mais comment fonctionne le framework Hydrogen pour Shopify dans la pratique ? Supposons que vous ayez un nouveau design passionnant pour votre vitrine que vous souhaitez déployer avec Hydrogen. Une fois que vous êtes tous configurés, vous pourrez déployer votre nouveau design en tant qu'application Hydrogen sans avoir à vous soucier des bogues graves qui cassent le backend.

Soyez sans bug

Les bogues qui brisent les magasins sont le fléau de toute entreprise qui essaie de se développer. Votre nouveau produit passionnant pourrait attirer des milliers de nouveaux clients potentiels, seulement pour qu'une erreur interne stoppe brusquement tout cet élan.

Shopify Hydrogen contourne ce problème avec une approche intuitive de la communication backend et frontend. Les deux parties communiquent à l'aide de fonctions connues sous le nom de "hooks" et d'API. Cela garantit que les modifications apportées au frontend s'intègrent parfaitement à l'infrastructure de votre magasin et réduisent les risques qu'une erreur grave se produise après une mise à jour.

Performances plus rapides

Le framework Hydrogen améliore considérablement les performances de votre boutique Shopify. Cela est en partie dû à la prise en charge par le framework de fonctionnalités telles que le rendu côté serveur (SSR). Les pages de magasin ont tendance à utiliser le rendu côté client, ce qui peut souvent entraîner des retards lors du rendu d'octets plus volumineux.

SSR, d'autre part, peut exécuter plusieurs processus ensemble. Cela accélère les temps de chargement des pages pour vos utilisateurs, réduisant ainsi les chances qu'un client potentiel clique en dehors de la page. Le fait que Hydrogen utilise également des quantités minimales de JavaScript contribue également à améliorer les performances en minimisant les besoins en bande passante.

Débuter avec l'hydrogène

Créer une application

Pour tirer le meilleur parti du cadre Hydrogen, nous aurons besoin d'un jeton d'accès Shopify Storefront. Ce jeton est ce qui nous permettra de créer notre première application Hydrogen. Assurez-vous d'avoir un compte Shopify Partners gratuit avant de commencer, car vous en aurez besoin pour accéder à votre jeton.

Shopify Hydrogen prend en charge plusieurs plates-formes différentes pour l'installation. Pour créer votre application localement, accédez au répertoire souhaité et exécutez la commande suivante.

Hydrogen prend en charge npm, npx et yarn , vous pourrez donc créer une application à l'aide de l'une de ces plates-formes en fonction de l'appareil sur lequel vous développez. Pour travailler encore plus facilement avec Hydrogen, pensez à utiliser l'un des nombreux modèles disponibles en ligne. Ces modèles échafauderont votre nouvelle vitrine avec un thème prédéfini, vous évitant ainsi d'avoir à en créer un.

Vous n'avez pas besoin d'être un développeur Shopify expert pour utiliser le framework Hydrogen. Tout ce qu'il faut pour créer une application Hydrogen et installer les dépendances nécessaires est une seule ligne de code ! Vous serez maintenant invité à entrer un nom pour votre nouvelle vitrine avant de passer à l'étape suivante.

Connectez votre magasin

Vous êtes prêt à commencer à personnaliser votre vitrine ! Accédez à votre environnement de développement sur localhost:3000 et accédez à shopify.config.js. Nous entrerons ici notre jeton d'accès Shopify Storefront dans le champ "storefrontToken". Si vous le faites avec succès, votre application de démonstration Hydrogen aura accès aux informations de votre boutique Shopify.

Ajouter un style

Le framework Hydrogen a une structure de fichiers très simple, ce qui rend la personnalisation de votre boutique Shopify plus facile que vous ne le pensez. Dirigez-vous vers le composant index.server.jsc dans le dossier src pour personnaliser votre page d'accueil. Si vous avez opté pour un modèle, vous trouverez quelques lignes de code déjà écrites pour vous. N'hésitez pas à ajouter ou à supprimer le texte ici comme bon vous semble. Ne vous inquiétez pas si la page semble un peu simple ici, car nous ajouterons des options de style à l'étape suivante.

Une fois que vous êtes satisfait du texte, il est temps de lui donner une belle apparence ! Une partie de l'utilité d'Hydrogen pour la personnalisation de Shopify provient de sa prise en charge de Tailwind CSS. Tailwind est un framework qui offre aux développeurs de multiples options de personnalisation. Installez Tailwind et connectez-le à votre modèle de démonstration pour vous lancer dans le style.

Vous devrez redémarrer votre serveur de développement après avoir ajouté des chemins à votre modèle et installé des directives pour que les modifications prennent effet. Une fois que vous êtes prêt, vous pourrez revenir à la page index.server.jsc et ajouter des classes à vos balises <h1> et <p> pour les personnaliser. Choisissez une police avec laquelle vous êtes à l'aise et cliquez sur Enregistrer pour voir les changements !

Récupérer les données du magasin

Les modèles sont parfaits pour expérimenter et comprendre le fonctionnement d'une application, mais qu'en est-il de l'importation des données de votre magasin existant ? Shopify facilite ce processus pour le framework Hydrogen avec l'API Storefront. Vous pourrez utiliser une requête pour récupérer rapidement des données cruciales telles que les collections de produits et le nom de votre magasin, au lieu d'avoir à les reconstruire à partir de zéro.

Utilisez la commande useShopQuery pour extraire les données du magasin. Le composant Layout de l'API Storefront affichera ensuite le nom de votre boutique à partir des données récupérées.

Vous êtes prêt ! Une fois que vous avez créé une application, configuré vos répertoires et récupéré les données de votre vitrine, vous serez libre de créer et de personnaliser des collections de produits comme bon vous semble. Il y a beaucoup de place pour grandir et expérimenter avec Shopify Hydrogen, alors rendez-vous sur la documentation pour plus d'idées et d'exemples de code pour une expérience de développement fluide.

Tirer le meilleur parti de l'hydrogène

En fin de compte, l'hydrogène est un outil, et la façon dont vous pouvez l'utiliser déterminera les performances de votre magasin. Nous avons préparé une liste de conseils utiles pour vous aider à tirer le meilleur parti du cadre Shopify Hydrogen.

Laissez l'analytique vous guider

Grâce à la prise en charge en constante amélioration de Shopify pour Google Analytics 4, vous pouvez désormais prendre des décisions basées sur des données concrètes sur le comportement des utilisateurs. Configurez GA4 pour Shopify et laissez les données vous guider. Si une certaine page ne fonctionne pas trop bien en termes d'engagement des utilisateurs, vous saurez sur quoi concentrer vos ressources.

Rationalisez le parcours de l'acheteur

Shopify Hydrogen offre aux propriétaires d'entreprise une opportunité unique de comprendre le parcours de leur acheteur grâce à l'analyse, puis de l'affiner avec une vitrine simplifiée qui facilite les conversions.

L'un des moyens les plus efficaces de comprendre le parcours de l'acheteur consiste à utiliser des mesures de commerce électronique. Des mesures clés telles que le taux de fidélisation de la clientèle (CRR) mesurent le pourcentage de clients qu'une entreprise conserve au fil du temps, généralement grâce à des achats de retour. Une baisse du CRR pourrait indiquer que votre vitrine actuelle n'en fait pas assez pour satisfaire vos clients.

Donc que fais-tu? Une solution durable pourrait être d'utiliser le framework Hydrogen pour réorganiser vos pages de produits Shopify. Guidez vos visiteurs tout au long de leur achat avec des boutons stylisés "Acheter maintenant" et des éléments de page attrayants tels que des avis en surbrillance. Shopify Hydrogen est une opportunité unique d'augmenter vos statistiques et de fidéliser vos clients avec une vitrine attrayante qu'ils n'oublieront pas.

Meilleures pratiques avec Shopify Hydrogen

Conception axée sur l'expérience utilisateur

L'objectif ultime de votre nouvelle vitrine devrait être d'affiner le parcours de l'utilisateur. Privilégiez les styles de police et les couleurs qui améliorent la visibilité et sont facilement perceptibles - ce principe s'applique également à d'autres éléments de votre vitrine, comme la barre de navigation.

Le cadre Shopify Hydrogen promeut également une conception axée sur l'expérience utilisateur avec des fonctionnalités d'accessibilité intégrées. Cela inclut la prise en charge des gestes de zoom, du texte alternatif et des sous-titres codés pour les éléments multimédias rendus à l'aide du composant vidéo.

Améliorer les performances du site Web

Inspiré des composants React et prenant en charge le SSR, Shopify Hydrogen offre déjà des performances impressionnantes. Cela dit, nous pouvons encore apporter quelques modifications pour garantir une expérience encore plus fluide. Gardez à l'esprit qu'une vitrine bien conçue peut augmenter vos chances de conversion jusqu'à 200 %.

Prioriser les composants partagés

Une question clé à laquelle les développeurs doivent souvent répondre lorsqu'ils travaillent avec Hydrogen est : « Où mes composants doivent-ils être rendus ? » Vous devrez choisir entre créer des composants client, des composants serveur et des composants partagés. De manière générale, il y aura rarement des cas qui appellent exclusivement le rendu client, et la plupart de vos composants doivent être des composants serveur car ils peuvent être rendus plus rapidement sans supprimer aucune fonctionnalité.

Récupération plus rapide

Shopify recommande Oxygen, leur plate-forme de déploiement propriétaire pour les développeurs qui travaillent avec le framework Hydrogen. Le déploiement de votre framework Shopify Hydrogen via Oxygen vous donnera accès à des fonctionnalités incroyablement utiles telles que la mise en cache des données qui peuvent accélérer les demandes de récupération de données.

D'un autre côté, vous voudrez vous assurer que vous ne surchargez pas les données. Cela se produit lorsque l'API Storefront est surchargée par trop de demandes. Si cela se produit, cela pourrait ralentir votre vitrine et avoir un impact significatif sur les temps de rendu des pages pour les utilisateurs.

Qu'est-ce que Shopify Hydrogen ne peut pas faire ?

Avec tout le buzz autour de Hydrogen, il est facile d'oublier qu'il est toujours en développement actif. Savoir ce que vous ne pouvez pas faire avec Hydrogen vous aidera à créer un meilleur plan pour votre vitrine.

Exclusif à Shopify Web

Actuellement, le framework Hydrogen ne prend en charge que le développement des boutiques en ligne Shopify. Cela signifie que vous ne pourrez pas créer de vitrines personnalisées pour d'autres plates-formes telles que les mobiles et les téléviseurs intelligents.

Manque d'aperçu

La fonctionnalité de prévisualisation permet aux développeurs de visualiser les modifications qu'ils apportent à la vitrine en temps réel. Hydrogen ne prend pas en charge les aperçus pour le moment, ce qui pourrait rendre difficile pour les autres membres de l'équipe de voir les modifications proposées, en particulier s'ils ne connaissent pas bien le code impliqué.

Allez sans tête avec de l'hydrogène

Shopify Hydrogen est l'un des meilleurs moyens pour les entreprises de se lancer dans le commerce électronique sans tête. Créez une expérience d'achat personnalisée basée sur votre identité de marque unique et construisez une relation durable avec vos clients. Suivez Coalition Technologies pour en savoir plus sur la dynamisation de votre entreprise avec le commerce électronique sans tête.