Comment modifier l’apparence de vos pages produits

Aujourd’hui, je vous propose d’autres personnalisations du code Shopify, cette fois pour modifier l’apparence de vos pages de produits.

Comme précédemment, ces changements ne sont pas obligatoirement à mettre en place, car certains thèmes premium proposent des options qui intègrent ces personnalisations. Pensez donc à bien vérifier les fonctions incluses dans votre « Theme editor » pour les pages produits, avant de modifier votre code.

 

1/ Ajouter des légendes ou des descriptions aux images de produits

 

Notez que vous pouvez procéder à cet ajout via différentes apps, en utilisant le mot-clef « caption » dans l’App store, mais il est aussi possible de procéder via la modification du code de votre thème.

Les images de produits n’ont pas de métadonnées qui peuvent être utilisées en tant que légendes dans vos templates, mais vous pouvez contourner cela en utilisant le nom du fichier des images.

Pour que vos images de produits affichent le nom de fichier en tant que légende, vous devez :

  • Avoir une image de produit par variante (lorsqu’un produit en contient plusieurs)
  • Organiser vos images de variantes exactement dans l’ordre où les variantes sont classées dans la page de produit.
  • Ajouter ce code dans le template « product.liquid » (passez par la page « HTML/CSS » de votre thème actif) :

{% for image in product.images %}

My image caption is {{ product.variants[forloop.index0].title }}

{% endfor %}

2/ Ajouter un tableau d’inventaire

 

Suivez les manipulations suivantes :

  • Rendez-vous dans la page « HTML/CSS » de votre thème actif.
  • Dans le dossier « Snippets », cliquez sur « Add a new snippet » et nommez ce nouveau snippet « inventory-table » (sans les guillemets).
  • Cliquez sur « Create snippet ».
  • Collez dans l’éditeur le code à récupérer sur cette page.
  • Ouvrez le fichier « product.liquid » dans la liste des templates et collez, à l’endroit où vous souhaitez voir apparaître le tableau d’inventaire, le code suivant :

{% include ‘inventory-table’ %}

  • Sauvegardez et vérifiez l’apparence de votre tableau sur vos pages de produits.

Attention, si vous n’utilisez pas la fonction de suivi de l’inventaire dans vos pages de produits, les quantités indiquées dans le tableau auront une valeur de 1.

Afin de vous assurer que le tableau d’inventaire s’affiche dans le même style que le reste de la page du produit, vous devrez peut-être éditer votre feuille de styles :

  • Rendez-vous dans la page « HTML/CSS » de votre thème actif.
  • Cliquez sur votre fichier .css (qui peut être situé dans divers dossiers, selon votre thème).
  • Tout en bas de l’éditeur, ajoutez le code suivant :

#inventory { padding: 20px 0; }

#inventory table { width: 100%; }

#inventory table th { background: #f6f6f6; }

#inventory table th, #inventory table td { padding: 5px; border-top: 1px solid #EEE; text-align: left; }

  • Si vous maîtrisez suffisamment les règles .css, vous pouvez modifier cette base, pour enrichir l’affichage du tableau.
  • Sauvegardez.

3/ Ajouter un sélecteur de quantité

Si votre thème ne le propose pas dans ses options, vous pouvez ajouter un sélecteur de quantité qui permettra à vos clients d’ajouter plusieurs exemplaires d’un produit à son panier en un seul clic.

Attention, les manipulations sont différentes selon que votre thème fonctionne avec des sections ou pas.

  • Thèmes avec sections

Suivez les étapes suivantes :

    • Vérifiez d’abord que votre thème n’inclut pas cette fonction de sélecteur, en vous rendant dans votre « Theme editor », dans la section « Product pages », pour vous assurer que l’option « Show quantity selector » n’est pas proposée.

L’image ci-dessous vous montre à quoi ressemble généralement ce réglage.

    • Si votre thème n’inclut pas cette fonction, suivez les manipulations suivantes pour mettre le sélecteur en place :
      • Rendez-vous dans la page « HTML/CSS » de votre thème actif.
      • Dans le dossier « Sections », cliquez sur le fichier « product-template.liquid » pour l’ouvrir dans l’éditeur de code.
      • Trouvez la balise d’ouverture <form>.
      • Entre cette balise et la balise de fermeture </form>, collez le code suivant :

<label for= »quantity »>Qty: </label>

<input min= »1″ type= »number » id= »quantity » name= »quantity » value= »1″ />

