Dans cet article, nous continuons de parler de personnalisation du code de votre thème, avec un focus dédié aux médias.

Je vais vous présenter des manipulations relatives au favicon de votre boutique, à la mise en place d’une lightbox pour vos images, de l’ajout d’un logo dans vos emails, d’une intégration d’image dans vos cartes-cadeaux, et à l’utilisation des gifs.

 

1/ Ajouter un favicon dans votre boutique

 

J’ai déjà abordé cette fonction pour les thèmes utilisant les sections (donc tous les thèmes gratuits de Shopify sortis après octobre 2016), puisqu’ils proposent cette option dans les paramètres du « Theme editor ».

Ici, il s’agit de mettre en place un favicon pour les thèmes sans sections, en modifiant leur code.

Suivez ces étapes :

  • Créez votre favicon, en respectant un format de 16×16 pixels, avec un fichier sauvegardé au format .png ou .ico (cette extension est idéale pour être compatible avec tous les navigateurs).
  • Pour ajouter l’image à votre boutique :
    • Rendez-vous dans la page « Online Store / Themes », puis cliquez sur « Actions / Edit HTML/CSS » sur votre thème actif.
    • Dans la catégorie « Assets », cliquez sur « Add a new asset ».
    • Cliquez sur le bouton « Choose file » et localisez votre favicon.
    • Cliquez sur « Upload asset ».
    • Dans la catégorie « Layouts », cliquez sur le fichier « theme.liquid » pour ouvrir l’éditeur de code.
    • Entre les balises <head> et </head>, collez le code correspondant à votre type de favicon :
      • Pour un fichier image en .png, utilisez ce code :

<link rel= »shortcut icon » href= »{{ ‘favicon.png’ | asset_url }} » type= »image/png » />

      • Pour un fichier image en .ico, utilisez ce code :

<link rel= »shortcut icon » href= »{{ ‘favicon.ico’ | asset_url }} » type= »image/x-icon » />

    • Sauvegardez vos changements.

Voilà pour cette personnalisation.

 

2/ Ajouter une lightbox à vos images

 

Attention, cette personnalisation fonctionne pour les thèmes sans sections, mais n’a pas été validée pour tous les thèmes avec sections. Il est donc possible qu’elle ne donne pas les résultats souhaités si vous utilisez un thème récent (mais ces thèmes-là vous proposent généralement des options similaires via le « Theme editor »).

La lightbox est une option d’affichage qui peut mettre en valeur vos images : lorsqu’on clique dessus, elles s’ouvrent en grand dans une fenêtre de type popup qui apparaît sur un fond de page assombri et temporairement inactif.

Voici un exemple de rendu, dans l’image ci-dessous :

Pour utiliser et personnaliser cette fonction, suivez les étapes suivantes :

  • Prérequis : vous devez utiliser un thème qui utilise déjà un plugin de lightbox sur les pages de produits.

Vous pouvez vérifier si c’est le cas en cliquant sur l’image de n’importe lequel de vos produits, quand vous êtes dans votre boutique côté visiteur : si l’image s’ouvre bien dans un encart au centre de votre écran, avec un arrière-plan plus sombre, il s’agit bien d’une lightbox.

  • Limiter l’apparition de la lightbox.

L’objectif n’est pas que toutes les images de votre boutique s’ouvrent de cette façon : par exemple, les images de vos articles de blog menant vers des pages extérieures ne doivent pas être configurées avec le mode lightbox.

De plus, si une image de page apparaît déjà dans sa taille initiale, il n’y a aucun intérêt à l’ouvrir avec une lightbox, puisqu’il n’y aura pas d’effet d’agrandissement.

Pour permettre un affichage sélectif, vous allez donc :

    • Appliquer une classe à vos templates.

Pour cela :

      • Dans la page HTML/CSS de votre thème, ouvrez les fichiers « page.liquid », « blog.liquid » et « article.liquid ».
      • Dans chacun de ces fichiers, trouvez l’élément  <div> qui contient vos données de page ou d’article de blog, pour y ajouter le code class= »rte », qui correspond à « Rich Text Editor » :
        • Dans le fichier « page.liquid », vous devez obtenir le code :

  <div class= »rte »>

    {{ page.content }}

  </div>

        • Dans les fichiers « blog.liquid » et « article.liquid », vous devez obtenir le code :

  <div class= »rte »>

    {{ article.content }}

  </div>

      • Sauvegardez vos changements pour chacun des fichiers.
  • Ajouter un code JavaScript à votre thème.

Pour cela :

      • Dans la page HTML/CSS de votre thème, ouvrez le fichier « theme.liquid ».
      • Localisez la partie du code qui inclut le plugin, en recherchant les termes « fancybox », « colorbox » ou « slimbox » (sans les guillemets), ce qui va vous permettre de savoir quel plugin utilise votre thème.
      • Une fois ce code trouvé, cherchez une expression conditionnelle qui doit ressembler à ceci :

