Nous entrons aujourd’hui dans une série de focus plus techniques, relatifs à la fonction «Themes » de votre boutique. Cette série sera la plus longue de toutes, car elle implique de très nombreuses notions.

Ce premier article va vous présenter les grandes notions à connaître, avant que nous entrions ensuite dans des connaissances plus détaillées et de plus en plus complexes (mais faciles à suivre, si vous lisez ces focus dans l’ordre !).

 

Notions générales

 

Un thème est un « habillage » que vous appliquez à votre boutique pour lui donner une apparence spécifique.

Les composantes de ce thème se déclinent dans diverses sections, comme l’en-tête, le menu de navigation, les pages produits, le pied de page, etc.

Quelques notions préliminaires sont à retenir :

  • Tout ce qui concerne les thèmes se gère à partir de la page « Online store / Themes ».
  • À partir de cette page, vous pouvez :
    • Voir les thèmes que vous avez installés
    • Visiter le « Theme store » (boutique de thèmes Shopify) :

https://themes.shopify.com/

    • Installer un nouveau thème
    • Publier et dé-publier un thème
    • Personnaliser un thème
    • Traduire un thème
    • Exporter, dupliquer et supprimer un thème installé
  • Il ne faut pas confondre un thème publié (actif dans la boutique) et un thème simplement installé (téléchargé dans l’administration de la boutique et disponible pour être publié).
  • Le thème actif est celui qui apparaît en haut de la page, sur toute sa largeur, alors que les thèmes non publiés sont rangés en colonnes, en dessous.
  • Une boutique peut avoir (en plus de son thème publié), jusqu’à 19 thèmes installés et non publiés. Si vous atteignez cette limite, seule la suppression d’un des thèmes installés peut vous permettre d’en installer un nouveau.
  • Toute publication de thème donne automatiquement le statut non publié au thème actif précédent.
  • Le contenu de la boutique (produits, collections, pages, articles, etc.) n’est pas perdu lors d’un changement de thème : ce dernier n’a d’incidence que sur l’affichage des contenus, la navigation et le design.
  • Accéder au « Theme store » se fait à partir du bouton bleu en haut à droite de la page.
  • Le « Theme store » propose un large choix de thèmes gratuits (fournis par Shopify et dont je parle plus bas) et payants (proposés par des développeurs partenaires), les thèmes payants étant globalement plus fournis en options de design et possibilités de personnalisation.

 

Choisir un thème dans le « Theme store »

 

Techniquement parlant, il est possible d’installer un thème qui ne provient pas du « Theme store » (si vous connaissez un développeur qui maîtrise parfaitement le fonctionnement du logiciel), mais je ne vous le recommande pas, car Shopify vérifie, teste et valide tous les thèmes de sa boutique et vous évite donc bien des problèmes de compatibilité (avec les fonctions natives et avec les fonctions des diverses applications disponibles).

Dans le « Theme store », vous pouvez :

  • Filtrer les thèmes, pour simplifier votre recherche (par prix, par industrie, par popularité, etc.).

Bien sûr, aucun thème n’est « réservé » à une industrie en particulier et vous pouvez tout à fait choisir un thème issu d’une catégorie « technique » pour une boutique où vous vendez des produits alimentaires. Il ne s’agit que de recommandations marketing.

  • Pour chaque thème proposé, accéder à une démo de ce thème, via un site de présentation qui vous donne un aperçu du rendu en boutique.
  • Pour les thèmes payants, accéder à un aperçu du thème dans votre propre boutique, afin de voir le rendu (fonction « Preview », que je détaille plus bas) avant tout achat. Seul un aperçu à la fois est possible.

Notez que tout achat d’un thème payant correspond à un paiement unique et immédiat, dans une facture dédiée, et cet achat n’est pas remboursable (dans la mesure où vous pouvez amplement tester chaque thème avant de l’acquérir).

