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 !

0 réponses

Répondre

Se joindre à la discussion ?
Vous êtes libre de contribuer !

Laisser un commentaire