Liste des magasins de démonstration Shopify Hydrogen [Mise à jour]

Comme Shopify est une plate-forme de commerce électronique SaaS, ses utilisateurs sont confrontés à de nombreuses restrictions pour personnaliser leurs boutiques en ligne, mais avec Hydrogen, ce n'est peut-être plus le cas.

Hydrogen est le premier framework basé sur React de Shopify permettant aux développeurs de créer des vitrines personnalisées. En utilisant les composants React Server, l'API de rendu et de mise en cache côté serveur, le framework permet aux développeurs de créer des vitrines rapides et extrêmement flexibles en peu de temps.

Une boutique de démonstration vous aide à vous familiariser avec le framework, sa structure et ses composants. De plus, cela donne une idée claire de l'apparence et des performances réelles d'un magasin Shopify Hydrogen.

Démonstrations de vitrine Shopify Hydrogen

1. La démo officielle de Shopify

La démo officielle est téléchargée sur StackBlitz - un environnement en ligne pour les développeurs. L'aperçu en direct sera récupéré en quelques secondes dans le panneau de droite. Veuillez noter que vous ne pouvez pas voir cette boutique de démonstration via mobile.

2. Approvisionnement Shopify

Ce n'est en fait pas une boutique de démonstration, mais une boutique officielle créée avec Hydrogen par Shopify eux-mêmes.

3. Démo Hydrogène par Tapita

La démo frontale Shopify Hydrogen est créée par SimiCart à l'aide du constructeur de pages Tapita Hydrogen pour faire glisser et déposer toutes les pages.

4. Démo hydrogène par rafaelcg.com

Cette démo frontale est créée à des fins éducatives, qui illustre comment les développeurs peuvent créer une vitrine personnalisée de base avec Hydrogen.

5. Démo Hydrogène par Sanity

La démo montre comment un magasin Shopify Hydrogen peut fonctionner avec Sanity.io - un outil qui combine des produits et des données marketing.

Démonstrations du projet Shopify Hydrogen

Voici une collection de projets de démonstration sur Github pour vous aider à connaître les composants et les structures de Shopify Hydrogen.

• Démo par Shopify
• Projet par Shopify Supply
• Démo par Shobhit Sirohi
• Démo par henryclong
• Démo par andacg1
• Démo par bschnell-google
• Démo par kwaaaaaa

Shopify Hydrogen vs Shopify magasin normal : quelle est la différence ?

Bien que cela puisse être facile pour les développeurs, les marchands Shopify peuvent trouver difficile de comprendre Shopify Hydrogen, ses termes associés et son fonctionnement.

Ainsi, nous faisons une brève comparaison pour souligner les principales différences entre Shopify Hydrogen et un magasin Shopify normal, afin que les marchands Shopify non férus de technologie puissent avoir une meilleure image.

Définition

• Shopify Hydrogen : un cadre pour les vitrines personnalisées avec des composants d'interface utilisateur
• Shopify : une plateforme de commerce électronique

Framework et plate-forme sont deux termes informatiques déroutants à comprendre pour les étrangers.

Une plate-forme contient à la fois du logiciel et du matériel, qui fournit un environnement permettant aux utilisateurs de créer et d'utiliser son application. Pendant ce temps, ne contenant que des logiciels, un framework est comme un modèle avec des composants prêts à l'emploi pour que les développeurs créent des applications.

Nous considérons souvent la plate-forme comme un terrain de jeu, où les gens visitent et jouent avec des toboggans et des balançoires. D'autre part, le cadre est la balançoire elle-même. Vous pouvez construire une balançoire personnalisée avec les bois et les peintures fournis.

Revenons maintenant à l'affaire Shopify

Shopify, la plate-forme de commerce électronique, propose des thèmes, des fonctionnalités de commerce électronique et des applications permettant aux propriétaires de magasins de créer des sites Web en ligne.

Pendant ce temps, Shopify Hydrogen - le cadre - offre la structure, les outils et les composants nécessaires aux développeurs pour créer des vitrines personnalisées pour fonctionner sur les sites Web Shopify.

Langage de codage

• Shopify Hydrogen : Javascript avec le framework Reacts
• Shopify magasin normal : Shopify liquide

Liquid est le seul et unique langage de codage pour Shopify, qui est exclusif à Shopify. D'autre part, Javascript est un langage de codage très universel utilisé pour des millions d'applications. Par exemple, Netflix, Facebook, Candy Crush, Linkedin, etc. sont des applications notables qui utilisent Javascript.

Bien que Shopify Liquids soit un langage de codage solide, il présente certaines limites, notamment en termes de performances. L'utilisation de Javascript pour les vitrines Shopify permet des pages Web plus rapides tout en ouvrant des possibilités infinies pour créer des UI et UX de site Web uniques.

Convivialité

• Shopify Hydrogen : orienté développeur
• Shopify normal store : non orienté techno

Les termes introduits sur le site Hydrogen, sa démo, ses tutoriels sont destinés aux développeurs. Bien que tout le monde puisse créer une boutique Shopify, vous aurez besoin d'une expérience de codage pour créer des vitrines personnalisées via Shopify Hydrogen.

Avantages

