5 mises à jour incontournables de Shopify pour améliorer votre boutique en ligne

Si vous exploitez un site Web de commerce électronique à l'aide de Shopify, il est essentiel de suivre les dernières mises à jour de Shopify pour garder une longueur d'avance sur la concurrence. En 2023, le nombre de magasins Shopify a dépassé les 6,3 millions, couvrant 175 pays à travers le monde. Notamment, Shopify a établi sa domination sur le marché américain du commerce électronique, détenant une part de marché significative de 19,8 %.

Avec une base d'utilisateurs aussi massive, Shopify travaille toujours sur de nouvelles fonctionnalités pour répondre aux besoins de ses utilisateurs. En tant que partenaire de développement Shopify en marque blanche, nous nous tenons au courant des dernières tendances et mises à jour.

Ces récentes mises à jour de Shopify vous aideront à améliorer votre boutique en ligne et à suivre l'évolution constante du paysage du commerce électronique.

I. Collecte automatisée avec Metafield

Les collections automatisées utilisant le champ méta peuvent vous aider à créer des collections plus précises pour vos produits sur Shopify. Les champs méta sont des champs personnalisés qui vous permettent d'ajouter des informations supplémentaires à vos produits, telles que la couleur, la taille ou le matériau.

Shopify vous permet désormais d'ajouter des conditions de champ méta aux collections automatisées. Cela signifie que vous pouvez créer des collections automatisées plus précises pour vos produits en fonction des champs méta du produit.

Une fois que vous avez ajouté des champs méta à un produit, le produit sera automatiquement ajouté à la collection automatisée correspondante.

Pour ajouter des conditions de champ méta à une collection, vous devez suivre ces étapes :

Étape 1 : Création d'un métachamp pour le produit

Tout d'abord, vous devez créer un champ méta pour votre produit ou variante. Accédez à la section "Champs personnalisés" dans vos paramètres Shopify et sélectionnez "Ajouter un champ personnalisé".

Avec les récentes mises à jour de Shopify, il est désormais plus facile d'ajouter des informations importantes sur vos produits à l'aide de champs méta. Vous pouvez choisir parmi quatre types de métachamps :

• Texte sur une seule ligne
• Entier
• Décimal
• Vrai ou faux

Si vous souhaitez créer des valeurs prédéfinies pour votre champ méta, sélectionnez « Liste de valeurs ».

Étape 2 : Configuration des collectes automatisées

Une fois que vous avez créé votre champ méta, vous pouvez configurer des collections automatisées basées sur cette valeur de champ méta. Accédez à la section « Collections automatisées » de votre tableau de bord Shopify et sélectionnez « Créer une collection automatisée ».

À partir de là, vous pouvez sélectionner le champ méta que vous avez créé précédemment et définir les conditions de votre collection. Cette mise à jour de Shopify vous permet d'organiser les produits en collections personnalisées, simplifiant ainsi la gestion des stocks.

Étape 3 : Création d'une collection

Après avoir configuré des collections automatisées, vous pouvez créer une nouvelle collection. Accédez à la section "Collections" de votre tableau de bord Shopify et sélectionnez "Créer une collection".

Dans la section "Conditions", sélectionnez le champ méta que vous souhaitez utiliser pour votre collection et définissez la valeur de ce champ méta. Cela ajoutera automatiquement les produits qui correspondent à la condition de votre champ méta à votre collection.

Suivez ces étapes pour créer des collections automatisées avec métachamp pour vos produits ou variantes. Cela peut vous aider à mieux organiser vos produits et à permettre à vos clients de trouver plus facilement ce qu'ils recherchent pour votre boutique en ligne.

Pour en savoir plus sur les collectes automatisées, cliquez ici.

II. Extensibilité de paiement

À partir du 13 août 2024, paiement. liquid ne fonctionnera plus pour les pages de paiement. Cela signifie que si vous personnalisez actuellement vos pages de paiement avec le paiement. liquide doit passer à l'extensibilité de paiement avant cette date.

Vous devez utiliser l'API Checkout pour personnaliser vos pages d'expédition et de paiement. Les personnalisations effectuées en dehors de cette API ne seront pas prises en charge.

Lorsque vous passez à l'extensibilité de paiement, vous pouvez bénéficier d'expériences de paiement améliorées et d'une meilleure satisfaction client.

Voici comment:

• Étape 1 : accédez à la section API Shopify Checkout du site Web Shopify Developers.

• Étape 2 : Familiarisez-vous avec l'API Checkout et ses fonctionnalités.

• Étape 3 : Personnalisez vos pages de paiement à l'aide de l'API Checkout.