{% if template contains ‘product’ and settings.main_image_display == ‘Lightbox’ %}

{{ ‘jquery.fancybox-1.3.4.pack.js’ | asset_url | script_tag }}

{% endif %}

      • Si vous trouvez cette expression, vous devez la supprimer (attention, elle n’est pas présente dans tous les thèmes).
      • Ensuite, avant la balise de fermeture </body>, collez le code suivant :

<script>

jQuery(function() {

  jQuery(‘.rte img’).not(‘a > img’).each(function() {

    // Matching images that aren’t already shown in their original size.

    var re = /(_small)|(_compact)|(_medium)|(_large)|(_grande)/;

    var src = jQuery(this).attr(‘src’);

    if (re.test(src)) {

      // Determining the URL to the original image.

      var href = src.replace(re,  »);

      // Activating lightbox.

      jQuery(this).wrap( »)

        .parent()

        .attr(‘href’, href)

        .addClass(‘lightbox’)

        .colorbox( {

            maxWidth: »95% »,

            maxHeight: »95% »,

            scalePhotos:true} );

    }

  });

});

</script>

      • Dans le cas où votre thème utilise le plugin « Colorbox », la personnalisation est terminée.
      • Par contre, s’il utilise « Slimbox » ou « Fancybox », vous devez encore faire deux manipulations :
        • Pour « Fancybox », remplacez le code :

.colorbox( {

            maxWidth: »95% »,

            maxHeight: »95% »,

            scalePhotos:true} );

Par le code :

.fancybox({

  ‘hideOnContentClick’: true

  });

        • Pour « Slimbox », remplacez le code :

..colorbox( {

            maxWidth: »95% »,

            maxHeight: »95% »,

            scalePhotos:true} );

Par le code :

.slimbox();

      • Sauvegardez vos changements.

Voilà pour cette personnalisation.

 

3/ Ajouter votre logo dans vos notifications par email

 

Vos notifications par email peuvent être personnalisées afin de mieux représenter votre marque.

Vous pouvez ajouter votre logo à tous vos emails, en suivant cette manipulation très simple :

  • Rendez-vous dans votre page d’administration « Settings / Notifications ».
  • Cliquez sur « Customize ».
  • Ajoutez un logo en cliquant sur « Choose file ».

Vous pouvez aussi modifier les couleurs dans vos templates d’email, pour les accorder à votre logo :

  • Rendez-vous dans votre page d’administration « Settings / Notifications ».
  • Cliquez sur « Customize ».
  • Changez le réglage « Accent color » en choisissant manuellement une couleur ou en saisissant un code couleur.

Voilà pour cette personnalisation.

 

4/ Personnaliser l’image de vos cartes cadeaux

 

Je vous rappelle que les cartes cadeaux sont une option qui n’est accessible qu’à partir du deuxième niveau de souscription à Shopify.

Il est possible de personnaliser l’image utilisée sur les cartes cadeaux que vos clients reçoivent par email.

Par défaut, l’image est celle-ci (exemple d’une boutique canadienne) :

L’objectif ici est de mettre votre marque en avant, tout en donnant à votre carte-cadeau un aspect qui ressemble à votre activité.

