Tout ce que vous devez savoir sur Shopify 2.0 (et quoi faire)

Si vous êtes un propriétaire d'entreprise ou un commerçant qui envisage d'utiliser Shopify pour créer votre boutique de commerce électronique, vous voudrez porter une attention particulière à cet article.

Nous sommes sur le point de vous parler de Shopify 2.0, y compris les nouveautés, pourquoi c'est bon et ce que vous devez faire pour profiter de la mise à jour.

Donc, que vous débutiez et que vous fassiez vos recherches ou que vous soyez déjà un utilisateur de Shopify envisageant une mise à niveau, lisez la suite pour tout ce que vous devez savoir.

Ce qui est couvert dans ce post :

• Un bref aperçu de la boutique Shopify
• Qu'est-ce que Shopify 2.0 et quelles sont les nouvelles fonctionnalités ?
• Quelle est la nouvelle architecture thématique ?
• Que doivent savoir les développeurs ?
• Comment configurer votre boutique sur Shopify 2.0
• Que faire si votre boutique a été créée sur Shopify 1.0 ?
• Devez-vous mettre à niveau votre boutique Shopify vers la version 2.0 ?

1. Un bref aperçu de la boutique Shopify

Source : Présentation de la boutique en ligne 2.0 : ce que cela signifie pour les développeurs

Si vous êtes ici, vous avez déjà un magasin Shopify ou vous envisagez d'en obtenir un. Et si c'est ce dernier cas, vous vous demandez peut-être si une boutique en ligne Shopify est la bonne plateforme pour vous.

Si tel est le cas, vous pourriez être intéressé de lire notre article, "Shopify vs WooCommerce - Quel est le meilleur pour vous".

Il y avait 457 millions d'acheteurs sur Shopify en 2020, contre 218 millions en 2018 (Source : Shopify).

Chez Exposure Ninja, nous adorons travailler avec Shopify. C'est la solution idéale pour vous si vous êtes une entreprise de commerce électronique à la recherche d'une boutique en ligne facile à utiliser avec une assistance étendue.

Ses excellentes fonctionnalités vous permettent de suivre les ventes, de créer des rapports sur les revenus et de générer des bons de commande.

La boutique Shopify d'origine était dotée de 70 thèmes personnalisés plug-and-play, ce qui permet à quiconque de configurer facilement sa boutique en ligne en 15 minutes seulement.

L'édition de thèmes et la création de pages personnalisées n'ont pas toujours été simples, mais la boutique en ligne Shopify 2.0 espère changer cela. Les marchands Shopify peuvent désormais s'attendre à une boutique en ligne beaucoup plus flexible avec un éditeur de thème et des extensions d'application thématique incluses.

2. Qu'est-ce que Shopify 2.0 et quelles sont les nouvelles fonctionnalités ?

La boutique en ligne Shopify 2.0 est une mise à jour majeure de la plateforme de boutique en ligne de Shopify.

Sorti en juin 2021, le magasin en ligne mis à jour 2.0 a vu un changement significatif pour Shopify dans un espace plus personnalisable et que de nombreux développeurs pourraient accueillir.

Avec un œil sur l'expérience utilisateur, Shopify n'a pas oublié ses nombreux utilisateurs qui utilisent la plateforme, grâce à sa facilité d'utilisation. Les changements, nous assurent-ils, sont « plus faciles et plus souples ».

Alors, quelles sont les nouvelles fonctionnalités clés ?

• Les "sections" sont désormais disponibles sur toutes les pages, et pas seulement sur la page d'accueil
• Ils ont introduit des extensions d'applications thématiques
• Les blocs d'application sont désormais disponibles via l'interface de l'éditeur de thème
• Ajouter des éléments à vos extensions d'application thématique
• Améliorations des champs méta
• Le sélecteur de fichiers prend en charge les fichiers image
• Une nouvelle API de fichiers
• Améliorations de l'éditeur de thème
• Réglage de l'entrée de liquide.

La mise à jour inclut un nouveau thème de référence appelé « Dawn » qui est 35 % plus rapide que le thème par défaut précédent, Debut. La boutique en ligne Shopify 2.0 est également ouverte aux soumissions de thèmes par les développeurs et propose des options de personnalisation et une prise en charge améliorées.

Si vous parcourez la liste des nouvelles fonctionnalités et que vous vous demandez ce que cela signifie, restez avec nous. Nous vous guiderons à travers tout ce que vous devez savoir sur la boutique en ligne 2.0.

N'engagez pas une agence de conception Web avant d'avoir lu cet eBook

Télécharger cet eBook

3. Qu'est-ce que la nouvelle architecture thématique ?

L'architecture du thème peut ressembler à du jargon, mais en termes simples, elle fait référence à la façon dont l'éditeur est structuré.

