Présentation d’Online Store 2.0 : nouveautés et changements pour les développeurs

Lors de notre conférence Shopify Unite, nous avons annoncé l’une de nos mises à jour les plus importantes jusqu’à présent : Online Store 2.0.

Online Store 2.0 offre de nouvelles opportunités aux développeurs qui créent des thèmes et des applications pour les marchands Shopify. Nous avons totalement repensé l’expérience de boutique en ligne et nous proposons un ensemble de nouveaux outils pour vous aider en tant que développeur à concevoir des expériences exceptionnelles pour les marchands et les acheteurs.

Dans cet article, nous passerons en revue les nouvelles fonctionnalités pour comprendre leur impact sur votre travail et les opportunités qu’elles représentent. Nous vous expliquerons également comment mettre à jour vos thèmes et applications d'ici la fin de l’année pour qu'ils soient conformes aux normes d’Online Store 2.0.

Commençons par les nouvelles fonctionnalités d’Online Store 2.0.

1. Mises à jour de l’architecture des thèmes

Nous avons mis à jour l’architecture des thèmes afin de proposer aux marchands des options de personnalisation plus poussées et plus rapides pour leur boutique en ligne. Cela offre également la possibilité aux développeurs de créer des thèmes et des intégrations qui peuvent ensuite être facilement personnalisés par les marchands selon leurs besoins.

Des sections sur chaque page

Jusqu’à présent, les sections étaient disponibles uniquement sur la page d'accueil, ce qui ne permettait pas aux marchands de personnaliser leur boutique en ligne exactement comme ils le souhaitaient. Pour parvenir à un résultat similaire sur les autres pages, il fallait modifier le code, trouver une solution avec des blocs ou encore installer des applications personnalisées.

Tout cela est de l’histoire ancienne grâce aux sections disponibles sur toutes les pages. Les marchands peuvent désormais ajouter des sections sur chaque page et non uniquement sur la page d’accueil. Cela leur offre de toutes nouvelles possibilités pour personnaliser chaque aspect de leur boutique.

Fonctionnement des sections sur chaque page

Ce changement a été possible grâce à une nouvelle approche de l’affichage des templates par la vitrine virtuelle. Chaque type de page peut désormais être affiché à l’aide d’un fichier de template JSON, qui répertorie les sections de la page et enregistre les paramètres relatifs à toute section supplémentaire ajoutée ou modifiée par un marchand. Les boutiques peuvent avoir plusieurs fichiers de template, qui correspondent à des produits, pages de collections, pages personnalisées, articles de blog, etc. Les marchands peuvent ainsi regrouper différentes pages dans une même boutique.

Avec ces nouveaux fichiers de template JSON, vous pouvez définir quelles sections apparaissent par défaut lorsque votre thème est installé, et dans quel ordre. Une fois le template ajouté, le marchand peut, depuis l’éditeur de thème, ajouter toute section qui contient des « presets » (paramètres prédéfinis), exactement comme il était déjà possible d’ajouter des sections dynamiques sur la page d’accueil jusqu’à présent.

Consultez un exemple de cette configuration dans le répertoire /templates de Dawn dans le dépôt GitHub, ou référez-vous à la documentation pour les développeurs sur les templates JSON.

Voici ci-dessous une démonstration des templates.

Extensions d’applications pour les thèmes avec des blocs d’applications

Cette mise à jour de l’architecture des thèmes s’accompagne d’une modification de l’intégration des applications avec la vitrine virtuelle. Il n’existait pas de solution structurée de bout en bout pour intégrer facilement les applications aux thèmes. Les développeurs devaient créer une logique d'intégration pour chaque thème existant et héberger eux-mêmes les ressources. Il était donc difficile de créer des fonctionnalités se comportant de façon identique sur tous les thèmes et fonctionnant rapidement partout dans le monde.

Pour résoudre ces problématiques, nous proposons des extensions d’applications pour les thèmes, qui vous permettent de déployer les applications dans les thèmes des marchands grâce à des blocs d’applications.

 

Modularité intégrée

Les blocs d’applications modifient radicalement la façon dont les applications sont incluses dans les thèmes. Les développeurs peuvent désormais créer des composants d'interface utilisateur qui peuvent être ajoutés, supprimés et configurés directement dans l’éditeur de thème, sans avoir à modifier le code. Les désinstallations seront plus propres, car le code fantôme sera automatiquement supprimé.