Vous pouvez à tout moment accéder aux mises à jour gratuites d’un thème acheté (mais attention aux éventuelles personnalisations que vous auriez mises en place et qui pourraient être écrasées si vous ne prenez pas les précautions nécessaires en amont).

 

L’aperçu d’un thème payant

 

Avant tout achat, vous pouvez donc visualiser le rendu de ce thème dans votre propre boutique.

  • Rendez-vous dans le « Theme store », sur la page du thème qui vous intéresse (en vous assurant que vous êtes bien connecté, par ailleurs, dans l’administration de votre boutique).
  • Cliquez sur le bouton « Preview in your store » : votre page « Online store / Themes » va s’ouvrir automatiquement et le thème sélectionné va se charger.
  • Une fois que le chargement est terminé, cliquez sur « Preview in your store ».
  • Vous pouvez ensuite personnaliser ce thème en mode aperçu (« Customize theme »), pour vérifier qu’il inclut les fonctions dont vous avez besoin.
  • Pour finir, choisissez entre l’achat du thème (« Purchase this theme »), si vous êtes certain qu’il vous convient, ou l’annulation de l’aperçu (« Cancel theme preview »).

 

L’installation d’un thème

 

Lorsque vous sélectionnez un thème (payant ou gratuit) dans le « Theme store », deux méthodes vous sont proposées pour son installation dans la boutique :

  • Installer directement le thème en le téléchargeant du « Theme store » vers la boutique.
  • Télécharger le thème de la boutique vers votre ordinateur, puis l’uploader de votre ordinateur vers votre boutique (si vous voulez en conserver une copie « en dur »).

Je vous donne ci-dessous les manipulations correspondant à ces deux cas de figure.

  • Premier cas :
    • Sélectionnez le thème qui vous intéresse dans le « Theme store » (si vous êtes encore en période d’essai sur Shopify, choisissez un thème gratuit, pour éviter toute facturation immédiate).
    • Si vous avez choisi un thème gratuit, cliquez sur « Install theme ».
    • Si vous avez choisi un thème payant, cliquez sur « Approve charge ».
    • Dans le cas d’un achat, vous devez confirmer votre choix final : l’installation suivie de publication (« Publish as my store’s theme ») ou l’installation simple (« Install as an unpublished theme »).
  • Deuxième cas :
    • Assurez-vous que le thème que vous voulez installer est bien au format .zip (c’est ainsi que vous l’avez téléchargé à partir du « Theme store »).
    • En haut à gauche de votre page « Online store /Themes », cliquez sur le bouton « Upload themes ».
    • Dans la boîte de dialogue suivante, cliquez sur « Choose » et sélectionnez le fichier .zip du thème.
    • Puis cliquez sur « Upload ».

 

Les thèmes gratuits proposés par Shopify

 

Si vous débutez avec Shopify, vous avez tout intérêt à commencer par l’installation d’un thème gratuit, pour profiter pleinement de la période d’essai gratuite (l’achat d’un thème payant déclenchant une facturation automatique), mais aussi pour ne pas être débordé par trop de nouveautés et de manipulations à la fois (puisque les thèmes gratuits sont globalement moins fournis en fonctions).

