Nous continuons la présentation de la fonction « Theme », avec cette troisième partie dans laquelle je vais vous parler des bonnes pratiques concernant les images, puis de quelques manipulations courantes relatives à la gestion et la mise à jour de vos thèmes.

 

Choisir de bonnes images pour votre thème

 

De plus en plus de thèmes Shopify incluent de larges sections visuelles, de type « slideshow » (forme de diaporama souvent animé de façon automatique), qui ont la particularité de s’adapter à la hauteur de votre fenêtre de navigateur (comme les thèmes gratuits Boundless et Brooklyn) ou à la taille de votre écran (comme le thème Venture).

Si vous choisissez ce genre de thème (en sachant qu’une majorité des thèmes premium sont aussi concernés), il est important que vous compreniez quelles images seront le mieux adaptées, pour un affichage parfait.

En effet, dans la mesure où les images de grande taille ne peuvent pas toujours être entièrement visibles du côté de l’internaute (s’il découvre votre boutique sur une tablette ou via son téléphone, par exemple), Shopify tronque une partie des visuels et il est donc utile de savoir à quoi s’attendre.

 

Voici mes recommandations :

  • Le point le plus important de votre image, celui que vous voulez absolument montrer à vos clients potentiels, doit toujours se trouver au centre.

De cette façon, si les bords de l’image sont coupés à l’affichage, l’essentiel restera toujours visible.

  • Les images prévues pour être intégrées dans des « slideshows » ne doivent jamais (idéalement) contenir de texte. Car si des phrases sont intégrées dans l’image, il est à peu près certain qu’elles seront coupées ou placées à un endroit qui n’est pas forcément celui que vous aviez prévu.

Si vous tenez à incorporer du texte, mieux vaut utiliser les options prévues dans le thème lui-même, grâce auxquelles vous pouvez ajouter des slogans, des titres ou des liens à l’intérieur de l’image. Ainsi, quel que soit l’appareil utilisé pour visiter votre site, tout sera toujours impeccable.

  • Les images choisies pour ces sections ont tout intérêt à ne pas être trop chargées visuellement, et tout particulièrement si vous décidez d’ajouter du texte par-dessus, grâce aux options de votre thème.

 

À défaut, les mots deviennent vite illisibles et l’ensemble peut être perçu, dans tous les cas, comme « agressif », du point de vue du client. Privilégiez des compositions équilibrées et harmonieuses, où les éléments importants ne sont pas trop nombreux.

  • Remarque technique importante, concernant les types de fichiers :
    • Pour vos images de produits, de pages ou d’articles de blog, privilégiez les .jpg, qui sont plus légers. Ceci est d’autant plus important si votre boutique propose un très large catalogue.
    • Pour vos images de logo et de bordures, préférez le .png, capable de gérer la transparence (et donc d’éviter que votre logo se retrouve sur un fond carré et blanc, par-dessus le fond de votre en-tête).
  • Dans tous les cas, vos images doivent être de haute qualité, mais aussi compressées que possible, pour un affichage rapide. Ne zappez pas les étapes de compression et de vérification, si vous souhaitez que vos clients aient une bonne expérience de navigation lorsqu’ils vous rendront visite.

 

