Article rédigé par Alexandre, Développeur front-end chez Dn’D

En juin 2021, Shopify a annoncé la sortie de sa nouvelle boutique en ligne 2.0 lors de son événement Shopify Unite.

Cette importante mise à jour a apporté beaucoup de nouvelles fonctionnalités, offrant aux marchands plus de flexibilité, de personnalisation, et des performances améliorées, telles que :

  • les sections personnalisables disponibles sur toutes les pages (produits, collections, pages, etc.), et non seulement sur la page d’accueil
  • la gestion native des metafields avec l’ajout facile de champs personnalisés pour les produits, collections ou autres, directement dans l’interface Shopify, sans besoin d’applications tierces
  • un éditeur de thème amélioré avec la personnalisation en temps réel, la gestion de modèles multiples, et la possibilité d’ajouter, de supprimer ou de réorganiser les blocs dans l’éditeur

Tout site web réalisé à l’aide de Shopify après juin 2021 dispose donc de cette nouvelle version 2.0.

Cependant, il est tout à fait possible de continuer à développer et gérer une boutique réalisée avant cette date, sous Shopify 1.0. L’éditeur ne pénalise pas ces sites et continue d’offrir la possibilité aux marchands d’administrer et de faire évoluer leur business, qui sera toujours compatible avec cette mise à jour des boutiques.

Néanmoins, il y a tout intérêt à effectuer une migration vers un thème adapté et optimisé pour les boutiques 2.0, les sites réalisés à l’aide de ces thèmes 1.0 ne pouvant bénéficier de ces nouvelles fonctionnalités.

Comment savoir si votre site utilise un thème 1.0 ?

Cas 1 : accès au back-office et à l’éditeur de thème de la boutique ainsi qu’aux fichiers du thème

Nous vous conseillons d’ouvrir une page produit ou une page collection dans l’éditeur de thème. S’il est possible d’ajouter ou réorganiser des sections dynamiques (comme des bannières, des vidéos, des blocs de texte, etc.) sur ces pages, alors il s’agit d’un thème 2.0. Si ce n’est pas le cas, c’est un thème 1.0. 

Les thèmes Shopify 2.0 utilisent des fichiers JSON pour la personnalisation de pages, tandis que les thèmes 1.0 utilisent uniquement des fichiers Liquid. Depuis le back-office de votre boutique, cliquez sur Boutique en ligne/Thèmes/Actions/Modifier le code. Vous accéderez ainsi à la structure des dossiers/fichiers de votre thème. Dans le dossier templates, s’il y a la présence de fichiers .json (par exemple, product.json , collection.json ), c’est qu’il s’agit d’un thème 2.0.

Capture d’écran de l’éditeur de thème de Shopify

Cas 2 : via l’inspecteur du navigateur

Pour commencer, rendez-vous sur votre site via un navigateur web. Réalisez un clic droit, puis “Inspecter”. Le code de la page s’affiche ensuite dans un volet.

  • Pour le Thème 2.0 : vous verrez des classes ou structures liées aux sections dynamiques ou aux métadonnées modernes. Par exemple, sur la page d’accueil, les pages produits, collections, CMS ou autre, les sections sont indiquées comme suit via leur ID : shopify-section-template–21017399427396__1635927863703110df
  • Pour le Thème 1.0 : Le code est généralement moins organisé, et vous trouverez des structures plus basiques. Sur la page d’accueil, les ID des sections ont cette forme (sans le “-template” comme sur un thème 2.0) : shopify-section-1591010551543. De plus, vous n’aurez pas la présence de ce type de section avec cet ID spécifique sur les pages produits, collections ou tout autre page CMS.
Capture d’écran de la fiche produit avec inspecteur de code ouvert

Les limites des thèmes 1.0

On peut noter plusieurs limites aux thèmes 1.0 de Shopify :

  • Ils ne disposent pas des outils de travail et de déploiement modernes fournis par Shopify 2.0 (comme les environnements locaux de développement ou le support de dernières versions de compilation). Cela limite la productivité et la fiabilité des interventions.
  • Ils ne prennent pas en charge de nombreuses fonctionnalités avancées intégrées dans Shopify 2.0 (comme la modularité du contenu, les options de personnalisation native via l’éditeur de thème ou la meilleure gestion des performances). La maintenance d’un thème Shopify 1.0 ne permet donc pas de suivre les évolutions technologiques et de répondre aux attentes actuelles des utilisateurs.
  • Leur maintenance pose des difficultés pour mettre en œuvre les dernières pratiques de sécurité, de performance, et de compatibilité mobile.
  • Shopify 1.0 n’offre pas un support natif pour les environnements de test, ce qui complique la vérification des modifications avant déploiement (phase de recette/test interne et côté client). Sans environnement sécurisé, chaque intervention comporte un risque accru d’erreur en production, impactant potentiellement les utilisateurs. Contrairement à ce que permet la CLI Shopify 2.0.
  • Les pratiques et standards de développement évoluent, et Shopify 1.0 n’est plus aligné avec les normes actuelles en matière de structure de code, de performance, d’accessibilité et de responsive design. Toute intervention nécessite souvent plus de travail pour intégrer les bonnes pratiques actuelles.
  • La complexité de maintenir un thème Shopify 1.0 engendre des coûts de maintenance plus élevés à long terme, car chaque intervention nécessite plus de temps pour résoudre des problèmes techniques ou pour adapter des fonctionnalités qui seraient natives sous Shopify 2.0.