Les extensions d’applications pour les thèmes peuvent être facilement créées, publiées et mises à jour (avec une gestion des versions) depuis l'outil Shopify CLI, comme toutes les autres extensions d’applications.

Grâce à cette modularité, vous n’avez plus besoin de définir une logique d’intégration pour chaque thème existant. Et puisqu’il ne sera plus nécessaire d’ouvrir le code du thème pour installer manuellement votre application, vous n’aurez pas à craindre que des changements cassants, nécessitant une correction de votre part, soient effectués.

Pour savoir si un marchand utilise un thème compatible avec vos extensions d’applications, utilisez l’API Theme et l’API Assets. Savoir quel type de thème un marchand utilise vous aidera à lui offrir la meilleure expérience pour intégrer votre application dans son thème.

Héberger et gérer les ressources

Vous pourrez également ajouter les ressources complémentaires de votre application aux extensions d’applications de votre thème, pour un hébergement rapide via le réseau de diffusion de contenu de Shopify, et facilement appeler ces ressources depuis les blocs d’applications des extensions.

Pour créer vos premières extensions d’applications pour un thème et assurer la compatibilité de vos applications avec Online Store 2.0, consultez les informations sur la migration dans notre documentation.

2. Contenu flexible pour les boutiques

Avec Online Store 2.0, les développeurs n’ont pas besoin de coder en dur les champs méta dans les thèmes ou d'utiliser des API pour modifier les pages de produits. Les développeurs de thèmes peuvent désormais utiliser des sources dynamiques pour insérer des champs méta standards et des propriétés de ressources connues comme paramètres par défaut.

Améliorations des champs méta

Le nouvel éditeur de thème permet aux marchands d’ajouter des champs méta et des propriétés sans utiliser d’API ni de code. Les marchands pourront ainsi ajouter exactement le contenu dont ils ont besoin sur leurs pages de produits, par exemple un guide des tailles ou une liste d'ingrédients. Tout ce qui est peu susceptible d’apparaître dans l’éditeur de boutique principal peut maintenant être ajouté grâce à des champs méta.

Côté développement, nous avons repensé les champs méta selon trois axes principaux :

• Plus flexibles : les champs méta ont dorénavant un système de types beaucoup plus flexible, qui se développera au fil du temps pour s'adapter aux données spécifiques au commerce.
• Champs méta standards : les nouveaux champs méta standards permettent d'utiliser beaucoup plus facilement les thèmes personnalisés sur des boutiques de tous les secteurs.
• Indications de présentation : vous pouvez désormais ajouter des indications de présentation aux champs méta. Les utilisateurs de l’API Storefront et de Liquid peuvent ainsi afficher les données du marchand comme il le souhaite, avec bien moins de code personnalisé.

Pour en savoir plus sur les champs méta, consultez notre documentation.

Sélecteur de fichiers

Les champs méta acceptent maintenant les supports multimédias tels que les images ou les fichiers PDF. Grâce au sélecteur de fichiers des champs méta, vous pouvez facilement mettre en ligne et sélectionner des fichiers multimédias sur les pages de produits, plutôt que de coder en dur des ressources dans un thème. Toutes les images enregistrées dans la section Paramètres/Fichiers sont immédiatement disponibles.

Par exemple, si un marchand souhaite proposer une garantie ou un guide des tailles en téléchargement sur une page de produit, le sélecteur de fichiers permet de sélectionner très simplement ce fichier depuis l’interface et de l’insérer à l’endroit où le champ méta du fichier est placé dans le thème.

API Files

Les développeurs auront également accès au contenu du dossier Paramètres/Fichiers via la nouvelle API Files. Cette API GraphQL permet aux applications de mettre en ligne ou de sélectionner du contenu multimédia existant depuis Paramètres/Fichiers. Les applications ont désormais accès à cette partie de l’interface administrateur, et peuvent notamment insérer du contenu multimédia dans les champs méta.

Cela permet aux applications d'utiliser cet espace pour des fichiers et des images qui ne sont pas directement associées à un produit, par exemple des images utilisées dans les thèmes. Pour en savoir plus sur l’API Files, consultez notre documentation.

3. Améliorations de l’éditeur de thèmes

Nous avons également apporté des changements importants à l’éditeur de thème, car nous voulons que les marchands puissent profiter au mieux de ces améliorations et mises à jour, et que les développeurs puissent facilement s’y repérer.

