Nous poursuivons notre tour de la fonction « Themes », en entrant dans le détail des grandes notions par lesquelles j’ai conclu le focus précédent.

Aujourd’hui, nous allons donc découvrir le fonctionnement du « theme editor » et de tout ce que vous pouvez faire avec, en revenant d’abord sur quelques définitions importantes.

 

Les sections d’un thème

 

Dans un thème Shopify, les sections sont des parties personnalisables. Elles vous permettent d’ajouter, ordonner et supprimer des blocs de contenus dans la page d’accueil de votre boutique.

Chaque thème contient un ensemble unique de sections parmi lesquelles choisir.

Les sections vous laissent choisir les types et l’ordre des contenus que vous voulez faire apparaître sur votre page d’accueil, comme les produits mis en avant, les diaporamas, les listes de collections ou les vidéos.

À l’intérieur d’une section, vous pouvez ajouter plusieurs types de contenus, qui dépendent de la nature de la section, comme des produits, des zones de texte ou des images.

Lorsque vous ajoutez des contenus tels que des images et des vidéos à votre boutique, vous pouvez utiliser ces contenus dans les sections du thème.

Notez que la plupart des thèmes qui utilisent les sections (tous les thèmes publiés après octobre 2016, pour rappel) comportent des sections fixes, impossibles à déplacer. Il s’agit généralement des zones d’en-tête et de pied de page.

Même si vous ne pouvez pas déplacer ces sections fixes, vous pouvez néanmoins en personnaliser le contenu de multiples façons.

 

Le « theme editor »

 

Il vous permet d’ajouter et organiser les sections dans votre thème.

Le menu du « theme editor » apparaît à gauche de la boutique, en mode prévisualisation, lorsque vous cliquez sur le bouton « Customize theme » du thème actif (page « Online store / Themes » ou raccourci clavier GWT).

Je vous rappelle que les thèmes anciens (certains de ceux qui ont été publiés avant octobre 2016), et qui ne sont pas construits selon le principe des sections, vont avoir un « theme editor » dont les fonctions seront limitées.

Le « theme editor » est divisé en deux onglets :

  • L’onglet « Sections » : il présente les contenus qui sont accessibles dans votre thème.

Chaque section est personnalisable et vous pouvez, dans cet onglet, ajouter plus de sections qu’il n’y en a dans l’installation par défaut du thème, les déplacer ou les supprimer.

  • L’onglet « General settings » : il vous permet d’effectuer les changements généraux relatifs à votre boutique, comme la typographie, les couleurs de texte ou d’arrière-plan, et les liens vers vos réseaux sociaux.

Certains thèmes vous permettent, par exemple, d’ajouter des icônes « réseaux sociaux » dans le pied de page ou un formulaire d’inscription à votre newsletter.

Dans cet onglet, vous trouvez, tout en bas, un bouton « Theme style » chaque thème contient au moins un style de base initial, voire plusieurs.

Cliquer sur le bouton vous permet donc de revenir au style fixé initialement par le développeur, si les réglages que vous avez appliqués ne vous conviennent pas.

Vous pouvez aussi choisir entre les diverses propositions de style, si votre thème en offre plus d’un.

 

Ajouter des sections à votre page d’accueil

 

Une fois le « theme editor » ouvert, vous allez procéder de la façon suivante :

  • En bas de l’onglet « Sections », cliquez sur le bouton « Add section ».
  • Choisissez le type de section que vous désirez ajouter, puis cliquez sur « Add ».

Comme chaque thème comporte des options spécifiques, je ne peux pas vous en donner la liste exhaustive ici, mais vous pouvez par exemple trouver dans les propositions de sections les libellés suivants : « Blog posts, Collection list, Featured collection, Featured promotions, Gallery, Image with text, Slideshow, Page, etc. ».

  • Modifiez le contenu de la section, en fonction des options disponibles pour cette section dans ce thème précis. Chaque modification se traduit par une mise à jour en direct de l’aperçu à droite, ce qui vous permet de voir si vous devez conserver ou annuler cette modification.
  • Lorsque la section vous convient, cliquez sur le bouton « Publish » pour l’enregistrer.
  • Remarque : notez que toute image importée dans la boutique peut être réutilisée n’importe où dans la boutique, par la suite, puisque le fichier est ajouté à la base de données générale.

 