Les thèmes gratuits du « Theme store », tous fournis par Shopify, sont les suivants :

  • « Boundless » : c’est un thème très visuel, construit avant tout pour la mise en avant d’images, et qui est pensé pour les boutiques particulièrement visitées par des clients sur smartphones, avec un catalogue de produits moyen à gros.
  • « Brooklyn » : c’est un thème pensé pour la vente de produits vestimentaires, qui inclut une grille de produits et une typographie moderne, qui fait la part belle aux images et qui est également pensé pour les téléphones.
  • « Debut » : c’est un thème généraliste, simple d’utilisation et facile à mettre en place sur une nouvelle boutique, pour une mise en route très rapide, quelle que soit la taille du catalogue à déployer.
  • « Jumpstart » : c’est un thème pensé principalement pour la mise en place d’une levée de fonds (de type financement participatif), mais qui peut aussi être utilisé pour un petit catalogue de dix produits maximum.
  • « Minimal » : c’est un thème très flexible, prévu pour tous les supports (dont les accès mobiles), avec de nombreuses options de personnalisation permettant de répondre à une grande variété de besoins.
  • « Narrative » : c’est un thème très visuel, dont l’objectif est de proposer une boutique selon une approche de « story telling visuel ».
  • « Pop » : c’est un thème prévu pour les catalogues de taille petite ou moyenne, avec une large barre latérale de navigation qui permet un accès rapide et facilité aux produits.
  • « Simple » : c’est un thème visuel, pensé avant tout pour les smartphones, qui met en valeur les images des produits, avec des fonctions de zoom et d’animation.
  • « Supply » : c’est un thème pensé pour les boutiques avec de grands catalogues, car il met l’accent sur les multiples collections et les fonctions de navigation complexes.
  • « Venture » : c’est un thème également adapté aux boutiques proposant beaucoup de produits, plutôt minimaliste sur le plan du design, avec une barre promotionnelle pour les mises en avant d’articles.

Un focus de cette série sera ultérieurement consacré aux fonctions principales de ces divers thèmes, pour vous aider à démarrer correctement.

 

Principes généraux concernant la personnalisation du thème publié

 

Pour terminer l’introduction à cette série d’articles, voici les grandes notions à avoir en tête à propos de la personnalisation d’un thème, une fois que vous l’avez installé et publié :

  • Tous les thèmes récents (rendus disponibles après octobre 2016) sont conçus selon un principe de « sections ».
    • Ces sections peuvent être plus ou moins nombreuses, en fonction du thème considéré. Exemples de sections : « section vidéo », « section diaporama », « section collection mise en avant », etc.
    • Les sections peuvent être fixes (section en-tête ou pied de page, par exemple) ou mobiles (globalement, toutes les autres), via des déplacements par blocs entiers.
    • Elles-mêmes peuvent être remplies avec des contenus variés, selon les options prévues par le thème (un thème premium donne beaucoup plus de possibilités, en règle générale, qu’un thème gratuit). Exemples de contenus : textes, images, vidéos, produits, etc.
  • Les thèmes se modifient via le « Theme editor », accessible via le bouton « Customize theme », en haut à droite du thème actif.
  • Selon que le thème que vous personnalisez est bâti sur le principe des sections ou pas (thème récent ou plus ancien), les possibilités techniques du « Theme editor » sont plus ou moins étendues. Dans le deuxième cas, vous pouvez personnaliser le contenu de votre thème, mais pas déplacer des blocs de contenus.
  • À partir du « Theme editor », vous pouvez mettre en forme le design de chacune de vos pages (zone d’en-tête, zone de pied de page, menu de navigation, colonne latérale, page d’accueil, page produit, page de collection, page de texte, etc.)
  • En plus des sections, le « Theme editor » vous donne accès à une partie « General settings », où se personnalisent la police de la boutique, ses couleurs, ses liens vers les réseaux sociaux, etc.

Je termine cet article en vous donnant un petit aperçu de tous les futurs focus qui constitueront cette série, car il s’agit certainement de la plus longue de toutes.

Je vous parlerai donc notamment, dans les prochains articles :

  • De l’utilisation du « Theme editor », de la personnalisation des sections et des contenus.
  • D’ajouts spécifiques, comme une favicon, une vidéo, un formulaire d’inscription à une newsletter, etc.
  • De la gestion particulière des images et les bonnes pratiques associées.
  • De la mise à jour d’un thème et sa personnalisation via le code spécifique utilisé par Shopify.
  • La traduction d’un thème.
  • Et plein d’autres notions importantes si vous voulez rendre votre boutique parfaite. J

Comme vous le voyez, les sujets de fond ne manquent pas et je vous retrouve donc très vite pour vous présenter tout ça.

À très bientôt pour la suite !