La boutique en ligne Shopify 2.0 a un éditeur de thème mis à jour, ce qui est une bonne nouvelle pour deux raisons :

1. Il est plus facile pour les non-développeurs de personnaliser toutes les pages
2. Il est plus facile pour les développeurs de créer des thèmes personnalisés et de créer des intégrations.

Sept nouvelles fonctionnalités ont été ajoutées à la boutique en ligne 2.0. Ici, nous allons examiner chacun d'eux un peu plus en détail.

Les modèles de page ont maintenant des sections

Les sections sont les composants visuels d'une page de votre site Web, par exemple, une bannière, un bloc d'image avec du texte ou un bouton.

Dans la version précédente de Shopify, seule la page d'accueil vous permettait d'ajouter de nouvelles sections et de glisser-déposer là où vous le vouliez sur votre page.

Il était possible de personnaliser vos sections sur d'autres pages, mais pas sans l'aide d'un développeur.

Désormais, les marchands peuvent personnaliser n'importe quelle page de leur site, y compris les pages de produits, afin que leur boutique en ligne soit entièrement personnalisée pour leur entreprise.

Comment travaillent-ils?

• Chaque page peut désormais être rendue à l'aide de fichiers de modèle JSON
• Vous pouvez configurer plusieurs fichiers modèles qui correspondent à différents produits
• Les marchands peuvent avoir différentes pages de produits, pages de collection et autres pages dans le même magasin
• Les marchands peuvent définir les rubriques et l'ordre dans lequel les rubriques doivent apparaître par défaut lors de l'installation du thème
• Des sections dynamiques peuvent maintenant être ajoutées à la page d'accueil.

Extensions d'application thématique avec blocs d'application

Dans l'ancienne boutique en ligne Shopify, il n'y avait aucun moyen pour les applications de s'intégrer à l'éditeur de thème. Un commerçant aurait eu besoin d'employer un développeur pour coder l'intégration avec les thèmes existants. Cela pourrait entraîner des ruptures dans le code du thème, rendant difficile la réalisation d'intégrations entre les thèmes.

Avec la boutique en ligne 2.0, une extension d'application thématique permet aux développeurs d'ajouter des fonctionnalités et des extensions. Grâce à cela, vous pouvez désormais ajouter des fonctionnalités supplémentaires à vos boutiques Shopify.

Modularité de l'application intégrée

Les blocs d'application permettent aux développeurs de créer des composants à ajouter à un éditeur de thème sans coder l'intégration.

Qu'est-ce que cela signifie pour vous en tant que commerçant ? En termes simples, si vous souhaitez modifier votre thème mais emportez une application intégrale avec vous, cela est beaucoup plus facile et signifie qu'un développeur n'aura pas besoin de reconstruire l'intégralité de l'intégration. Cela facilite également la suppression d'une application, tout le code fantôme étant supprimé lors d'une désinstallation.

Modifications des champs méta

Un champ méta est l'espace qui vous permet d'ajouter des données d'information sur un actif particulier au sein de votre site Web. Il peut s'agir d'une image, d'une liste, d'un graphique ou d'un fichier téléchargeable.

Ce nouvel éditeur de thème vous permet d'ajouter des champs méta et des propriétés sans utiliser d'API ni de code. Cela n'est pas possible avec les fonctionnalités précédentes des outils d'édition natifs de Shopify.

Les métachamps ont été entièrement retravaillés pour être plus flexibles et intuitifs. Désormais, vous pouvez créer des champs personnalisés pour répondre à vos besoins en quelques minutes avec le système de type avancé de la boutique en ligne 2.0. Des champs méta standard ont été introduits afin que chaque thème fonctionne immédiatement dans les magasins de différents marchés verticaux - pas besoin de codage supplémentaire ou d'installation de plug-in.

Sélecteur de fichiers

Le sélecteur de fichier metafield facilite le téléchargement et la sélection de médias sur les pages de produits. Toutes vos images enregistrées dans la section Paramètres/Fichiers sont immédiatement disponibles pour une utilisation avec cette nouvelle fonctionnalité.

Les métachamps fonctionnent avec de nombreuses sources multimédias, telles que des images ou des fichiers PDF.

Par exemple, plutôt que de coder pour des types de fichiers particuliers dans la zone de contenu du générateur de pages de chaque thème, les champs méta vous permettent de télécharger l'élément sélectionné depuis votre téléphone et de le faire apparaître immédiatement sur les pages de produits - pas besoin de revenir dans les paramètres.

API de fichier

La mise à jour 2.0 de la boutique en ligne de l'API File offre aux commerçants de nouvelles fonctionnalités et une interface simplifiée pour le téléchargement de fichiers.

Avec cette version, les développeurs peuvent créer, choisir et télécharger des médias dans leurs boutiques Shopify via une console GraphQL facile à utiliser dans le panneau d'administration de Shopify.