L’éditeur propose maintenant un plan de tout le contenu d’une page dans la barre latérale, afin d’éviter aux utilisateurs d’avoir à accéder à chaque section. Depuis cette barre latérale, les marchands peuvent masquer la plupart des blocs, à l’exception de l’en-tête et du pied de page (qui peuvent contenir des blocs pouvant être déplacés ou masqués, mais ne peuvent pas être masqués eux-mêmes). Ils peuvent ainsi facilement modifier l’organisation hiérarchique d'une page.

 

 

Paramètre d’entrée Liquid

Nous avons aussi ajouté un nouveau paramètre d'entrée Liquid qui permettra aux marchands d’ajouter du code Liquid personnalisé aux pages directement depuis l’éditeur. Ce paramètre est semblable au type de paramètre HTML, mais il permet l’accès aux variables Liquid. Cela signifie que les marchands pourront accéder aux objets Liquid globaux ou spécifiques à un template.

Grâce à ce paramètre, les marchands auront moins besoin de modifier manuellement le code d’un thème, en particulier lors de l’ajout de code pour des applications qui utilisent Liquid. Reportez-vous à notre documentation pour les développeurs pour savoir comment ajouter ce paramètre à une section ou à un bloc, ou consultez la section custom-liquid de Dawn pour voir un exemple d’implémentation de ce paramètre.

Ces changements permettent aux marchands d'utiliser plus facilement les nouvelles fonctionnalités d’Online Store 2.0 et de prendre des décisions pour leur boutique en ligne sans faire appel à un développeur. Le temps ainsi libéré vous permet de vous consacrer à la création d’intégrations et de solutions innovantes.

4. Nouveaux outils pour les développeurs

Avec Online Store 2.0, les développeurs peuvent créer des applications et des thèmes pour les marchands Shopify d’une façon inédite. Pour accompagner ce changement, nous lançons aussi un ensemble de nouveaux outils pour les développeurs qui s’intègrent parfaitement à Shopify et facilitent le développement, le test et le déploiement de vos thèmes.

Avec l’intégration GitHub, le nouvel outil Shopify CLI et Theme Check, vous bénéficierez d'une expérience améliorée du développement de thèmes. Vous pourrez profiter du contrôle des versions, d’un meilleur environnement de test pour développer des thèmes en local et d’un linter en temps réel réglé pour les thèmes Shopify.

Voyons plus en détail les avantages de chacun de ces outils.

Intégration GitHub pour Shopify

Nous avons dorénavant une nouvelle intégration avec GitHub qui facilite le suivi et la gestion lors du développement et de la maintenance de thèmes. Lorsque vous connectez votre compte utilisateur ou organisation GitHub à une boutique en ligne, les changements sont transmis vers et depuis un dépôt GitHub, qui est ainsi toujours synchronisé avec les thèmes sélectionnés.

L’intégration GitHub avec les thèmes vous permet de travailler en toute sécurité sur des thèmes avec d’autres développeurs, grâce à la prise en charge native du contrôle des versions. Lorsque vous travaillez sur la boutique d'un marchand, vous pouvez mettre en place des flux de travail imposant la vérification et la fusion des changements sur GitHub avant de les appliquer à un thème utilisé.

Si vous utilisez l’outil CI pour effectuer le linting, les tests et les transformations de fichiers avant le déploiement sur une boutique en ligne (comme l’exécution de Theme Check ou la compilation SCSS vers CSS), l’intégration GitHub peut être utilisée conjointement avec des sous-arborescences Git pour synchroniser les fichiers prêts pour la production. Pour en savoir plus, consultez notre documentation.

Shopify CLI

Nous avons également apporté d’importants changements à l’outil existant Shopify CLI. Les développeurs d’applications utilisaient déjà cette interface de ligne de commande pour générer rapidement des applications et extensions d’applications Node.js et Ruby on Rails, mais nous avons élargi le champ d’application de cet outil aux thèmes.

L'outil Shopify CLI accélère le développement de thèmes, car il vous permet de :

• Développer, prévisualiser et tester en toute sécurité dans des thèmes de développement les changements apportés aux thèmes
• Recharger à chaud les changements des sections CSS et Liquid pendant que vous travaillez grâce à un nouveau serveur de développement
• Commencer un nouveau projet en vous basant sur notre nouveau thème Dawn
• Pousser et publier les thèmes depuis la ligne de commande
• Exécuter Theme Check sur votre thème
• Renseigner les données de test pour votre thème, y compris les produits, clients et commandes préliminaires