Réorganiser les sections existantes

 

Vous pouvez changer l’ordre des sections présentes sur votre page d’accueil, simplement en utilisant la fonction de « glisser-déposer » sur les sections visibles dans votre « theme editor ».

Vous pouvez ainsi ranger les sections dans l’ordre que vous préférez et cette réorganisation est aussi immédiatement visible dans l’aperçu.

Comme précédemment, pensez à bien sauvegarder vos modifications, une fois qu’elles vous satisfont.

Supprimer des sections existantes ou le contenu des sections

Dans le premier cas, à partir de votre « theme editor » :

  • Cliquez sur la section que vous désirez supprimer.
  • Cliquez sur le bouton « Delete section » au bas du panneau qui s’ouvre.

Dans le deuxième cas, pour toucher seulement à des contenus de section, sans supprimer la section elle-même (lorsque la section concernée permet une telle manipulation) :

  • Cliquez sur la section que vous désirez modifier.
  • Cliquez sur « Delete XXXX », l’intitulé dépendant du type de contenu (collection, image, logo, etc.)

Remarque à propos des suppressions de contenus visibles sur la page d’accueil : faites bien la différence entre la suppression d’une mise en avant de contenu et la suppression du contenu lui-même.

Par exemple, retirer une mise en avant de collection sur cette page ne supprime pas la collection elle-même, qui va rester accessible par ailleurs.

Cette gestion de la mise en avant des sections de la page est totalement indépendante des éléments eux-mêmes, qui se modifient dans l’administration de la boutique, comme nous l’avons vu précédemment dans les focus concernés.

 

Annuler ou répéter des changements

 

Les boutons « Undo » et « Redo » sont présents en bas du « Theme editor ».

Le bouton « Undo » présent dans le « theme editor » permet d’annuler vos changements les plus récents (même après avoir sauvegardé vos changements), alors que le bouton « Redo » relance la modification que vous venez d’annuler.

Cliquer sur le bouton « Undo » plusieurs fois vous fait remonter dans vos modifications précédentes durant cette session de personnalisation.

Il peut vous permettre d’annuler les modifications suivantes :

  • L’ajout, la réorganisation et la suppression de sections.
  • L’application de couleurs, de polices typographiques, etc. (dans l’onglet « General settings »).
  • Le retour au thème par défaut (si vous avez cliqué sur le bouton « Theme style » par erreur).

 

Le cas des thèmes qui ne sont pas construits sur le principe des sections

 

Si votre thème est trop ancien (publié avant octobre 2016 et pas mis à jour depuis par le développeur), il est possible qu’il ne fonctionne pas selon le principe des sections.

Dans ce cas, votre « theme editor » va fonctionner selon le même principe, mais vous proposera des éléments de personnalisation beaucoup plus restreints. Vous ne pourrez pas, notamment, déplacer les sections, mais seulement en modifier les contenus.

 

Quelques exemples d’ajouts de contenus dans votre page d’accueil

 

Les points ci-dessous sont généralement les premières interrogations des débutants, qui veulent rapidement donner une identité à leur boutique.

  • L’ajout d’un favicon

Pour rappel, il s’agit d’une petite icône qui représente votre site Web dans l’onglet des navigateurs, pour un raccourci bureau, dans votre historique de navigation, etc.

C’est donc un élément important, puisque le favicon met votre marque en avant partout où elle est visible et n’est pas juste un détail graphique, mais une vraie « preuve » de professionnalisme.

Pour le mettre en place, vous devez suivre les étapes suivantes :

    • Créez une icône de format carré, qui doit être en 16×16 ou 20×20 pixels, idéalement (via un logiciel spécifique ou un site en ligne capable de transformer une image plus grande en icône). Cette icône doit être unique, directement liée à votre logo de boutique et enregistrée au format .png ou .ico (ce dernier format vous garantit une bonne compatibilité avec tous les navigateurs).
    • Ajoutez le favicon au thème de votre boutique.