De plus, l'API permet désormais l'accès à partir de plusieurs applications pour utiliser l'espace pour les fichiers qui ne sont pas directement liés à un produit particulier.

Paramètres d'entrée de liquide

Les paramètres d'entrée Liquid permettent aux marchands d'ajouter du code Liquid personnalisé aux pages directement depuis l'éditeur avec un nouveau paramètre similaire à celui HTML. Cela signifie que vous aurez accès aux variables globales et aux objets spécifiques au modèle, réduisant ainsi le besoin de modifier manuellement le code du thème.

Ce code Liquid personnalisé permet aux marchands Shopify de travailler plus facilement avec la nouvelle boutique en ligne 2.0 sans interférer avec le code de votre thème ni impliquer trop fortement les développeurs d'applications.

Accédez au sommet de Google gratuitement

Téléchargez une copie gratuite de notre best-seller,

" Comment arriver au sommet de Google "

Télécharger ma copie gratuite

4. Que doivent savoir les développeurs ?

Si vous êtes un marchand et que vous cherchez uniquement à connaître les raisons fondamentales pour lesquelles vous devriez passer à Shopify 2.0, l'éditeur de thème mis à jour devrait être une raison suffisante.

Mais Shopify a inclus de nouveaux outils de développement dans le cadre de la boutique en ligne remaniée. Nous allons les passer brièvement en revue ici.

Intégration GitHub

L'intégration Shopify GitHub permet aux développeurs de se connecter facilement à leur compte utilisateur GitHub en quelques clics.

L'intégration entre les thèmes et GitHub permettra aux développeurs de travailler plus efficacement lors des modifications. Les développeurs peuvent désormais mettre en œuvre un flux de travail là où ils ont besoin d'une approbation avant de remplir les sites en direct avec leurs mises à jour. Cela fonctionne désormais sur une seule plate-forme, ce qui permet de gagner du temps lors du remplissage d'un thème en direct.

Outil CLI Shopify

Auparavant, les développeurs utilisaient peut-être CLI pour générer des applications Node.js, Ruby on Rails et des extensions d'application. La boutique en ligne Shopify 2.0 leur permet d'utiliser la CLI pour mettre à jour les thèmes de développement.

Les thèmes de développement sont masqués dans la partie Shopify Admin de la boutique, ce qui permet aux développeurs de travailler dessus. Ces thèmes de développement ne comptent pas dans votre limite de thèmes, mais Shopify les supprime automatiquement s'ils constatent une inactivité sur les thèmes de développement après sept jours.

Le nouvel outil CLI vous donnera, à vous ou à votre développeur, le contrôle du développement du thème, de l'édition des thèmes et de l'apparence de votre nouveau thème. Dans votre nouveau projet de thème, vous pourrez voir toutes les modifications en direct, interagir avec et les personnaliser à l'aide de l'éditeur.

Vérification du thème

Parmi les nouveaux outils de développement figure le Theme Check, un serveur de langage qui s'intègre à un éditeur de texte pour identifier les problèmes dans le code pour un développement efficace de nouveaux thèmes.

Il est fourni avec l'outil Shopify CLI, donc un développeur doit les installer ensemble. Il a été conçu avec soin, avec des messages d'erreur comprenant un lien vers la documentation de la vérification qui a échoué.

Aube

Source : Présentation de la boutique en ligne 2.0 : ce que cela signifie pour les développeurs

Dawn est le nouveau thème de référence livré en standard avec la nouvelle boutique en ligne Shopify 2.0. Le thème par défaut précédent était Debut, et Dawn est nettement plus rapide, plus flexible et plus rationalisé que son prédécesseur, ce qui rend le processus de développement beaucoup plus fluide.

Dawn a déjà des modèles JSON pour toutes ses pages, il peut donc être utilisé comme modèle lors du déverrouillage de sections dans un nouveau thème.

Sa vitesse est due à sa construction avec un minimum de Javascript. Shopify encourage donc les développeurs à tirer parti des fonctionnalités natives du navigateur pour rendre les mises en page HTML et CSS.

5. Comment configurer votre boutique sur Shopify 2.0

La configuration d'une boutique sur Shopify 2.0 est identique à la version précédente de Shopify. C'est simple et rapide à faire, mais avant de commencer, vous devriez avoir pensé à ce qui suit :

• Quel est le nom de votre entreprise? On vous demandera tout de suite le nom de votre magasin, et il est impossible de le changer, alors assurez-vous de choisir avec soin. Vous pourrez cependant changer cela pour un domaine choisi plus tard.
• Couleurs de la marque, polices et logo. Vous sélectionnerez un thème dans la boutique de thèmes Shopify, mais vous souhaiterez probablement remplacer certains composants de thème par votre image de marque.
• Images et descriptions des produits que vous souhaitez vendre, y compris les UPC, les variantes, les détails d'expédition et, bien sûr, les prix.
• Comment vous souhaitez que les utilisateurs effectuent des paiements.
  • Shopify autorise la plupart des options, y compris Paypal, Visa, Mastercard, AMEX, Apple Pay, Amazon Pay et Google Pay.