Thèmes de développement

Les thèmes de développement sont des thèmes temporaires, masqués, qui sont connectés à la boutique Shopify que vous utilisez lors de votre travail de développement. Lorsque vous appelez shopify theme serve, Shopify CLI crée automatiquement un thème de développement dans la boutique sur laquelle vous travaillez, qu'il réutilisera à chaque fois que shopify theme serve sera exécuté. Vous n’avez pas à vous inquiéter que d’autres puissent voir ou modifier ce thème, puisque les thèmes de développement ne sont pas visibles sur la page admin/themes.

Les thèmes de développement ne sont pas comptabilisés dans votre limite et sont supprimés de la boutique après sept jours d’inactivité. Ils sont également supprimés lorsque vous exécutez shopify-logout : si vous avez besoin d’un lien d’aperçu qui ne soit pas supprimé à la déconnexion, vous devez publier votre thème sur la boutique.

Les thèmes de développement peuvent être utilisés pour voir en temps réel les changements apportés à un thème que vous développez en local, ainsi que pour interagir avec le thème et le personnaliser à l’aide de l’éditeur de thème.

Ces outils sont conçus pour faciliter le processus de développement et vous permettre de profiter rapidement d’Online Store 2.0.

Theme Check

Theme Check est un serveur de langages pour Liquid et JSON qui vérifie qu'il n’y a pas d’erreurs dans les thèmes et qui conseille les bonnes pratiques pour les thèmes Shopify et Liquid. Cet outil, qui peut être intégré à des éditeurs de texte tels que Visual Studio Code, identifie plusieurs types de problèmes dans le code de votre thème, dont les erreurs de syntaxe Liquid, les templates manquants ou les problèmes de performances.

Pour vous aider à corriger rapidement les problèmes liés aux thèmes, les messages d’erreur incluent un lien vers la documentation des vérifications ayant échoué. Theme Check est fourni avec l’outil Shopify CLI, vous n’avez donc pas à l’installer séparément. Consultez notre documentation pour les développeurs pour savoir comment installer et utiliser Theme Check pour tester vos thèmes.

Voici une vidéo du nouvel éditeur de code en action.

5. Nouveau thème de référence

Pour accompagner le lancement d’Online Store 2.0, nous proposons un tout nouveau thème par défaut qui réunit toutes les fonctionnalités que nous vous avons présentées ci-dessus. Nous l’appelons Dawn.

Premier thème de référence open source de Shopify, Dawn offre la flexibilité d’Online Store 2.0 et une vitesse inégalée. Plutôt que de s’appuyer sur les polyfills et les bibliothèques externes, il intègre le balisage sémantique en HTML et CSS pour créer de superbes expériences sur tous les navigateurs. Il est conçu pour offrir une flexibilité maximale avec un minimum de complexité, ce qui implique de trouver le juste équilibre entre notre vision du thème et l’espace laissé aux marchands pour faire les changements qu'ils estiment nécessaires pour leur activité.

Nous avons placé la vitesse au cœur de nos priorités lors de la conception de Dawn. Ainsi, quelles que soient les circonstances, Dawn se charge 35 % plus rapidement que Debut, le thème actuellement utilisé par plus de la moitié des marchands.

Puisque Dawn a déjà des templates JSON pour toutes ses pages, vous pouvez l’utiliser comme un modèle lorsque vous débloquez des sections pour vos propres thèmes. À terme, il remplacera Debut et deviendra le nouveau thème par défaut pour toutes les nouvelles boutiques.

Découvrez comment nous avons créé Dawn dans notre article sur le blog Shopify UX.

Une utilisation minimale de JavaScript

Incontestablement, l’un des axes de recherche que nous avons le plus poussés avec Dawn est notre approche JavaScript-only-as-needed (JavaScript uniquement si nécessaire). Cette approche reflète notre volonté de donner la priorité à la vitesse, en offrant des bases solides pour permettre aux boutiques des marchands de se charger rapidement.