<style>#quantity { padding:5px; width:35px; border: 1px solid #555; }</style>

      • Vous devrez sans doute tester plusieurs placements, en fonction de votre thème, pour obtenir l’affichage qui vous convient le mieux.
      • Sauvegardez.
  • Thèmes sans sections

Suivez les étapes suivantes :

    • Vérifiez d’abord que votre thème n’inclut pas cette fonction de sélecteur, en vous rendant dans votre « Theme editor », dans la section « Product pages », pour vous assurer que l’option « Show quantity selector » n’est pas proposée.

Cette étape est identique à celle évoquée pour les thèmes avec sections.

    • Si votre thème n’inclut pas cette fonction, suivez les manipulations suivantes pour mettre le sélecteur en place :
      • Rendez-vous dans la page « HTML/CSS » de votre thème actif.
      • Dans le dossier « Templates », cliquez sur le fichier « product.liquid » pour l’ouvrir dans l’éditeur de code.
      • Trouvez la balise d’ouverture <form>.
      • Entre cette balise et la balise de fermeture </form>, collez le code suivant :

<label for= »quantity »>Qty: </label>

<input min= »1″ type= »number » id= »quantity » name= »quantity » value= »1″ />

<style>#quantity { padding:5px; width:35px; border: 1px solid #555; }</style>

      • Vous devrez sans doute tester plusieurs placements, en fonction de votre thème, pour obtenir l’affichage qui vous convient le mieux.
      • Sauvegardez.

4/ Ajouter un tableau de tailles

Si vous vendez des vêtements dans votre boutique, il peut être intéressant de proposer à vos clients un tableau qui récapitule les tailles, sur vos pages de produits.

Attention, pour que les manipulations suivantes fonctionnent, tous vos produits doivent proposer une option de taille (« Size »), comme vous pouvez le voir dans l’image ci-dessous :

Notez aussi que cette personnalisation ne fonctionnera pas avec la version sans sections du thème Brooklyn, qui utilise son propre code JavaScript.

De plus, elle diffère légèrement selon que votre thème fonctionne avec ou sans sections.

  • Thèmes avec sections

Suivez les étapes suivantes :

    • Créez une page pour le tableau des tailles.
      • Rendez-vous sur la page « Online store / Pages ».
      • Cliquez sur « Add page ».
      • Nommez votre page « Size chart » sans les guillemets (une fois que le « handle » de la page aura été créé, vous pourrez renommez celle-ci en français).
      • Pour le contenu de la page, créez votre tableau en lui donnant l’apparence que vous souhaitez, en suivant l’exemple anglais ci-dessous :
      • Dans la section « Visibility », assurez-vous que la page est réglée sur « Visible ».
      • Sauvegardez.
    • Ajoutez un accès à ce tableau à votre thème.
      • Rendez-vous dans la page « HTML/CSS » de votre thème actif.
      • Dans le dossier « Sections », cliquez sur le fichier « product-template.liquid » pour l’ouvrir dans l’éditeur de code.
      • Ajoutez un bouton « Voir le tableau des tailles » à la page, en ajoutant le code suivant juste avant le bouton « Add to cart » :

{% if product.options contains ‘Size’ %}

<a class= »btn size-chart-open-popup » href= »#size-chart »>Voir le tableau des tailles</a>

{% endif %}

      • Ajoutez le code suivant tout en bas du fichier « product-template.liquid » :

<div id= »size-chart » class= »mfp-hide »>

{{ pages.size-chart.content }}

</div>

<style>

#size-chart {

  border: 2px #555 solid;

  background-color: #ffffff;

  padding: 20px;

  max-width: 800px;

  margin-left: auto;

  margin-right: auto;

}

</style>

      • Sauvegardez.
      • Dans le dossier « Assets », cliquez sur le fichier « theme.js » et ajoutez le code suivant en bas du fichier :

$(‘.size-chart-open-popup’).magnificPopup({

  type:’inline’,

  midClick: true

});

      • Sauvegardez.

Si le tableau n’apparaît pas après ces manipulations, il se peut que vous deviez ajouter du code supplémentaire (c’est par exemple le cas pour le thème Debut).

Pour cela :

      • Dans le dossier « Assets », cliquez sur le fichier « theme.scss.liquid » ou sur le fichier « timber.scss.liquid » et ajoutez en bas de l’éditeur le code à récupérer sur cette page.
      • Si votre thème ne possède pas de fichier « vendor.js » dans le dossier « Assets », rendez-vous dans le fichier « theme.js » et ajoutez, juste au-dessus du code $(‘.size-chart-open-popup’).magnificPopup, le code à récupérer sur cette page.
      • Sauvegardez.

 

  • Thèmes sans sections