Si vous n’êtes pas bien outillé pour ce qui est de la compression, je vous recommande l’application « Minifier » (https://apps.shopify.com/minifier), qui ne vous facture que lorsque vous utilisez ses fonctions de compression. Elle peut vraiment alléger vos images, sans perdre en qualité, et rendre votre boutique plus rapide à l’affichage.

Pour finir, notez que les images larges peuvent être coupées par Shopify à gauche et à droite lorsque la boutique est consultée sur un écran plus haut que large (tablette et téléphone, selon le sens de lecture choisi par le visiteur).

Choisissez donc vos visuels en tenant particulièrement compte de ce paramètre, car de plus en plus d’internautes se servent de leur téléphone pour faire du shopping…

 

Organiser la gestion de vos thèmes

 

Dans les deux focus précédents, je vous ai déjà donné pas mal d’informations quant aux manipulations de base. Je reviens ici sur le sujet, avec plus de détails et d’explications.

En travaillant avec les divers fichiers qui composent votre thème, vous pouvez apporter des modifications à celui-ci, l’exporter pour une utilisation dans une autre boutique, ou créer des sauvegardes.

Plus vous aurez d’expérience avec les thèmes dans Shopify et plus vous pourrez travailler de façon efficace. Voici déjà quelques notions plus avancées que ce que nous avons vu jusqu’ici.

Je rappelle, au cas où vous n’auriez pas retenu cette information dans l’article précédent, que vous ne pouvez jamais dépasser la limite de 20 thèmes installés dans une boutique, dont un actif.

  • L’exportation des thèmes

 

Cette fonction peut vous être utile dans trois cas principaux :

    • Si vous voulez travailler sur les fichiers dans un autre éditeur de thème que celui de Shopify.
    • Si vous voulez réutiliser un thème dont vous avez personnalisé le code dans une autre boutique (attention, pour les thèmes premium, l’achat initial n’est valable que pour un site et il faudra d’abord l’acheter une nouvelle fois).
    • Si vous voulez le sauvegarder pour plus tard, parce que vous avez atteint la limite des 20 thèmes installés et que vous devez faire de la place.

 

Pour procéder à une exportation (qui va inclure l’ensemble des fichiers du thème) :

    • Rendez-vous sur la page « Online store / Themes ».
    • Choisissez le thème que vous voulez télécharger sur votre ordinateur.
    • Cliquez sur le bouton « Actions » correspondant à ce thème (en haut à droite de chaque encart), puis cliquez sur « Download theme file ».
    • L’ensemble des fichiers va vous être fourni sous la forme d’un fichier .zip que vous pourrez récupérer via un lien de téléchargement. Ce lien est envoyé à l’adresse email liée à l’administration de la boutique.
    • Une fois le thème exporté et téléchargé, vous pouvez tout à fait le supprimer de la boutique.
  • L’importation des thèmes

 

Cette fonction peut vous être utile si :

    • Vous avez besoin d’installer un thème qui n’était pas directement téléchargeable à partir de la boutique (ce que je ne vous recommande pas de faire, sauf si vous travaillez avec un développeur spécialiste de Shopify, comme je l’ai déjà expliqué dans les focus précédents).
    • Vous avez exporté un thème pour travailler dessus dans un éditeur de code extérieur à Shopify, et que vous voulez maintenant le réintégrer à la boutique.

 

Pour procéder à une importation (qui va inclure l’ensemble des fichiers du thème) :

    • Rendez-vous sur la page « Online store / Themes ».
    • Cliquez sur « Upload a theme » (en haut à gauche)
    • Cliquez sur « Choose » et sélectionnez le dossier .zip de votre thème, puis validez.

 

Attention, Shopify n’accepte que les fichiers .zip à ses normes et ne lancera pas le téléchargement si vous essayez de sélectionner un format de fichier incompatible, ou si les fichiers contenus dans l’archive sont incorrects ou incomplets (un thème devant contenir une série spécifique et obligatoire de fichiers, avec des libellés précis).

Notez aussi que Shopify impose une limite de 20 Mb à tous les envois de fichiers (pas seulement les thèmes : si un message d’erreur s’affiche, vérifiez que votre fichier .zip pèse moins lourd que 20 Mb.

    • Une fois le fichier correctement téléchargé, le thème correspondant apparaîtra dans la liste de vos thèmes disponibles et non publiés.
  • La duplication des thèmes

 

Il est toujours recommandé de dupliquer votre thème lorsque vous vous apprêtez à y ajouter de nouvelles fonctions ou à modifier son code existant (surtout s’il s’agit d’un thème payant sur lequel vous avez déjà passé de longues heures en personnalisation !).

De cette façon, en cas de grave erreur, pas de panique… il vous suffira de revenir à la version sauvegardée.

 

Pour procéder à une duplication (qui va donc littéralement cloner le thème) :

    • Rendez-vous sur la page « Online store / Themes ».
    • Choisissez le thème que vous désirez copier.
    • Cliquez sur le bouton « Actions » correspondant à ce thème (en haut à droite de chaque encart), puis cliquez sur « Duplicate ».

Note importante : si vous atteignez la limite des 20 thèmes, le bouton « Duplicate » devient grisé et il n’est plus possible de l’utiliser, tant que vous n’avez pas supprimé au moins un thème de la page.

  • La suppression des thèmes

Il est possible, à tout moment, de supprimer un ou plusieurs thèmes installés dans votre boutique.

 

Pour procéder à une duplication (qui va donc littéralement cloner le thème) :

    • Rendez-vous sur la page « Online store / Themes ».
    • Choisissez le thème que vous désirez supprimer.
    • Cliquez sur le bouton « Actions » correspondant à ce thème (en haut à droite de chaque encart), puis cliquez sur « Delete ».
    • Confirmez votre souhait de suppression.

 

Note importante : il n’est pas possible de supprimer le thème publié de cette façon. Il doit d’abord être remplacé par un autre thème, comme je vous l’ai expliqué dans l’article précédent.

Ceci permet d’éviter qu’une boutique se retrouve sans thème (et donc, sans fonctions d’affichage) par erreur.

 

Mettre votre thème à jour

 

Lorsqu’un développeur met à jour dans le « Theme store » un thème qu’il a créé, ses futurs clients bénéficient de la nouvelle version, mais pas les anciens.

Pourquoi ? Parce que si Shopify mettait automatiquement à jour les boutiques utilisant le thème en question, toutes les personnalisations effectuées par le propriétaire de la boutique seraient écrasées… ce qui n’est pas vraiment souhaitable. J

 

Il n’existe pas de façon universelle, manuelle ou automatique, de mettre à jour un thème installé.

Enfin, pas tout à fait… Certains développeurs de thèmes, depuis la mise en place du système de « sections » dont je vous ai parlé dans l’article précédent, ont réussi à mettre en place des fonctions quasi automatiques de mises à jour qui vous font profiter de leurs correctifs sans pour autant perdre vos personnalisations.

Mais comme ils sont encore peu nombreux à proposer ce type de solution, voici ce qu’il faut retenir dans le cas majoritaire.

Tout d’abord, notez que la récupération d’un thème mis à jour par le développeur est toujours gratuite lorsqu’il s’agit d’un thème premium que vous avez acheté.

Pour cela, il suffit que vous vous connectiez bien au « Theme store » avec le même compte Shopify que lors de votre achat initial.

Si vous n’avez pas téléchargé directement le thème à l’origine (mais l’avez acheté pour le télécharger d’abord sur votre ordinateur), il vous faudra contacter le développeur pour obtenir la version à jour de façon manuelle et la mettre en ligne comme décrit plus haut.

J’insiste aussi sur le fait que chaque achat de thème premium est valable pour un compte unique. Si vous avez plusieurs boutiques, il faudra racheter une nouvelle copie du thème.

 

Les étapes de mise à jour d’un thème sont les suivantes :

  1. Téléchargez la nouvelle version du thème dans votre boutique.

Pour cela :

    • N’oubliez pas de dupliquer votre thème actuel, pour avoir une copie de sauvegarde.
    • Rendez-vous dans le « Theme store », retrouvez votre thème et cliquez sur « Buy theme » (vous ne serez pas facturé, dans le cas d’une mise à jour).
    • Vérifiez que vous êtes bien connecté avec la bonne boutique, dans la phrase « You’re about to install… to xxxxxx.myshopify.com ».
    • Cliquez sur « Install as an unpublished theme ».
    • Cliquez sur « Go to your Theme Manager ».
  1. Personnalisez votre nouveau thème

 

C’est la partie la plus fastidieuse, pendant laquelle vous allez réappliquer à cette nouvelle version toutes les personnalisations effectuées sur le thème initial. Pensez donc bien à :

  • Remettre votre logo, vos sections de page d’accueil, vos couleurs et typographies, vos images de slideshow, etc., via le bouton « Customize theme » présenté dans l’article précédent.
  • Si vous avez touché au code Liquid de certaines pages du thème, il va falloir reproduire ces changements (je vous rappelle que nous allons parler de cette question du code dans d’autres articles).
  • Désinstallez les applications qui ajoutent du code dans le thème et réinstallez-les à partir de l’App store.

 

Si vous ne savez pas si une application est concernée par cette manipulation, vous pouvez contacter le développeur de l’app en cliquant sur le bouton « … » à droite du nom de l’app, dans la page « Apps » de votre administration.

  1. Faites un aperçu de ce que donne le thème dans la boutique, via le bouton avec l’icône « Œil », à droite du nom du thème.
  2. Quand vous estimez que tout est prêt, cliquez sur « Publish theme ».

Votre ancienne version sera conservée en tant que thème non publié et vous pourrez toujours vous en servir comme thème de référence, si vous avez oublié quelques détails de personnalisation dans la nouvelle version.

Voilà, c’est tout pour cet article, je vous retrouve prochainement avec d’autres informations relatives au thème et à la personnalisation de votre boutique.

 

À très bientôt pour la suite !