Les avantages des thèmes Shopify 2.0 pour votre boutique

À contrario, les thèmes 2.0 offrent quelques avantages intéressants :

  • Ils permettent l’utilisation des sections dynamiques sur toutes les pages (produits, collections, pages CMS, etc.), pas seulement sur la page d’accueil comme avec Shopify 1.0. Cela permet de donner au client une plus grande autonomie sur la contribution de son site.
  • L’éditeur de thème est beaucoup plus intuitif et rend la personnalisation plus facile pour le client.
  • Les thèmes 2.0 sont conçus pour être plus légers et rapides, ce qui améliore les temps de chargement des pages. Le contenu SEO s’en voit donc également amélioré.
  • Shopify 2.0 utilise des fichiers JSON pour les paramètres de personnalisation des pages. Cela permet de créer des modèles de pages uniques et de gérer les contenus de manière plus granulaire en ayant la main sur la création/modification de configuration.
  • Les metafields (champs personnalisés) sont accessibles via le back-office de Shopify, sans avoir besoin d’une application tierce.
  • Less filtres de recherche et de collection natifs sont intégrés
  • Shopify concentre ses nouvelles fonctionnalités et mises à jour sur la version 2.0. Cela garantit donc la compatibilité avec les futures innovations de Shopify.

Adoptez un thème Shopify moderne et évoluez vers le 2.0

Par l’utilisation d’un nouveau thème 2.0

Choisissez un nouveau thème conçu pour Shopify 2.0 depuis le Shopify Theme Store. Il faudra, une fois le nouveau thème installé, veiller à recréer la page d’accueil, les pages produits, les collections, etc., en utilisant les sections dynamiques de Shopify 2.0.

Il faudra de nouveau ajouter les contenus (bannières, textes, images) et configurer les paramètres du thème.

Les avantages :

  • une solution rapide et propre
  • repartir sur une base solide sans se soucier de l’ancien code et de régressions éventuelles

Les inconvénients :

  • cela nécessite de configurer à nouveau manuellement les pages et contenus personnalisés
  • cela peut entraîner des ajustements pour conserver l’apparence de la boutique (UX/UI).

Par une mise à jour du thème 1.0 vers sa version 2.0

Si le thème utilisé bénéficie d’une version 2.0, alors il est possible de mettre cette dernière à jour. Cela se fait facilement via le back-office dans Boutique en ligne/Thèmes/Actions/Mettre à jour à la dernière version. Il faudra néanmoins remettre en place les développements spécifiques s’il y en a, car ils peuvent avoir été écrasés par la mise à jour des fichiers du thème.

Les avantages :

  • cela maintient l’UX/UI du site en restant sur le même thème
  • ce sera plus rapide qu’un changement complet de thème

Les inconvénients :

  • cela nécessite des ajustements pour adapter les anciennes personnalisations et développements spécifiques à Shopify 2.0
  • certains thèmes 1.0 n’ont pas de version 2.0 disponible

Note concernant les metafields

Les metafields sur Shopify sont des champs personnalisés qui vous permettent d’ajouter des informations spécifiques à vos produits, collections, clients ou autres parties de votre boutique. Imaginez que vous vendez des bracelets et que vous souhaitez afficher des détails comme “type de pierre”, “dimensions” ou “entretien”. Ces informations ne sont pas incluses par défaut dans Shopify. Avec les metafields, vous pouvez créer ces champs supplémentaires et les afficher sur votre site.

Avec Shopify 2.0, les metafields permettent de gérer des données personnalisées de manière plus flexible. Cette notion n’existait pas sur les Shopify 1.0, et ces données, anciennement présentes dans des applications tierces, devront être de nouveau renseignées de manière native sur un Shopify 2.0.

La procédure est la suivante :

  • dans Paramètres/Contenu personnalisé : ajoutez des metafields pour les produits, collections ou pages (par exemple, descriptions, tailles, informations supplémentaires)

OU

  • utilisez une application comme Matrixify pour exporter/importer plus facilement les données des metafields de votre boutique 1.0 et les importer dans le thème 2.0.

Les avantages :

  • c’est idéal pour les boutiques avec un contenu riche
  • elle exploite les fonctionnalités natives des thèmes Shopify 2.0

En résumé

Passer d’un thème 1.0 à un thème 2.0 sur Shopify représente une véritable opportunité pour moderniser votre E-Commerce et améliorer l’expérience de vos clients. Avec une flexibilité accrue grâce à l’éditeur visuel, une personnalisation plus intuitive et des performances optimisées, les thèmes 2.0 offrent un cadre bien plus adapté aux besoins actuels des commerçants.

Si vous possédez actuellement un thème 1.0, passer à un thème 2.0 n’est pas simplement une mise à jour esthétique, c’est un investissement stratégique. Cette transition vous permet de tirer pleinement parti des nouvelles fonctionnalités de Shopify, de rester compétitif et d’offrir une expérience utilisateur moderne et performante à vos clients.

Shopify X Dn’D

Depuis plusieurs années, Dn’D accompagne des marchands comme Fleuron, La Bouche Rouge, Mouratoglou, Parabaya ou Monébari dans le développement de leur site E-Commerce sur Shopify.

Grâce à notre expertise sur la solution, nous vous conseillons et vous aidons à exploiter toute la puissance de Shopify pour propulser vos ventes en ligne.

Pour tout projet ou toute question, n’hésitez pas à contacter l’un de nos
Consultants E-Commerce B2C & B2B 👇

Vous avez aimé ?

0