Vous êtes d’accord qu’avoir 2 yeux c’est pratique ? Hum, mais si je vous disais qu’on va vous greffer un 3ème oeil pour que vous puissiez voir « encore mieux » sur votre boutique Prestashop vous seriez content ? C’est ce qu’on va faire aujourd’hui.

Hum, je ne vois pas bien l’image !

Est-ce que vous vous êtes déjà fait cette réflexion ? Vous êtes sur un site et vous ne voyez pas bien l’image, c’est trop petit, vous aimeriez pouvoir zoomer mais vous ne pouvez pas… aie c’est frustrant.

Parfois on cherche à zoomer pour voir en détail un produit, mais aussi dans certains cas pour lire du texte incrusté dans l’image et si l’image n’est pas zoomable c’est « mission impossible ».

L’insertion des images dans Prestashop

En principe ça se fait assez facilement et naturellement sur les fiches produits, mais là où ça se complique c’est surtout quand vous voulez ajouter des images dans la description courte et longue du produit.

Premièrement l’image s’ajuste rarement proprement, elle déborde et n’est pas responsive… puis si on essaye de la calibrer à la bonne taille (largeur & auteur), on ne voit plus rien l’image est trop petite.

Le cas de figure est plus ou moins similaire aussi dans les pages CMS de Prestashop, la mise en forme de ces pages est souvent désastreuse. Restez avec un code HTML simple et maintenable.

Envie de « retripatouiller » vos fiches Prestashop ? Hoooo que non !

Quand on veut améliorer l’ergonomie d’une boutique Prestashop, la pire des choses est de devoir reprendre manuellement le contenu déjà en place et adapter le code de chaque page (réviser toutes les fiches produits c’est le bad trip des e-commerçants).

C’est pour cela qu’en regardant sur le web je suis tombé sur jQuery Zoom qui permet d’accomplir de véritables miracles. La librairie est assez intelligente pour proposer un zoom automatique sur les images d’une page sans devoir les encapsuler manuellement une à une avec du code spécifique.

Même pour le mobile first ça fonctionne !

Comme un utilisateur sur deux est sur mobile, il est important que l’accessibilité soit aussi au top sur ce type de format et bonne nouvelle… la librairie Javascript réagit lors du positionnement du doigt sur l’image, c’est vraiment intuitif.

C’est encore mieux que les systèmes de popup à la sauce Thickbox, parce que dès que vous retirez votre doigt de l’image, le dézoome se fait automatiquement (vous n’avez pas besoin de cliquer / décliquer). Cela semble un détail, mais au niveau UX l’expérience est vraiment intéressante.

Quelques « petites » règles à suivre pour les images

Très souvent chez les e-commerçants la gestion des images n’est pas très rationalisée. Pensez à ne jamais inclure de liens externes vers des images stockées à distance, rapatriez-les toujours sur votre propre serveur (comme montré dans la vidéo).

Idéalement, essayez de nommer vos images de manière explicite avec un nom clair, afin que sur le FTP de votre serveur vous puissiez en identifier le contenu sans même les ouvrir.

En ce qui concerne la résolution privilégiez des images qui font au moins 1024 pixels de largeur et pour l’emplacement des images, pensez à les stocker toujours dans le même dossier pour vous y retrouver facilement.

Pour ce tutoriel Prestashop vous avez à disposition :

• jquery.zoom.min.js (la librairie zoom)
• layout-both-columns.tpl.tpl (pour charger la libraire)
• 1 x custom.css (pour ajuster la taille des images)
• 1 x custom.js (pour déclencher l’action zoom)

Télécharger

Résumé de la vidéo : Un module Zoom Prestashop gratuit 100% natif

• On commence par insérer une image dans Prestashop pour voir ce que ça donne… et le résultat est assez « brut » si on ne fait rien.
• Ensuite, on intègre la librairie Zoom et on déclenche une action Javascript dans la fiche produit, l’effet est immédiat et rend l’image 100% accessible.
• Sur le mobile la fonction zoom est aussi automatiquement active.
• Pour les pages CMS Prestashop on fait la même chose, facile en 5 lignes de code tout fonctionne.
• Raisonnez en « mono-colonne », en affichant des images l’une sous l’autre, nous sommes à l’ère du mobile… c’est ce support qui définit les règles principales à suivre.