Suivez les étapes suivantes :

    • Créez une page pour le tableau des tailles.

Suivez les consignes données pour les thèmes sans sections.

    • Créez un snippet pour votre tableau de tailles
      • Rendez-vous dans la page « HTML/CSS » de votre thème actif.
      • Dans le dossier « Snippets », cliquez sur « Add a new snippet ».
      • Nommez votre nouveau snippet « size-chart » (sans les guillemets) et cliquez sur « Create snippet ».
      • Dans un nouvel onglet de notre navigateur, ouvrez l’une des pages de code suivantes, en fonction du type de tableau que vous souhaitez (voir précisions plus bas) :

Store Wide Size Chart

Product Type Size Chart

Vendor Specific Size Chart

      • Copiez le code correspondant et collez-le dans l’éditeur de votre nouveau snippet, comme dans l’exemple ci-dessous.
      • Sauvegardez.
      • Dans le dossier « Layout », cliquez sur le fichier « theme.liquid ».
      • Trouvez la balise de fermeture </body> et, juste au-dessus, collez le code suivant :

{% include ‘size-chart’ %}

      • Sauvegardez.
    • Cas des choix « vendor specific » ou « product type »

Si vous avez précédemment choisi les codes « Product type size » ou « Vendor specific size chart », vous allez devoir créer un tableau pour chaque vendeur ou chaque type de produit.

Le principe est le même que pour la création d’un tableau global qui s’applique à toute la boutique, si ce n’est que vous devez faire apparaître le vendeur ou le type de produit au début du titre de la page et de son « handle ».

Par exemple, si l’un de vos vendeurs est listé sous le nom « Great Owls », votre page devra être nommée « Great Owl size chart », de façon à obtenir un « handle » qui sera « great-owl-size-chart » (encore une fois, vous pouvez modifier le nom de la page une fois qu’elle a été nommée et sauvegardée, puisque son « handle » initial restera), comme dans l’exemple de l’image ci-dessous.

Autre exemple, cette fois pour le choix du code « product type » : si vous voulez proposer un tableau de tailles pour des chaussures, votre page s’appellerait « Shoes size chart » et le handle deviendrait « shoes-size-chart ».

    • Pour modifier la langue de cette option

Pour votre boutique qui fonctionnerait dans une autre langue, ou si vous voulez utiliser un texte différent de « Size chart » sur votre page de produit, vous pouvez effectuer les changements suivants dans votre snippet :

      • Rendez-vous dans la page HTML/CSS de votre thème actif.
      • Dans le dossier « Snippets », cliquez sur le fichier « size-chart.liquid ».
      • Trouvez le code {% assign size_options = ‘size,taille’ | split: ‘,’ %}.
      • Éditez les valeurs « size-options » pour qu’elles correspondent à la traduction que vous avez donnée à vos options de produits et séparez les options par des virgules.

Par exemple, pour ajouter une traduction en allemand, vous pouvez changer le code en {% assign size_options = ‘size,taille,Größe’ | split: ‘,’ %}.

      • Trouvez le code {% assign size_chart_text_link = ‘Size chart’ %} et remplacez « Size chart » par la formule qui vous convient.
      • Sauvegardez.

Voilà pour cette première série de personnalisations possibles dans vos pages de produits.

Dans le prochain article, je vous proposerai d’autres modifications de code qui vous permettront d’enrichir l’expérience des visiteurs de votre boutique.

À très bientôt pour la suite !

Les nouvelles audiences personnalisées Facebook

Audiences personnalisées Facebook

Aujourd’hui, je vous propose de découvrir l’une des toutes dernières fonctions mises en place par Facebook (qui ne chôme décidément pas !) pour les comptes publicitaires.

Il s’agit des audiences personnalisées Facebook Event, qui concernent donc les personnes interagissant avec vos événements.

Attention, cette fonction est en cours de déploiement et n’est peut-être pas encore accessible sur votre compte publicitaire, notamment en fonction de la langue qui y est utilisée et du pays auquel vous êtes rattaché.

Le nombre de possibilités qui s’offrent à vous pour cibler votre client idéal devient vraiment incroyable, avec une méthode complémentaire pour bâtir votre audience qui vient se rajouter dans votre boîte à outils.