Nous voulions utiliser JavaScript aussi peu que possible sans compromettre la qualité de l’expérience utilisateur pour les marchands et les acheteurs. Dans certains cas, JavaScript est indispensable, même si ce n’est pas la meilleure option en termes de performances. Mais lorsque c’était possible, nous nous sommes appuyés sur des fonctionnalités natives des navigateurs plutôt que sur des polyfills et bibliothèques JavaScript.

Nous encourageons les développeurs à exploiter au maximum les fonctionnalités natives des navigateurs pour afficher les contenus HTML et CSS.

6. Réouverture de la boutique des thèmes de Shopify

Nous sommes ravis d’annoncer que, parallèlement aux améliorations apportées par Online Store 2.0, nous allons également rouvrir la boutique des thèmes de Shopify le 15 juillet 2021. À cette date, vous pourrez envoyer vos nouveaux thèmes pour validation et les thèmes approuvés seront publiés.

Autre bonne nouvelle : en septembre, nous annulerons la part des revenus que nous prélevons sur vos revenus annuels allant jusqu'à un million de dollars US sur la boutique des thèmes de Shopify. Si vous gagnez moins d’un million de dollars US, vous ne paierez aucune commission. Le plafond est réinitialisé chaque année. Vous paierez une commission de 15 % sur vos revenus supérieurs à un million de dollars US.

Des frais uniques de soumission de 99 dollars US par compte s’appliqueront pour envoyer des thèmes sur la boutique des thèmes de Shopify, plus des frais de traitement de 2,9 % sur toutes les transactions. Nous vous communiquerons bientôt plus d’informations à ce sujet.

Plus de 1,7 million de marchands utilisent Shopify pour gérer leur entreprise : c’est le bon moment pour créer des thèmes pour ces entrepreneurs du monde entier. La boutique des thèmes de Shopify est fermée depuis 2018. Sa réouverture constitue donc une véritable opportunité d’être parmi les premiers développeurs à proposer des thèmes et à devenir une référence dans le domaine.

Découvrez les consignes mises à jour pour l’envoi de thèmes sur la boutique des thèmes de Shopify. Si ce n’est pas encore fait, créez ci-dessous votre compte partenaire Shopify, et commencez à imaginer votre premier thème.

7. Mises à jour de vos thèmes et applications

Pour profiter pleinement de ces améliorations, vous devez mettre à jour vos thèmes et applications pour qu'ils soient conformes aux normes d’Online Store 2.0 dès que possible. Le plus tôt sera le mieux, car les marchands attendent des produits flexibles que seul Online Store 2.0 permet.

D’ici la fin de l’année, tous les thèmes de la boutique des thèmes de Shopify et toutes les applications de l’App Store de Shopify devront utiliser la nouvelle infrastructure.

Découvrez comment migrer vos thèmes vers Online Store 2.0 et créer des extensions d’applications pour les thèmes pour assurer la compatibilité de vos applications avec les thèmes Online Store 2.0.

Documentation mise à jour

Pour vous aider à mettre à jour vos thèmes et vos applications, nous avons remanié la documentation pour les développeurs relative à la boutique en ligne. Elle inclut désormais :

• Des tutoriels sur les différents flux de travail et processus pour le développement de thèmes
• Des bonnes pratiques pour les composants essentiels au commerce et pour le web sémantique
• Des explications sur l’intégration à la nouvelle architecture de boutique en ligne, notamment pour faire fonctionner votre application avec les anciens thèmes

Consultez notre nouvelle documentation pour apprendre à mettre à jour vos thèmes et applications. Pour ne rien rater des changements techniques chez Shopify, abonnez-vous à notre newsletter mensuelle présentant les nouveautés Shopify pour les développeurs.

Créer l’avenir du commerce

Online Store 2.0 est une refonte complète de la façon dont les thèmes sont créés chez Shopify. Avec les sections sur chaque page, les blocs d'applications, le stockage flexible des données et les puissants outils pour les développeurs, la création d'un thème sur Shopify est plus facile que jamais. Toutes ces fonctionnalités offrent aux développeurs d’applications de nouvelles opportunités de créer des intégrations pour les marchands et de faire connaître leurs solutions directement dans la boutique en ligne.

Mettez à jour vos thèmes et créez des extensions de vos applications pour les thèmes afin de profiter au maximum de ces nouveautés. Continuez à créer des solutions pour les marchands du monde entier.

---

Publié par Maud Leuenberger. Maud est la rédactrice en chef du blog français de Shopify.

Texte original par Amelia Garvey. Traduction par Solenn Marchand.