Galerie Photos Clients Shoppable — Guide complet

Présentation

Galerie Photos Clients Shoppable (dfugcgallery) affiche les photos réelles de vos clients sur la page d’accueil et sous les fiches produits, avec des hotspots cliquables qui renvoient vers les produits présents sur chaque photo. Les photos proviennent de deux sources : l’upload par vos clients connectés (acheteurs vérifiés) et l’import de vos publications Instagram via l’API officielle. Tout passe par une file de modération en back office, où vous placez également les hotspots produits.

Installation

1. Dans votre back office PrestaShop, allez dans Modules → Gestionnaire de modules → Installer un module.
2. Sélectionnez le fichier dfugcgallery.zip et validez.
3. Le module crée automatiquement ses deux tables de base de données, son onglet d’administration Galerie UGC (sous Catalogue) et son dossier de stockage d’images protégé.
4. Cliquez sur Configurer pour ouvrir les réglages.

Configuration

La page de configuration du module regroupe tous les réglages :

• Galerie page d’accueil : activation et nombre maximum de photos affichées.
• Galerie fiche produit : activation et nombre maximum de photos affichées dans le strip sous chaque fiche.
• Auto-approbation : si activée, les uploads clients sont publiés immédiatement sans modération. Les imports Instagram passent toujours par la modération, quel que soit ce réglage.
• Taille maximale par fichier : en mégaoctets, appliquée à chaque photo uploadée.
• Token Instagram : le token long-lived permettant l’import de vos publications (voir section suivante).

Connecter Instagram

L’import utilise l’API officielle « Instagram API with Instagram Login ». Une configuration unique est nécessaire :

1. Rendez-vous sur le portail développeurs Meta et créez une application de type Business.
2. Ajoutez le produit Instagram et configurez « API setup with Instagram login ».
3. Associez le compte Instagram professionnel de votre boutique.
4. Générez un token long-lived avec la permission instagram_business_basic.
5. Collez ce token dans le champ Token Instagram de la configuration du module et enregistrez.

Pour importer, ouvrez Catalogue → Galerie UGC et cliquez sur le bouton Importer depuis Instagram de la barre d’outils. Le module récupère vos publications récentes, ignore les doublons déjà importés (déduplication par identifiant de média), prend la première image des carrousels et place tout en statut « En attente ». Les vidéos et Reels sont ignorés dans cette version.

Upload par vos clients

Les clients connectés disposent d’un lien Mes photos dans leur espace client. La page d’envoi leur permet de :

• envoyer jusqu’à 5 photos par soumission (jpg, png ou webp) ;
• associer optionnellement un produit — la liste ne propose que les produits de leurs commandes valides, ce qui garantit que chaque photo taggée provient d’un acheteur vérifié ;
• ajouter une légende ;
• consulter le statut de leurs photos (en attente, approuvée, refusée) et les supprimer à tout moment.

Modération

La liste Catalogue → Galerie UGC affiche toutes les photos avec vignette, source (Upload ou Instagram), auteur, statut et date. Vous pouvez :

• filtrer par source et par statut ;
• approuver, refuser ou supprimer chaque photo en un clic depuis les actions de ligne ;
• appliquer ces actions en masse via les cases à cocher ;
• ouvrir l’éditeur de hotspots via l’action Voir.

Seules les photos approuvées apparaissent sur la boutique.

Éditeur de hotspots

L’éditeur permet d’associer des produits à des emplacements précis sur chaque photo :

1. Recherchez un produit par nom, référence ou identifiant dans le champ de recherche.
2. Sélectionnez-le puis cliquez sur la photo à l’endroit souhaité pour placer le point.
3. Glissez-déposez un point existant pour le repositionner.
4. Supprimez un point depuis la liste latérale si besoin.
5. Cliquez sur Enregistrer pour sauvegarder les positions.

Les positions sont enregistrées en pourcentage de la largeur et de la hauteur de l’image : le rendu est identique sur mobile, tablette et desktop. Côté boutique, chaque point pulse discrètement et ouvre au clic une carte produit avec le nom, le prix à jour formaté selon la devise du visiteur, l’image de couverture et un lien direct vers la fiche.

Affichage sur la boutique

• Page d’accueil : grille responsive avec badge indiquant le nombre de produits taggés par photo et bouton d’appel au partage.
• Fiche produit : strip horizontal des photos clients liées au produit consulté.
• Lightbox : plein écran, navigation par flèches et clavier, hotspots animés, préférence prefers-reduced-motion respectée.

Le JavaScript front est en vanilla, sans jQuery, et les assets ne sont chargés que sur les pages concernées. Les images sont ré-encodées en JPEG en deux tailles (1600 px et vignette 600 px) pour préserver les performances.

Dépannage

• L’import Instagram échoue : vérifiez que le token est bien un token long-lived valide associé à un compte professionnel, et que la permission de lecture des médias est accordée. Un token expiré (plus de 60 jours sans import) doit être régénéré depuis le portail Meta.
• Une photo uploadée est refusée à l’envoi : vérifiez le format (jpg, png, webp uniquement) et la taille maximale configurée.
• Les photos n’apparaissent pas sur la boutique : seules les photos au statut « Approuvée » sont affichées ; vérifiez également que la galerie concernée (accueil ou fiche produit) est activée dans la configuration.
• Multiboutique : chaque boutique gère sa propre galerie ; vérifiez le contexte boutique sélectionné dans le back office.

Désinstallation

La désinstallation supprime les tables du module, son onglet d’administration et sa configuration. Les fichiers images du dossier d’upload sont également retirés avec les photos supprimées.