Hydrogen offre aux développeurs et aux marchands une nouvelle façon de créer des expériences de commerce électronique dynamiques sur Shopify. Il résout de nombreux problèmes existants avec les vitrines Shopify actuelles, tels que le manque de flexibilité et les performances de vitesse.

Plongeons plus profondément dans les avantages de Shopify Hydrogen :

Rapide à développer

Avec près de 30 composants inclus, le modèle de démonstration officiel présente déjà le parcours d'achat client complet prêt à l'emploi. De cette façon, les développeurs peuvent ignorer la configuration et se mettre immédiatement au codage.

En outre, Shopify Hydrogen est livré avec des crochets, des composants et des utilitaires prêts à l'emploi qui se connectent directement à l'API Storefront. Ainsi, la récupération de données est rendue simple et efficace, sans qu'il soit nécessaire de créer des requêtes GraphQL.

Meilleure performance

Shopify Hydrogen tire parti des technologies Web avancées pour optimiser la vitesse et tirer parti des performances :

• Rendu côté serveur en streaming
• Composants du serveur React
• Cache intégré intelligent et récupération de données efficace
• Combinez dynamiquement le rendu côté serveur, la récupération côté client et la livraison en périphérie

Une amélioration des performances conduit inévitablement à un meilleur score Google Core Vitals, donc à de meilleurs résultats SEO.

Plus grande polyvalence

L'hydrogène est la façon dont Shopify répond au commerce sans tête - l'une des tendances les plus importantes du commerce électronique en 2022.

Le commerce sans tête signifie découpler le frontend du backend pour obtenir une personnalisation et une intégrabilité inégalées.

En faisant cela avec Hydrogen, vous pouvez librement apporter des modifications au frontend sans affecter les fonctions du backend. Cela inclut l'utilisation de plusieurs interfaces pour une meilleure personnalisation et la correction des structures d'URL de Shopify.

De plus, avec l'architecture sans tête, toute la personnalisation et la maintenance peuvent être effectuées simultanément dans le backend et dans le frontend. Sachant que leur processus frontal n'affectera pas le backend et vice versa, les développeurs et les concepteurs auront plus de liberté pour faire leur travail.

Voir plus : Exemples de boutiques Shopify sans tête

Meilleure personnalisation

L'avenir du commerce électronique consiste à offrir aux clients l'expérience la plus pertinente.

La personnalisation simple commence par la localisation - une page est traduite dans différentes langues pour les acheteurs de différents pays.

Cependant, de nos jours, la personnalisation du commerce électronique est devenue de plus en plus complexe. Nous avons vu les prix changer dynamiquement en fonction de différents contextes, des recommandations de produits affichées différemment vers des clients variés, etc.

Les magasins de commerce électronique essaient maintenant de personnaliser chaque petit détail de leurs sites Web.

Expliquant la personnalisation moderne du commerce électronique, Ilya Grigorik, ingénieur principal chez Shopify, a visualisé chaque page comme un tableau Tetris ouvert, et chaque "emplacement" du tableau peut être personnalisé pour attirer les visiteurs de manière dynamique.

Alors, comment Shopify Hydrogen aide-t-il à la personnalisation ?

Plutôt qu'une structure solide, une vitrine Shopify Hydrogen est composée de divers composants d'interface utilisateur. Les développeurs et les marchands peuvent personnaliser chaque composant de contenu pour offrir le meilleur contenu dynamique et une expérience client personnalisée.

Vous pouvez, par exemple, créer un bloc pour les recommandations de produits en fonction des données client telles que les achats antérieurs ou des informations démographiques.

De plus, les boutiques en ligne personnalisées sont souvent très complexes, ce qui nécessite une technologie Web plus puissante et plus dynamique pour maintenir une bonne performance de vitesse. Shopify a depuis longtemps pris conscience de ce problème. Par conséquent, tous les efforts d'Hydrogen pour des magasins plus rapides, y compris un meilleur rendu côté serveur, la mise en cache dynamique et la récupération de données, sont faits avec ce problème spécifique à l'esprit.

Personnalisez les vitrines d'hydrogène avec SimiCart

Hydrogen est le tremplin de Shopify vers l'avenir du commerce électronique : dynamique et personnalisation. Avec Hydrogen, Shopify peut donner plus de valeur à ses clients, en particulier à ses marchands en pleine expansion, et ainsi maintenir son avantage concurrentiel par rapport aux autres plates-formes flexibles.

Pour les marchands, l'abandon de votre interface Shopify actuelle et la création d'une vitrine Hydrogen aident à résoudre de nombreux problèmes existants tels que les performances et la personnalisation. Cela se traduit par une valeur de commande moyenne plus élevée, un meilleur taux de rétention et une augmentation des revenus.

Cependant, Hydrogen, pour le moment, est toujours conçu pour les développeurs plutôt que pour les propriétaires de Shopify non férus de technologie. Une expérience de codage est nécessaire, il n'y a pas d'outil de création de page pour commencer, et il n'y a pas non plus de guides adaptés aux débutants.

SimiCart propose une solution de développement complète pour créer des vitrines sans tête avec Shopify Hydrogen à un prix abordable. Le package est livré avec un outil de création de page par glisser-déposer afin que les marchands Shopify puissent créer une vitrine Hydrogen personnalisée comme ils le font avec un magasin Shopify normal.