Suivez ces étapes :

  • Rendez-vous dans la page HTML/CSS de votre thème.
  • Dans le dossier « Assets », cliquez sur « Add a new asset ».
  • Cliquez sur « Choose file » pour trouver l’image que vous avez préparée et la télécharger (donnez-lui un nom simple, par exemple « carte-cadeau.png ».

Notez que la taille recommandée est 950×950 pixels.

  • Cliquez sur « Upload asset » et l’image apparaîtra dans votre dossier « Assets ».

Prenez bien note de l’extension du fichier : « .png » ou « .jpg ».

  • Ensuite, rendez-vous dans la catégorie « Templates » et cliquez sur le fichier « gift_card.liquid ».
  • Trouvez la ligne de code qui fait référence à votre image de carte-cadeau et qui doit ressembler à cela :

Notez le filtre asset_url utilisé dans cette ligne de code :

<img src= »{{ ‘card.gift-card.jpg’ | asset_url }} » alt= »Gift card illustration »>

  • Dans certains thèmes, la ligne de code ressemblera plutôt à cela :

Dans ce cas, notez que le filtre utilisé est : shopify_asset_url :

<img src= »{{ ‘gift-card/card.jpg’ | shopify_asset_url }} » alt= »Gift card illustration »>

Ce second filtre ne fonctionnera pas avec vos propres images téléchargées.

Vous devez donc supprimer la partie « shopify » du filtre, pour obtenir simplement : asset_url

  • Dans la ligne de code, remplacez le nom par défaut de la carte cadeau (gift-card/card.jpg) par le nom de votre propre fichier, noté précédemment.

Faites attention de bien utiliser l’extension correcte de votre fichier et de conserver les marques de citation autour du nom, pour obtenir par exemple : ‘carte-cadeau.png’

  • À l’arrivée, votre code complet doit ressembler à cela :

<img src= »{{ carte-cadeau.png’ | asset_url }} » alt= »Gift card illustration »>

  • Sauvegardez vos changements.

Il ne vous reste plus qu’à vérifier le rendu de votre carte-cadeau personnalisée.

Pour cela :

  • Rendez-vous dans la page des notifications par email de votre administration.
  • Cliquez sur le template « Gift card created », puis sur le bouton « … » à droite.
  • Sélectionnez soit « Send test email » ou « Preview » pour vérifier l’apparence de votre nouvelle carte-cadeau.

Voilà pour cette personnalisation.

 

5/ Utiliser des images Gif dans votre boutique

 

Si vous désirez utiliser des images .gif afin de montrer de petites animations dans votre boutique, vous pouvez télécharger des images dans le dossier « Assets » de votre thème (si vous essayez de passer par le « Theme editor », elles ne fonctionneront pas, et leur mise en ligne directe via une page produit risque de ne pas fonctionner non plus).

Dans la mesure où chaque thème est unique, les instructions qui suivent sont un guide, mais doivent être adaptées à chaque cas.

 

  • Utiliser un fichier .gif en tant que logo

 

Suivez ces étapes :

    • Rendez-vous dans la page HTML/CSS de votre thème.
    • Cliquez sur la catégorie « Assets », puis sur « Add a new asset », afin de télécharger votre fichier .gif dans ce dossier.
    • Cliquez ensuite sur le fichier « theme.liquid » (catégorie « Layouts ») pour l’éditer.
    • Recherchez le nom par défaut de votre logo (généralement « logo.png ») et remplacez chaque occurrence trouvée par le nom du fichier .gif que vous avez ajouté (nom complet, incluant l’extension).
    • Sauvegardez vos changements.
    • Vérifiez que le logo apparaît correctement dans votre boutique.
    • Attention, si vous modifiez votre thème par la suite, vous devrez répéter cette manipulation.

 

  • Utiliser des fichiers .gif sur le diaporama ou carrousel de votre page d’accueil

 

  • Rendez-vous dans la page HTML/CSS de votre thème.
  • Cliquez sur la catégorie « Assets », puis sur « Add a new asset », afin de télécharger votre premier fichier .gif dans ce dossier.
  • Répétez l’opération, jusqu’à avoir téléchargé toutes les images désirées pour votre diaporama.
  • Rendez-vous ensuite dans le « Theme editor » de votre boutique, page d’accueil ouverte.
  • Trouvez les noms des images utilisées par défaut dans votre diaporama ou carrousel (section « Home Page » ou « Homepage Slideshow ») et notez précisément leur nom.

Généralement, ces images portent des noms comme « slide_1.jpg » ou « carousel-item-1.jpg ».

    • Cochez aussi toutes les options appropriées, comme dans l’image ci-dessous.
    • Sauvegardez.
    • Retournez dans votre page HTML/CSS.
    • Vous devez maintenant trouver le template qui inclut le diaporama ou le carrousel.

Il s’agit généralement du fichier « index.liquid », mais chaque thème est unique et peut contenir ce code dans d’autres fichiers.

Si vous n’arrivez pas à le localiser, contactez le développeur de votre thème pour savoir où le trouver.

Voici à quoi ressemble ce code dans le thème gratuit « Supply », à titre d’exemple :

    • Une fois que vous aurez localisé le bon fichier, trouvez le code spécifique où l’on voit quels fichiers sont utilisés dans le diaporama ou le carrousel.

Dans l’exemple de « Supply », les images sont appelées via cette ligne de code Liquid : {{ slide_img | asset_url | img_tag: slide_alt }}

    • Pour permettre l’utilisation d’un fichier .gif en tant que première diapositive, vous devez utiliser une déclaration qui commence par « if », comme vous le voyez dans la ligne mise en surbrillance ci-dessous :

Ce code indique au thème que la première diapositive à utiliser dans le diaporama ou le carrousel est le fichier .gif téléchargé dans le dossier « Assets ».

Grâce à la portion de code {% else %}, le reste des diapositives sera affiché normalement.

Attention de ne pas confondre les tirets (-) et les underscores (_).

    • Sauvegardez vos changements et vérifiez l’affichage côté boutique.
    • Attention, si vous modifiez votre thème par la suite, vous devrez répéter cette manipulation.

Voilà pour cet article!

Dans le prochain focus, je vous parlerai des personnalisations relatives aux fonctions de communication et d’échange avec vos clients.

À très bientôt pour la suite !