• La structure du site ; quelles pages vous aimeriez inclure et la copie que vous aimeriez avoir dessus. Vous aurez besoin de le savoir lorsque vous viendrez paramétrer votre navigation et vos nouvelles pages.
• Des éléments supplémentaires tels que les métadonnées et les éléments SEO que vous souhaitez inclure dans vos pages.

Pour un guide complet sur la configuration de votre boutique Shopify d'une manière qui tient compte du référencement, écoutez notre podcast, Shopify SEO pour les débutants ou regardez la vidéo ci-dessous.

Que devez-vous faire si votre boutique a été créée sur Shopify 1.0 ?

Si vous avez déjà une boutique en ligne Shopify et que vous souhaitez passer à Shopify 2.0, trois possibilités s'offrent à vous :

Visitez la boutique de thèmes Shopify et téléchargez l'un des nouveaux thèmes Shopify.

Vérifiez si votre thème existant propose une version mise à jour à l'aide de la boutique en ligne 2.0.

Migrez vos modèles de thème actuels vers la nouvelle architecture.

1. Téléchargez un nouveau thème

1. Visitez la boutique de thèmes Shopify.
2. Filtrer par "Thème Architecture".
3. Sélectionnez "Magasin en ligne 2.0".
4. Choisissez votre thème préféré et cliquez sur "Essayer le thème".
5. Vous ne devez payer que si vous publiez le thème sur votre site Shopify.

2. Mettez à jour votre thème actuel

1. Visitez la boutique thématique Shopify et filtrez par « Boutique en ligne 2.0 » comme ci-dessus. Si votre thème est disponible pour une mise à niveau, vous devriez le voir ici.
2. Alternativement, vous devriez avoir une notification dans votre administrateur Shopify (ci-dessous où il indique votre thème).
3. Cliquez sur la notification et sur "Ajouter à la bibliothèque de thèmes".
4. Toutes les personnalisations apportées à votre thème à l'aide de l'éditeur de thème sont copiées et appliquées au thème mis à jour. Ceux-ci inclus:
5. Paramètres de thème modifiés
6. Mises en page modifiées, telles que l'ajout, la réorganisation, la suppression ou le masquage de sections ou de blocs
7. Nouveaux modèles
8. Paramètres ajoutés, supprimés ou modifiés des applications intégrées ou des extensions d'application.

3. Migrez votre modèle de thème

Il s'agit d'un long processus que nous ne recommanderions pas à moins que vous ne soyez un développeur.

1. Utilisez l'outil Shopify CLI ou l'éditeur de code. Vous devrez peut-être installer CLI.
2. Assurez-vous d'être connecté en tant que collaborateur ou en tant que « personnel » pour le compte sur lequel vous souhaitez travailler.
3. Faites une copie de votre thème.
4. Convertissez votre code de thème actuel d'un paramètre d'entrée Liquid en un modèle JSON.
5. Déplacez tout code Liquid ou HTML dans des sections à utiliser dans votre nouveau modèle JSON.
6. Vous pouvez lire le processus complet ici sur Shopify.dev.

Devez-vous mettre à niveau votre boutique Shopify vers la version 2.0 ?

La réponse courte à cette question est non .

Shopify fournit toujours de nombreux thèmes compatibles avec la version originale.

Cependant, si vous êtes un propriétaire de magasin à la recherche d'une personnalisation supplémentaire, de nouveaux modèles de page et de pages personnalisées, le passage à la version 2.0 pourrait être une bonne option pour vous.

Le dernier conseil de Shopify est que si vous prévoyez d'utiliser des applications, vous devriez essayer d'utiliser des extensions d'application pour les intégrer à votre boutique en ligne. Cela est vrai si vous soumettez une nouvelle application car elle doit utiliser des extensions de thème pour s'intégrer. Shopify prévoit d'en faire une exigence pour toutes les applications à l'avenir.

Propriétaire de l'entreprise Shopify ? Vous aimerez peut-être lire notre blog sur Comment créer une stratégie marketing Shopify gagnante.

Que lire ensuite

• Les meilleures plateformes de commerce électronique à utiliser
• Shopify vs WooCommerce – Quel est le meilleur pour vous ?
• Comment créer une stratégie marketing Shopify gagnante
• Un guide PPC pour les magasins de commerce électronique Shopify
• 11 choses que vous devez savoir avant de choisir une agence de conception Web
• 6 façons d'augmenter les ventes de votre boutique de commerce électronique