• Étape 4 : testez vos modifications pour vous assurer qu'elles fonctionnent correctement.

Cette mise à jour vous permettra de personnaliser vos expériences de paiement et de donner aux clients plus d'informations pour prendre des décisions éclairées lors du paiement.

III. Création de groupes de sections dans les thèmes Shopify

Shopify a introduit une nouvelle fonctionnalité qui vous permet de créer des groupes de sections dans la mise en page de votre thème. Les groupes de sections sont des conteneurs JSON qui permettront au propriétaire du magasin d'ajouter, de supprimer et de réorganiser des sections dans des zones du fichier de mise en page, telles que l'en-tête et le pied de page.

Avec cette mise à jour de Shopify , vous pouvez facilement personnaliser et réorganiser les sections dans la mise en page de votre thème.Cette fonctionnalité promet un flux de travail plus rationalisé et efficace pour les magasins en ligne.

Pour ajouter un groupe de sections, procédez comme suit :

• Étape 1 : Accédez à "Modifier le code" dans votre boutique Shopify.

• Étape 2 : Allez dans « Sections » et cliquez sur « Ajouter une nouvelle section » pour ajouter une nouvelle section.

• Étape 3 : Ajoutez un nom de fichier et ajoutez-y « .json » pour créer un nouveau fichier JSON.

• Étape 4 : Dans le fichier JSON, ajoutez les quatre attributs suivants : "Type", "Name", "Sections" et "Order".Ces attributs sont obligatoires, sans aucun des éléments que le fichier JSON ne sauvegardera pas. si l'un d'entre eux manque, cela donnera une erreur.

• Étape 5 : Nous pouvons avoir l'une des valeurs suivantes : "header", "footer", "aside" ou "custom.<nom> » pour l'attribut « Type ».

• Étape 6 : L'attribut "Nom" peut être n'importe quel nom que vous devez attribuer au groupe de sections.

• Étape 7 : L'attribut "Section" contient toutes les valeurs que nous avons ajoutées à partir de Shopify Customizer.Il sera généré automatiquement par Shopify en fonction du contenu que nous ajoutons. Nous vous recommandons fortement de NE PAS MODIFIER ce fichier JSON manuellement.

• Étape 8 : L'attribut "Ordre" définit le nombre de blocs que nous avons ajoutés aux sections spécifiques.Il sera automatiquement modifié lorsque nous modifierons la commande depuis le personnalisateur. Les attributs d'ordre définissent l'ordre des blocs.

• Étape 9 : Maintenant que vous avez créé le fichier JSON du groupe de sections, la question se pose de savoir comment le lier au personnalisateur et comment il apparaîtra dans le personnalisateur.Pour cela, vous pouvez ajouter le code suivant à votre fichier liquid :

• {% sections "Section_group_file_name" %}

• Étape 10 : Cela liera le fichier de groupe de sections au personnalisateur.Une fois lié, vous pourrez ajouter plusieurs sections à ce groupe de sections, comme indiqué dans l'image ci-dessous :

Dans l'ensemble, cette nouvelle fonctionnalité offre aux propriétaires de magasins Shopify comme vous une grande flexibilité et des options de personnalisation pour créer et gérer des sections dans votre fichier de mise en page.

Note:

• Les groupes de sections créés dans Shopify n'apparaîtront pas dans le personnalisateur par défaut. Si vous souhaitez ajouter un groupe de section, vous devrez le faire manuellement dans le fichier à partir du code liquide.

• Cependant, Shopify a récemment introduit une nouvelle fonctionnalité sur le schéma de section qui vous permet de rendre votre section « .liquid » personnalisée visible dans des groupes de sections spécifiques.

• Les attributs "enabled_on" et "disabled_on" du schéma peuvent être utilisés pour accomplir cette tâche. Vous pouvez mieux organiser vos sections « .liquid » personnalisées et les utiliser dans des groupes de sections spécifiques avec cette mise à jour de Shopify.

• Par exemple, si vous avez deux groupes de section nommés "group1.json" et "group2.json" et un fichier de section nommé "section_file.liquid", vous pouvez utiliser l'attribut "enabled_on" dans le schéma pour rendre le "section_file.liquid ” section visible uniquement dans “group1.”

• D'autre part, vous pouvez utiliser l'attribut "disabled_on" pour masquer la section "section_file.liquid" dans "group1" et l'afficher dans tous les autres groupes.

• Les attributs "enabled_on" et "disabled_on" acceptent deux arguments : "template" et "groups". Vous pouvez utiliser les deux en même temps ou l'un d'eux. L'argument "template" autorise tous les types de pages, et [""] autorise toutes les pages.