En bref, cette nouvelle intégration permet d’isoler dans une liste :

  • Les personnes qui ont répondu à un événement quelconque
  • Les personnes qui ont répondu à un ou plusieurs événements spécifiques
  • Les personnes qui ont répondu à un événement, mais pas un autre
  • Les personnes qui ont répondu à des événements appartenant à plusieurs pages gérées
  • Les personnes qui ont répondu « J’y vais » ou « Intéressé » seulement, « J’y vais » seulement, ou « Intéressé » seulement.
  • Les personnes qui ont répondu à un événement durant les 180 jours écoulés.

La création des événements Facebook existe depuis 2009 et la fonction n’a cessé d’évoluer depuis.

D’abord, je vous rappelle à quoi ressemble la page de saisie d’un événement :

 

La fonction « événement » telle qu’elle est conçue par Facebook permet de générer des interactions et de l’engagement autour d’un événement virtuel ou physique : sortie d’un nouveau produit, conférence en ligne, formation collective, etc.

Jusqu’à maintenant, le ciblage d’une audience relative à un événement était assez limité, avec un simple tri entre les personnes qui avaient répondu ou non à un événement donné, comme on peut le voir ici :

Les changements en cours vont permettre à tous les vendeurs de sélectionner précisément quelles personnes ils veulent intégrer ou pas dans leurs audiences enregistrées.

Rappel préliminaire

Ce nouveau type d’audience fait partir des audiences personnalisées de type « Interactions », qui incluent donc aussi :

  • L’engagement sur les vidéos
  • L’engagement sur les formulaires de prospect
  • L’engagement sur les canvas
  • L’engagement sur les pages
  • L’engagement sur les pages Instagram

Les vendeurs qui disposent déjà de la nouvelle audience « engagement sur les événements » peuvent donc créer en complément des audiences simples ou complexes autour des événements de l’une ou plusieurs de leurs pages.

La création d’une audience personnalisée sur les événements Facebook

Ici, je pars de l’exemple d’un compte Facebook anglophone qui dispose déjà de cette fonction.

Dans votre Business Manager, vous devez :

  • Aller dans la page des audiences
  • Cliquer sur « Créer une audience personnalisée »
  • Choisir « Interactions »

  • Sélectionner les événements, dans la page suivante, en bas de la liste des options proposées.

Une fois que vous aurez sélectionné les événements, vous allez arriver sur un écran qui ressemble à cela :

Vous allez d’abord sélectionner la page qui vous intéresse, si vous en administrez plusieurs, puis le type de comportement qui vous intéresse (en anglais, « People wo responded Going or Interested ») durant les XXX jours écoulés.

Ensuite, plusieurs options vous sont proposées pour affiner votre liste :

  • D’abord, limiter le choix initial à « Going » ou « Interested », ce qui limitera évidemment la taille de l’audience que vous créerez.
  • Ensuite, plutôt que de vous intéresser à un unique événement, vous pouvez partir des résultats de plusieurs événements, simultanément :

  • Vous pouvez aussi utiliser une logique d’inclusion ou d’exclusion, afin d’isoler les personnes qui ont répondu à d’autres événements, sur la même page ou sur une autre page que vous gérez.

  • Vous pouvez enfin affiner votre choix de réglage en modifiant les 180 jours maximum de prise en compte prévus par défaut et en réduisant cette durée.

Comme cette audience est dynamique (elle se met à jour automatiquement chaque jour, en incluant et excluant les personnes qui répondent ou pas à vos critères de sélection), plus la durée sera courte et plus l’audience obtenue sera récente et donc « fraîche », vous donnant ainsi des données très pertinentes pour bâtir une audience similaire.

À l’inverse, plus la durée sera longue, plus l’audience sera importante, mais avec un risque de pertinence moindre.

 

Comment utiliser cette nouvelle audience ?

Voici quelques cas qui peuvent justifier l’usage de cette nouvelle audience, lorsqu’elle sera accessible sur votre compte :

  • Promouvoir un rappel d’événement auprès des personnes qui ont indiqué s’inscrire.
  • Convaincre celles qui se sont déclarées « intéressées », pour les pousser vers plus d’engagement.
  • Promouvoir un nouvel événement auprès des personnes qui se sont engagées dans un événement précédent.
  • Promouvoir des produits ou contenus liés à un événement particulier.

Comme la fonction est toute récente, il reste certainement de nombreux points à creuser et il est probable que je reviendrai sur ce sujet dans quelque temps.

D’ici là, je vous laisse tester cette nouvelle audience personnalisée, en espérant que cet article vous aura donné envie de la tester.

Et si vous ne disposez pas encore de la fonction dans votre compte publicitaire, pas de panique, elle arrivera sous peu… J

À très bientôt pour d’autres articles !