Qu’est-ce qu’un thème Shopify?
Fondamentalement, un thème Shopify a pour but de façonner l’expérience utilisateur de votre boutique en ligne. Il détermine l’aspect, la convivialité et le fonctionnement de votre boutique.
Sans thème, vous n’auriez pas de boutique en ligne.
En effet, Shopify est une plateforme e-commerce complète que l’on peut scinder en 2 parties :
- Le backend, qui est en quelque sorte le moteur de commerce dans lequel vous gérez les données commerciales (telles que les produits, les collections et les clients) et les fonctionnalités commerciales (telles que le panier, le pricing et les paiements).
- Le frontend, qui est la vitrine en ligne avec laquelle les clients interagissent. Il utilise les données du backend et se base sur un thème pour personnaliser l’expérience utilisateur.
Ok, très bien, un thème permet de modifier l’apparence d’une boutique mais concrètement, qu’est ce qu’un thème Shopify?
Et bien, si vous allez dans “thèmes” depuis l’interface d’administration de Shopify, puis “modifier le code” en cliquant sur “actions” pour votre thème actuel, vous allez tomber sur un ensemble de dossiers et de fichiers qui composent le thème et définissent le rendu et les fonctionnalités disponibles.
Shopify impose une nomenclature de dossiers qui est la même pour tous les thèmes, seuls les fichiers à l’intérieur des dossiers seront plus ou moins différents et déterminent l’apparence et les fonctionnalités du thème. Nous reviendrons plus en détail sur l’architecture d’un thème dans un prochain article.
Pour le moment, attardons nous un petit peu sur le fonctionnement d’un thème. Pour modifier la façon dont votre boutique est affichée, il se base sur 2 types de données :
- Les données de votre boutique, qui sont enregistrées dans l’administration Shopify telles que les produits, collections, etc…
- Les données du thème, c’est-à-dire toutes les configurations et personnalisations qui sont réalisées au sein même du thème, comme par exemple des options de style spécifiques, les couleurs, polices, des sélections d’images ou de menus particuliers, etc…
Il faut savoir que modifier le code ou les données de votre thème n’affecte en aucun cas les données de votre boutique. À l’inverse, la mise à jour, la création ou la suppression de données de votre boutique peut affecter le thème, et notamment les données du thème qui ne sont alors plus cohérentes. Par exemple, si vous définissez l’affichage d’un menu particulier dans votre thème et qu’ensuite vous supprimez ce menu dans l’administration de votre boutique, votre thème essaiera d’y accéder alors qu’il n’existe plus. Il n’y aura pas d’erreurs mais il n’affichera rien.
Maintenant, la meilleure façon de voir ce qu’un thème fait et ne fait pas est de passer d’un thème à l’autre sur une même boutique. Vous verrez que le contenu et les menus sont en grande partie les mêmes, mais que la présentation est très différente. Et bien, c’est ce que propose le thème, c’est la façon dont Shopify vous permet de personnaliser votre boutique.
Où trouver un thème Shopify?
Voyons maintenant où vous pouvez trouver des thèmes Shopify. Le premier endroit est la boutique de thèmes Shopify. Elle propose plus de 80 thèmes différents, certains étant gratuits ce qui est pratique pour démarrer et d’autres payants proposant nécessairement davantage de fonctionnalités et de flexibilité que les thèmes gratuits.
Je vous laisse y jeter un œil. Si un thème vous intéresse, vous pouvez voir chacun des styles disponibles, les fonctionnalités proposées et mises en avant, les avis et commentaires laissés par les utilisateurs mais surtout vous pouvez voir une boutique de démonstration et encore mieux vous pouvez essayer le thème sur votre boutique.
En effet, les thèmes payants doivent être achetés avant de pouvoir être publiés mais vous pouvez toujours l’essayer avant de l’acheter. Le thème sera ajouté à votre boutique, vous pourrez ainsi voir tous les paramètres et fonctionnalités proposés par celui-ci.
Autre avantage de la marketplace de thèmes Shopify, c’est que tous les thèmes proposés ont été soigneusement évalués en termes de qualité, de performance et de fonctionnalité avant d’être répertoriés.
Autre possibilité, Shopify offre la possibilité d’importer un thème depuis un fichier compressé zip. Il existe donc d’autres plateformes sur lesquelles vous pouvez acheter des thèmes Shopify, télécharger le fichier compressé et l’installer sur votre boutique. On peut notamment penser à ThemeForest ou encore à mon éditeur de thème préféré Out Of The Sandbox.
On peut également être un peu chauvin et parler de quelques thèmes très connus développés par des français, dont notamment le thème Speedfly de l’agence Speed Ecom, le thème Fastlane d’Ulrich Vallée ou encore le thème FullStack de Thomas Giraud. Ces thèmes ont tous leurs qualités et leurs défauts mais je vous laisse vous faire votre propre avis car je ne les ai jamais personnellement utilisés.
Enfin, dernière possibilité, vous pouvez développer ou faire développer un thème personnalisé qui sera parfaitement adapté à vos besoins graphiques et fonctionnels. Cette solution n’est pas pour tout le monde de par son coût mais elle est intéressante si vous avez une boutique e-commerce déjà bien établie.
En effet, ce thème sera unique et très léger car, contrairement aux thèmes de la marketplace Shopify qui doivent être très flexibles et personnalisables pour satisfaire un maximum d’e-commerçants, celui-ci sera construit spécifiquement pour votre marque. Il n’incluera donc que les fonctionnalités demandées, ce qui rend la base de code plus simple et efficace.
Personnellement, je ne recommanderais le développement d’un thème personnalisé que si vous avez déjà une marque établie et un budget de départ de plusieurs milliers d’euros au minimum.
Comment choisir un thème Shopify?
Maintenant qu’on a vu la quantité de thèmes Shopify disponibles, on va s’attarder sur comment choisir le thème le plus adapté selon ses besoins.
Tout d’abord, le critère probablement le plus important est votre budget. Si vous démarrez ou si vous souhaitez valider un concept ou un produit, vous ne voulez certainement pas investir plusieurs centaines d’euros dans un thème et vous avez raison. Ce n’est pas la priorité, vous pouvez très bien démarrer avec un thème gratuit et améliorer votre boutique en passant sur un thème payant une fois votre concept éprouvé.
Parmi les thèmes gratuits les plus intéressants, citons le thème Début, Brooklyn ou encore Venture et surtout le nouveau thème Dawn que j’ai utilisé dans mon tutoriel complet de création de boutique Shopify.
Ensuite, le second critère si vous décidez d’investir dans un thème premium notamment, sera le design et les fonctionnalités disponibles. En effet, faire un choix parmi les 9 thèmes gratuits est assez simple, par contre choisir un thème premium avec des tarifs allant du simple au double, de 180 à 350 dollars sur la boutique de thèmes Shopify par exemple, est beaucoup plus compliqué.
L’objectif est de sélectionner le thème qui répondra au maximum à vos attentes. D’un point de vue design, vous pouvez filtrer les thèmes en fonction de votre niche. En effet, il vaut mieux choisir un thème adapté ou qui se rapproche à votre secteur d’activité plutôt qu’un thème générique ou à l’opposé.
Ensuite, au niveau des fonctionnalités, à vous de voir celles dont vous allez absolument avoir besoin, que ce soit pour la page d’accueil, la page produit ou dans le header et footer. Pour chacun des thèmes qui vous plaisent, je vous conseille de regarder le détail des fonctionnalités disponibles et de parcourir le site de démonstration sur PC et mobile comme si vous étiez un client, et je dirais même plus, comme si vous étiez un de vos clients.
Parce que c’est un des problèmes majeurs quand on cherche à sélectionner un thème, on se laisse aveugler par toujours plus de fonctionnalités mais ce n’est pas en accumulant les fonctionnalités que vous allez améliorer la conversion de votre boutique. Bien au contraire, focalisez vous avant tout sur l’expérience utilisateur et le parcours client pour choisir un thème Shopify.
Enfin, pensez également à sélectionner un thème adapté à la taille de votre catalogue produits, certains thèmes sont plus adaptés à du mono produit, à une petite collection de produits ou au contraire à un grand catalogue.
Au final, il est important de passer un peu de temps pour sélectionner le thème Shopify qui correspond le plus à votre marque e-commerce. Car, même s’il est toujours possible de faire appel à un développeur pour le modifier ou installer une application pour ajouter une fonctionnalité manquante, cela vous coûtera de l’argent et aura un impact sur les performances de votre boutique.
Ceci étant dit, au niveau des thèmes Shopify, j’ai mon petit chouchou. Je ne peux pas être 100% objectif, tout simplement parce que je n’ai pas essayé tous les thèmes premium disponibles, mais je dois dire qu’après l’avoir utilisé sur plusieurs boutiques dans différentes niches, je pense qu’il est le thème le plus performant et le plus versatile du marché.
Il s’agit du thème Turbo de Out Of The Sandbox. Outre sa vitesse et ses performances, Turbo est livré avec 6 styles de thèmes professionnels qui pourront vous inspirer si vous n’avez pas encore travaillé sur votre branding.
Et surtout Turbo est doté de fonctionnalités très intéressantes pour l’expérience utilisateur, comme un mini-panier interactif, un chargement progressif des produits sur la page collection au défilement ou sur requête de l’utilisateur, une recherche prédictive, des templates de pages personnalisables, ce qui était un gros point fort avant le déploiement du online store 2.0 de Shopify.
Mais bien que vous pouvez créer vos propres templates de pages maintenant, ces templates prédéfinis peuvent toujours vous faire gagner du temps ou vous inspirer dans la création de vos propres templates.
Comment personnaliser sa boutique Shopify à l’aide d’un thème ?
Vous savez désormais où et comment choisir un thème Shopify. On va maintenant voir comment personnaliser une boutique Shopify à l’aide d’un thème. Il existe en fait 3 manières, potentiellement complémentaires, de personnaliser un thème Shopify :
- La première, la plus connue et la plus utilisée est de passer par l’éditeur de thème.
- La seconde est de prendre un thème existant et de modifier son code.
- La troisième est de créer un thème personnalisé à partir de zéro.
Chaque approche a ses avantages et ses inconvénients mais elles permettent de s’adapter à tous les projets en fonction des attentes et des contraintes (délai, budget, etc.).
Personnaliser un thème en utilisant l’éditeur de thème Shopify
Pour que personnaliser sa boutique soit à la portée de toute le monde, Shopify dispose d’une fonctionnalité très puissante : l’éditeur de thème. Dans la lignée des outils nocode, l’éditeur de thème permet, sans toucher au code source, de personnaliser le contenu et l’apparence d’une boutique Shopify et de prévisualiser les modifications apportées au thème en temps réel.
Pour accéder à l’éditeur de thème dans l’administration Shopify, il suffit d’aller dans Boutique en ligne > Thèmes, trouver le thème que vous souhaitez, puis cliquez sur Personnaliser. Pour en savoir plus sur l’utilisation de l’éditeur de thème, vous pouvez vous référer à cet article où je vous montre comment créer une boutique Shopify de A à Z.
L’éditeur de thème est le moyen le plus simple et le plus rapide pour personnaliser et lancer une boutique. Si vous désirez tester un concept ou un produit dans un délai très court avec un petit budget, le combo thème existant et éditeur de thème peut être suffisant. l’utilisation de l’éditeur de thème peut déjà vous permettre d’adapter votre image de marque et configurer facilement votre boutique.
Cependant, vous serez très vite limité par les paramètres existants et les caractéristiques fonctionnelles du thème. En effet, toutes les options de personnalisation sont codées directement dans les fichiers du thème, il sera donc nécessaire de modifier le code pour ajouter des personnalisations qui n’ont pas été prévues au préalable.
Prendre un thème existant et modifier son code
Et justement, la deuxième manière de personnaliser un thème est de modifier ses fichiers sources. En effet, en modifiant le code source du thème, vous pouvez ajouter des paramètres supplémentaires pour contrôler l’apparence ou le comportement du thème, ou encore ajouter de la modularité aux templates de pages en ajoutant des sections ou blocs supplémentaires.
Pour visualiser et modifier les fichiers sources, Shopify dispose d’un éditeur de code auquel vous pouvez accéder en allant dans Boutique en ligne > Thèmes, et en cliquant sur Actions > Modifier le code. Vous avez alors accès à tous les dossiers et fichiers qui composent le thème, notamment des fichiers Liquid, Javascript, CSS ou encore JSON. Je reviendrai par la suite sur les langages utilisés dans un thème Shopify.
Quelques conseils avant d’aller plus loin :
- Pensez à dupliquer votre thème actuel avant de réaliser des modifications dans les fichiers source, vous éviterez ainsi des problèmes en cas de mauvaise manipulation, d’autant plus si votre boutique est déjà en ligne et réalise des ventes.
- Si vous devez apporter des modifications importantes au code de votre thème, vous devriez envisager d’utiliser un éditeur de code en local comme Visual Studio Code, d’autant plus que Shopify propose des outils comme Shopify CLI et Theme Check pour faciliter le processus de développement. Nous en reparlerons dans un autre article.
Cette seconde façon de personnaliser un thème est idéale si vous avez besoin d’aller plus loin dans la personnalisation de votre boutique. En partant d’un thème de qualité, bien codé et bien documenté, vous pouvez potentiellement réaliser toutes les modifications graphiques ou fonctionnelles dont vous avez besoin.
Attention, toucher au code d’un thème existant peut avoir des impacts non négligeables, des tests supplémentaires seront nécessaires pour garantir la compatibilité et le bon fonctionnement de celui-ci. De plus, certaines modifications techniques complexes ne seront pas faisables et nécessiteront des applications supplémentaires que vous pouvez trouver facilement sur l’app store Shopify.
Créer un thème personnalisé à partir de zéro
Enfin, la dernière option est de créer un thème personnalisé à partir de zéro. Cette option est intéressante si vous avez déjà une marque bien établie et une vision spécifique de votre boutique.
En effet, créer un thème à partir de zéro vous offre une totale liberté, un contrôle total sur les styles, les fonctionnalités et les templates du thème mais nécessite un budget conséquent pour le développement.
Shopify a amélioré dernièrement son environnement de développement de thème grâce à des outils comme Shopify CLI et la synchronisation avec Github. Cependant, les coûts et les efforts requis pour développer un thème de A à Z sont beaucoup plus élevés que ceux des autres options que nous avons vues juste avant.
Au final, toutes ces options sont complémentaires. L’option que vous choisirez dépendra d’où vous en êtes dans votre projet e-commerce, de votre budget, du degré de personnalisation que vous souhaitez et du délai que vous avez.
Comment développer un thème Shopify?
Voyons maintenant quelles sont les technologies utilisées et à connaître pour développer un thème Shopify. Tout d’abord, il y a les 3 langages qui entrent en jeu sur quasiment tous les sites web modernes, à savoir HTML, CSS et Javascript :
- Le HTML sert à insérer du contenu (titres, textes, images, liens…) sur une page web
- Le CSS (ou Cascading Style Sheets) sert à mettre en forme le HTML, c’est-à-dire la mise en page et le style des composants (couleurs, typographies, etc…)
- Le Javascript sert à créer des interactions et améliorer l’expérience utilisateur.
Ensuite vient le langage de template créé par Shopify, le Liquid. C’est la colonne vertébrale de tout thème Shopify, il est utilisé pour charger du contenu dynamique dans les pages. Il permet de faire le pont entre les éléments statiques écrits en HTML et les données contenues dans la boutique Shopify, comme le nom d’un produit ou les images produits.
Enfin, il est important de considérer le JSON qui est le format de données utilisé par Shopify pour stocker les données du thème, et notamment les templates de page.
Il est donc essentiel de comprendre la syntaxe et le formatage appropriés de ces langages pour éviter de casser les thèmes existants si vous apportez des modifications ou des ajustements, ou si vous voulez créer un thème à partir de zéro.
Nous verrons dans le prochain article de cette série l’architecture d’un thème Shopify et comment utiliser ces langages pour modifier un thème existant ou développer un thème from scratch.
