Prestashop 1.7 – Super galerie photo avec Fancybox (ép. 82)

Les galeries photos ça fait pas trop années 2000 ? Et bien non, je constate que beaucoup de marchands sous Prestashop veulent pouvoir proposer une galerie d’images… alors je vous montre une méthode qui ne vous coûtera pas 1 seul centime.

Une galerie photo c’est pas encore démodé ?

En fait dans un site e-commerce, il y a souvent des compléments qu’il faut ajouter pour rassurer vos clients. Par exemple vous pouvez imaginer d’avoir une page de galerie photos avec vos réalisations, des photos des membres de l’entreprise, peut-être aussi des photos des événements que vous avez déjà créés ou auxquels vous avez participés. La galerie photo permet d’insuffler de la vie à votre e-commerce et va augmenter votre crédibilité… il faut juste l’utiliser à bon escient.

La règle importante pour instaurer la confiance

Régulièrement quand je vois des galeries photos sur des sites, cela me fait un peu peur… Les 2 cas les plus fréquents que je vois : par exemple il n’y a aucune « unité » entre les photos (patchwork géant)… ou alors la « qualité » date parfois de 10 ans en arrière. Il est préférable de proposer peut-être moins de photos dans vos galeries, mais de refaire des photos récentes de manière plus « uniforme »… surtout qu’à présent avec n’importe quel smartphone + éventuellement un filtre, on peut tous faire de belles photos.

Utiliser plutôt Instagram à la place ?

Alors oui, personnellement j’utilise Instagram chez certains e-commerçant et je relie ça directement au shop… mais il y a quelques inconvénients quand même. Les images sont stockées hors du shop, c’est plus compliqué pour faire des galeries multiples… et forcément le contenu n’est pas pris dans la sauvegarde de l’hébergement. Avec la méthode que je propose via page CMS et intégration en mode HTML vous avez 100% le contrôle sur le contenu (aussi sur l’ordre d’affichage, taille des photos)… même si ça vous demande un peu plus de travail pour la mise en oeuvre.

Faut-il indexer la page CMS galerie Prestashop ?

Cela va dépendre de comment est structuré le code HTML de la page, si vous faites vraiment le « minimum » comme je le montre dans le tutoriel ci-dessous… je conseille de ne pas indexer la page. En revanche, si vous mettez dans votre page un texte d’introduction et que sur chaque image de la galerie vous remplissez la balise « alt », alors là ça peut être intéressant. La galerie photo est souvent intéressante pour l’internaute, mais pour le référencement un peu moins (éventuellement pour se positionner dans Google image, c’est toujours ça de pris).

La galerie que vous devez absolument avoir !

En fait à mon sens la plus important pour chaque e-commerçant, c’est d’avoir une galerie photo qui présente votre entreprise. Par exemple d’avoir une photo de l’endroit où vous travaillez (vue extérieure), de votre bureau… une photo de votre stock, une autre de vous qui faites les colis. Cela permettra de faire 2 choses, de crédibiliser et de montrer que vous êtes une véritable entreprise (même si vous êtes tout seul) et aussi d’humaniser afin de créer un lien avec l’internaute qui ne vous connaît pas encore.

Pour ce tutoriel vous avez à disposition :

• 9 x images pour créer la galerie
• 1 x fichier page.tpl
• 1 x fichier custom.css
• 1 x fichier gallery.html

Télécharger

Résumé de la vidéo : Intégrer sur Prestashop une jolie galerie photos

• Avant tout il faut comprendre le concept de Fancybox.
• Ensuite, on va modifier le fichier TPL de la page CMS pour inclure les librairies qui vont permettre d’afficher la galerie photo (par la même occasion on verra l’utilisation du « block » Smarty).
• Les photos sont à transférer sous « /img/gallery/ » idéalement assurez-vous d’avoir toujours des photos de même dimensions, retaillez-les si nécessaire.
• L’étape suivante consiste à coder un fichier HTML simple puis à copier le code source dans la page CMS Prestashop. Attention, il faut absolument que vous désactiviez la fonction HTML Purifier de Prestashop.
• Et enfin la touche finale, on copie-colle les règles du fichier CSS, on vide le cache du navigateur et « magie » la galerie s’affiche proprement avec les bonnes dimensions.