• L'argument "groupes" vous permet d'ajouter des types de groupes de sections, tels que l'en-tête, le pied de page, le côté et la personnalisation. <nom>. [“”] autorise tous les types de sections.

• Si vous utilisez "enabled_on" avec les arguments de modèle et de groupe, cela signifie que votre section n'apparaîtra que dans le groupe de sections de ce modèle. La même chose fonctionnera dans "disabled_on" mais en sens inverse.

En savoir plus sur « enabled_on » et « disabled_on » ici, vous pouvez également en savoir plus sur les groupes de sections ici.

IV. Fonctionnalité de champ de méta-objet de Shopify

La fonctionnalité Meta Object Field de Shopify est un moyen simple d'ajouter et de stocker des informations structurées pour votre boutique. Il vous permet de stocker des informations sur un produit, telles que ses caractéristiques, ses spécifications et ses tableaux de tailles, qui peuvent ensuite être récupérées et modifiées à partir de l'administrateur Shopify.

Cette fonctionnalité peut être utilisée pour les produits, les collections, les clients, les commandes et d'autres parties de votre boutique. Cette mise à jour rend la gestion et la mise à jour de votre magasin plus simples et plus efficaces.

Les Meta Objects sont accessibles via Shopify Admin, ainsi que via l'API StoreFront et l'API Meta Object. Cette fonctionnalité permet aux applications tierces d'accéder et d'interagir avec les méta-objets.

Cela signifie que vous pouvez utiliser Meta Objects pour créer une large gamme de personnalisations et d'intégrations avec votre boutique.

Configuration des méta-objets

La configuration des méta-objets est un processus simple. Les méta-objets comportent deux éléments clés : le groupe de champs décrivant la structure d'un objet et le contenu ou les données des méta-objets.

• Vous pouvez gérer la structure des méta-objets à partir de la section Paramètres > Données personnalisées de votre interface administrateur Shopify, où vous pouvez ajouter ou supprimer des champs et définir leurs types de données.

• Vous pouvez ensuite gérer le contenu ou les données des méta-objets à partir de la section Contenu > Méta-objets de votre interface administrateur Shopify, où vous pouvez ajouter ou modifier les informations stockées dans chaque méta-objet.

Il est important de rester à jour avec les dernières mises à jour de Shopify pour vous assurer que vos méta-objets fonctionnent correctement.

Lors de la création de méta-objets dans Shopify, il est important de garder quelques éléments à l'esprit pour s'assurer qu'ils fonctionnent correctement.

• Tout d'abord, vous devez donner à chaque méta-objet un nom clair et concis pour vous aider à l'identifier dans le tableau de bord Shopify Admin. Ensuite, vous devez attribuer un type au Meta Object, qui sera utilisé pour l'identifier dans les API.

• En plus du nom et du type, vous devez définir les champs qui composent le méta-objet. Ces champs détermineront le type de contenu qui peut être ajouté au méta-objet.

• Chaque champ aura ses propres détails, y compris un nom, une description, un type et des règles de validation, des limites de caractères, des valeurs minimales et maximales ou des valeurs actuelles.

• Une fois votre méta-objet créé, vous pouvez commencer à créer des entrées pour celui-ci. Ces entrées peuvent être ajoutées aux produits, collections, clients, commandes et autres parties de votre boutique. Vous pouvez également référencer des Meta Objects dans différentes zones de votre boutique ou via des applications tierces.

• Lorsqu'il s'agit d'afficher des méta-objets sur votre boutique en ligne, vous pouvez adopter différentes approches. Vous pouvez afficher les méta-objets directement sur les pages de produits, par exemple, ou les utiliser pour créer des champs personnalisés dans votre processus de paiement.

En fin de compte, Meta Objects vise à fournir un outil flexible et puissant pour gérer les données structurées et le balisage des schémas dans votre magasin. Lorsque vous suivez les meilleures pratiques et concevez soigneusement vos méta-objets, une mise à jour Shopify peut vous aider à créer une expérience de commerce électronique plus efficace et efficiente pour votre client.

Création de références de champ méta pour des pièces Shopify spécifiques

Pour travailler avec des parties spécifiques de Shopify, telles que des produits, des commandes ou des clients, vous pouvez utiliser des méta-objets en créant une référence de champ méta.

Par exemple, si vous souhaitez afficher un méta-objet « Caractéristiques du produit » sur vos pages de produits, vous pouvez créer un méta-champ de produit qui fait référence à ce méta-objet spécifique.

Cette référence vous permet de présenter des « caractéristiques du produit » uniques sur des produits spécifiques. Par exemple, vous pouvez ajouter des entrées de référence comme « Durabilité » sur le produit A et « Matériaux » sur le produit B.