Tous les thèmes (gratuits) fournis directement par Shopify dans le « Theme store » permettent cette intégration. La plupart des thèmes premium récents offrent aussi cette possibilité. Par contre, les thèmes plus anciens ne sont pas toujours compatibles avec cette fonction (voir leur documentation, pour en savoir plus). S’ils ne disposent pas de la fonction « Sections », vous ne pourrez pas ajouter de favicon sans codage manuel du thème.

Pour procéder à cet ajout, rendez-vous sur l’onglet « General settings », cliquez sur « Favicon », puis sur le bouton « Upload image », sélectionnez l’icône sur votre ordinateur (ou dans la base d’images de votre boutique, si vous l’avez déjà téléchargée). Finissez en sauvegardant.

  • L’ajout d’une vidéo

En utilisant une section de type « vidéo », vous pouvez ajouter une vidéo à votre page d’accueil, ce qui est une façon dynamique d’accueillir les visiteurs de votre boutique, partager vos dernières news ou événements.

La plupart des thèmes vous permettent d’intégrer directement un lien unique de vidéo YouTube ou Vimeo (ceci nécessite la création d’un compte sur l’une ou l’autre plate-forme).

Selon le thème actif, l’aspect de cette section vidéo peut être très différent, avec ou sans titre, par exemple.

Notez aussi que certains thèmes contiennent, par défaut, une section vidéo et que vous n’aurez donc pas besoin de l’ajouter manuellement, mais devrez simplement modifier le lien-exemple.

À l’inverse, certains thèmes (même récents) ne proposent pas ce type de section : si vous tenez à afficher une vidéo en page d’accueil, il faudra choisir un autre thème (et penser à bien vérifier tous les contenus disponibles en amont).

Pour ajouter la vidéo, lorsque le thème le permet, suivez les étapes suivantes :

    • Ajoutez une « Video section » à partir de votre « Theme editor ».
    • Cliquez sur « Featured video », puis sur « Add ».
    • Ajoutez, dans cette nouvelle section et dans le champ YouTube ou Vimeo correspondant, le lien de la vidéo correspondante.
    • Dans le champ de réglage « Container width », saisissez la largeur de vidéo désirée, en sachant qu’elle va correspondre à un pourcentage de la largeur de la page d’accueil.
    • Sauvegardez.
  • L’ajout d’un formulaire d’inscription à votre newsletter

Il est évidemment essentiel de permettre à vos visiteurs de s’inscrire à votre newsletter via votre boutique.

Selon que votre thème fonctionne avec ou sans sections, l’intégration ne va pas se faire de la même façon.

Pour savoir si votre thème se trouve dans le premier ou le deuxième cas, cliquez sur le bouton « Edit HTML/CSS » de votre thème actif : votre thème comporte des sections s’il y a des fichiers présents dans la partie « Sections » de l’arborescence du thème. S’il n’y en a pas, votre thème ne comporte pas de sections.

Pour les thèmes avec sections :

    • Dans le « Theme editor », ajoutez une section.
    • Dans la zone « Promotional », cliquez sur « Newsletter » puis sur « Add ».
    • Pour afficher du texte dans l’en-tête de cette section, cliquez sur « Show header ».
    • Dans le champ « Heading », saisissez le texte de cet en-tête (par défaut, « Subscribe to our newsletter »).
    • Dans le champ « Subtext », saisissez le texte qui apparaîtra en dessous de l’en-tête (par défaut, « Promotions, new products and sales. Directly to your inbox »).
    • Sauvegardez.

Pour les thèmes sans sections, l’ajout est un peu plus compliqué et peut se faire :

    • Grâce à l’intégration d’une app dédiée.
    • Grâce à un formulaire codé manuellement dans le thème.
    • Grâce à l’intégration directe d’un formulaire MailChimp, si le thème accepte ce type de connexion directe.

Ces manipulations étant plus complexes, j’y reviendrai ultérieurement, lorsque j’aborderai toutes les questions liées au code du thème.

Je vous retrouve prochainement avec la suite de cette série consacrée à la personnalisation de votre boutique.

À très bientôt pour la suite !