Cette mise à jour de Shopify est excellente, car elle augmente l'efficacité et aide à créer de meilleures expériences utilisateur.

Vous pouvez en savoir plus sur les méta-objets de référence en cliquant ici :

Affichage des champs méta dans votre boutique en ligne Shopify.

Pour afficher les méta-objets sur votre boutique en ligne, vous avez deux options : connecter les méta-champs à votre thème à l'aide de l'éditeur de thème ou modifier le code de votre thème pour ajouter des méta-objets.

Il est essentiel de se tenir au courant des dernières mises à jour de Shopify pour vous assurer que vous utilisez la méthode la plus efficace.

Voici les étapes pour chaque option :

Connectez les métachamps à votre thème à l'aide de l'éditeur de thème :

• Accédez à votre interface administrateur Shopify et cliquez sur Boutique en ligne > Thèmes.
• Trouvez le thème que vous souhaitez modifier et cliquez sur Personnaliser.
• Accédez à la partie de votre modèle où vous souhaitez que la référence de l'objet méta apparaisse.
• Sélectionnez une section existante avec des blocs ou ajoutez-en une nouvelle avec des blocs.
• Cliquez sur le bloc que vous souhaitez connecter à la référence Meta Object.
• À côté du nom du bloc, cliquez sur l'icône Connecter la source dynamique.
• Sélectionnez la ou les références de Meta Object que vous souhaitez afficher avec ce bloc.

Modifiez votre code de thème pour ajouter des méta-objets :

• N'essayez cette option que si vous avez de l'expérience en codage.
• Accédez à votre interface administrateur Shopify et cliquez sur Boutique en ligne > Thèmes.
• Trouvez le thème que vous souhaitez modifier et cliquez sur Actions > Modifier le code.
• Dans le menu de gauche, accédez au modèle auquel vous souhaitez ajouter la référence Meta Object.
• Utilisez Liquid pour référencer le(s) champ(s) méta dans vos modèles de page.
• Enregistrez vos modifications et prévisualisez votre thème pour vous assurer que la référence Meta Object apparaît comme prévu.

Notez que si votre thème est un thème vintage qui ne prend pas en charge les champs méta, vous devrez modifier le code pour ajouter des types de champs méta.

Cette mise à jour facilite la personnalisation des conceptions de page et crée un look unique pour les magasins.

V. Optimisation du code avec le plug-in Shopify Liquid Prettier

Le plug-in Shopify Liquid Prettier (1.0.0) permet efficacement aux développeurs de formater instantanément le code dans un style de code cohérent. C'est un outil précieux pour les mises à jour de Shopify, éliminant le besoin de discuter des directives de style.

Ce plugin est disponible dans le navigateur, le terminal ou dans votre éditeur de code préféré. Avec lui, vous pouvez gagner du temps et maintenir sans effort un code de haute qualité.

Il est disponible avec quelques éditeurs de texte populaires, notamment Visual Studio Code, Vim et WebStorm.

Installez et configurez le plugin dans votre éditeur préféré pour commencer. Cela vous aidera à créer un code plus propre et plus facile à lire et à simplifier les tâches de débogage et de maintenance.

un. Code Visual Studio

Les développeurs du monde entier utilisent Visual Studio Code. Découvrons les deux extensions qui peuvent aider au formatage du code, Shopify Liquid Prettier Plugin et Prettier.

Plugin Shopify Liquid Prettier

Shopify Liquid Prettier Plugin est une fonctionnalité intégrée à Shopify Liquid, qui aide à formater le code Liquid. Pour utiliser ce plugin, vous pouvez ajouter le code suivant dans le fichier settings.json de votre boutique :

{
"[liquid]": {
"editor.defaultFormatter": "Shopify.theme-check-vscode",
"editor.formatOnSave": true
},
}
Ajoutez cette configuration pour appliquer automatiquement la mise en forme au code Liquid lors de l'enregistrement.

Plus jolie

Prettier est une extension qui peut être téléchargée à partir de Visual Studio Code Marketplace. Pour utiliser Prettier avec Shopify Liquid, vous devez installer le plug-in Shopify Liquid Prettier localement dans votre référentiel.

Pour installer le plugin, vous pouvez utiliser npm ou Yarn :

npm install –save-dev plus joli @shopify/prettier-plugin-liquid

fil ajouter –dev plus joli @shopify/prettier-plugin-liquid

Après avoir installé le plugin, Prettier formatera automatiquement votre code en fonction des règles définies dans le plugin. Cela peut aider à gagner du temps et à assurer la cohérence du formatage du code, ce qui facilite sa lecture et sa maintenance.

Suivre les mises à jour de Shopify peut garantir que votre application ou votre thème reste compatible avec les fonctionnalités ou modifications nouvellement introduites.

b. Vigueur

Vim est également un éditeur de texte populaire. Explorons comment utiliser Vim Prettier avec Shopify Liquid, un plugin qui peut vous aider à formater votre code.

• Étape 1 : Installer Vim

Pour commencer, vous devrez installer Vim sur votre machine. Vous pouvez télécharger la dernière version de Vim depuis le dépôt officiel Git, disponible ici.

• Étape 2 : Installer Vim Plus Plus

Ensuite, vous devrez installer Vim Prettier, un plugin qui vous permet de formater votre code en utilisant Prettier depuis Vim. Vous pouvez trouver le plugin sur le dépôt officiel Git ici.

• Étape 3 : Installer le plug-in Shopify Liquid Prettier

Pour utiliser Prettier avec Shopify Liquid, vous devez installer le plug-in Shopify Liquid Prettier localement dans votre référentiel. Vous pouvez le faire en utilisant npm ou Yarn. Exécutez la commande suivante pour installer le plug-in à l'aide de npm :

npm install –save-dev plus joli @shopify/prettier-plugin-liquid

Alternativement, vous pouvez utiliser Yarn pour installer le plugin :

fil ajouter –dev plus joli @shopify/prettier-plugin-liquid

Après avoir installé le plugin, Prettier formatera automatiquement votre code en fonction des règles définies dans le plugin. Cela peut aider à gagner du temps et à assurer la cohérence du formatage du code, ce qui facilite sa lecture et sa maintenance.

De plus, suivre les mises à jour de Shopify peut aider à garantir que votre code reste compatible avec les dernières versions de Shopify et d'autres dépendances.

c. Tempête Web

WebStorm est un environnement de développement intégré (IDE) pour le développement Web qui fournit une assistance de codage avancée, des outils de débogage et une prise en charge des technologies Web populaires.

Pour utiliser le plug-in Shopify Liquid Prettier dans WebStorm, vous devez suivre les étapes ci-dessous :

• Étape 1 : Installez le plugin Prettier à partir du marché des plugins JetBrains.Vous pouvez trouver le plugin ici – https://plugins.jetbrains.com/plugin/10456-prettier.

• Étape 2 : Installez le plug-in Shopify Liquid Prettier localement dans votre référentiel.Vous pouvez l'installer en utilisant npm ou Yarn. Pour l'installer à l'aide de npm, exécutez la commande suivante :
• npm install –save-dev plus joli @shopify/prettier-plugin-liquid
• Sinon, si vous préférez utiliser Yarn, exécutez la commande suivante :
• fil ajouter –dev plus joli @shopify/prettier-plugin-liquid
• Étape 3 : Redémarrez WebStorm.

• Étape 4 : Dans les préférences de WebStorm, recherchez Prettier et mettez à jour l'option "Exécuter pour les fichiers" pour inclure les fichiers "liquides".Vous pouvez également cocher la case "À l'enregistrement" pour formater automatiquement les fichiers lors de l'enregistrement.

• Étape 5 : Enregistrez vos paramètres pour activer le plugin.

Avec ces étapes, vous pouvez utiliser le plug-in Shopify Liquid Prettier dans WebStorm pour formater automatiquement votre code Liquid et améliorer la lisibilité de votre code.

Il est important de suivre les mises à jour de Shopify, en mettant à jour le plug-in Shopify Liquid Prettier dans WebStorm. Lorsque vous mettez régulièrement à jour un plug-in, vous pouvez profiter de nouvelles fonctionnalités et améliorations, en vous assurant que le code de votre application Shopify est toujours correctement formaté et facile à lire.

Conclusion

Comme vous pouvez le constater, les mises à jour de Shopify peuvent apporter de nombreuses améliorations au fonctionnement de votre boutique en ligne. Armé de ces mises à jour, vous pouvez laisser vos concurrents derrière vous. Et profiter de ces précieuses mises à jour est désormais plus facile que jamais grâce à nos services de développement Shopify en marque blanche.

Chez E2M, nous nous engageons pour votre succès et sommes plus qu'heureux de vous aider pour toute question que vous pourriez avoir sur ces mises à jour. Nous croyons en votre entreprise et souhaitons la voir atteindre de nouveaux sommets. Contactez-nous si vous avez besoin d'aide.

Profitez de ces précieuses mises à jour et assurez-vous que votre boutique est à jour avec les dernières innovations Shopify.