Tutoriel : ajouter un viewer 3D et la réalité augmentée sur PrestaShop avec le module gratuit
Pour ajouter un viewer 3D et la réalité augmentée à PrestaShop, installez le module gratuit Visuality (PrestaShop 1.7 à 8.x), collez votre clé API dans ses paramètres, puis associez un objet 3D à chaque produit en choisissant l'affichage : viewer 3D, QR code ou les deux. La visionneuse apparaît alors directement sur la fiche produit.
Aucun engagement, aucune carte bancaire requise.
Que fait le module PrestaShop Visuality ?
Le module relie votre boutique PrestaShop à votre bibliothèque d'objets 3D Visuality. Une fois installé, il :
- ajoute un menu Visuality au back-office, avec un tableau de bord, une page Paramètres et une page Produits ;
- associe un objet 3D de votre bibliothèque à chaque produit, avec un aperçu avant enregistrement ;
- affiche sur la fiche produit la visionneuse 3D, un QR code de réalité augmentée, ou les deux ;
- choisit la langue de la visionneuse selon celle de la boutique : français pour les visiteurs francophones, anglais pour les autres ;
- gère chaque boutique séparément en mode multiboutique ;
- supprime automatiquement l'association lorsqu'un produit est supprimé.
La visionneuse s'insère dans la zone d'informations complémentaires de la fiche produit (hook displayProductAdditionalInfo), située sous le bouton d'ajout au panier dans le thème Classic. Les associations sont enregistrées dans la base de PrestaShop : l'affichage d'une fiche ne déclenche aucun appel à l'API Visuality.
De quoi avez-vous besoin avant de commencer ?
- Une boutique PrestaShop 1.7 ou 8.x et un accès au back-office avec le droit d'installer des modules.
- Un compte Visuality avec un abonnement actif ou un essai gratuit en cours.
- Vos modèles 3D au format GLB ou USDZ, importés dans votre Librairie d'objets 3D. Pas de fichier ? Générez un modèle à partir d'une photo grâce à l'IA ou commandez une modélisation sur devis.
- Votre clé API, affichée sur la page Intégration de votre compte Visuality.
Étape 1 : télécharger et installer le module
- Téléchargez le fichier visuality.zip depuis la page Intégrations de Visuality ; le téléchargement ne demande pas de compte.
- Dans le back-office PrestaShop, ouvrez Modules > Gestionnaire de modules, puis cliquez sur « Installer un module ».
- Déposez le fichier ZIP : PrestaShop installe le module et ajoute un menu Visuality dans la section Améliorer.
Étape 2 : connecter votre compte avec la clé API
- Sur visuality.fr, connectez-vous, ouvrez la page Intégration et copiez votre clé API. Ouvrir la page Intégrations
- Dans PrestaShop, ouvrez Visuality > Paramètres, collez la clé dans le champ Clé API, puis cliquez sur « Enregistrer et tester ».
- Le message « Clé API valide. Connexion établie ! » confirme la connexion, et le statut passe à Connecté.
La clé est enregistrée pour la boutique en cours : en multiboutique, répétez l'opération pour chaque boutique concernée.
Étape 3 : associer un objet 3D à chaque produit
- Ouvrez Visuality > Produits : la liste indique, pour chaque produit, s'il dispose déjà de la 3D.
- Cliquez sur « Configurer » en face du produit (ou « Modifier » s'il a déjà un objet 3D), puis sélectionnez l'objet dans votre bibliothèque.
- Choisissez le mode d'affichage : « Viewer 3D uniquement », « QR Code uniquement » ou « Les deux ».
- Ajustez si besoin les dimensions de l'iframe (largeur et hauteur, 100 % et 500 px par défaut), vérifiez la prévisualisation, puis cliquez sur « Sauvegarder l'association ».
Le mode « Les deux » est un bon choix par défaut : la visionneuse sert les visiteurs sur mobile, et le QR code permet à ceux qui naviguent sur ordinateur de passer en réalité augmentée avec leur téléphone.
Étape 4 : vérifier l'affichage sur la boutique
- Sur ordinateur : ouvrez la fiche produit, faites pivoter le modèle et testez le zoom. Si vous avez activé le QR code, scannez-le avec votre téléphone.
- Sur iPhone ou iPad : touchez le bouton de réalité augmentée ; AR Quick Look s'ouvre avec un fichier USDZ généré automatiquement par Visuality.
- Sur Android : la réalité augmentée s'ouvre dans Google Scene Viewer ou en WebXR, selon l'appareil.
- À l'échelle : vérifiez que le produit apparaît à sa taille réelle ; sinon, corrigez l'échelle de l'objet dans Visuality.
- Dans chaque langue : affichez la boutique en français puis dans une autre langue pour contrôler la langue de la visionneuse.
Rien ne s'affiche ? Vérifiez dans Apparence > Positions que le module est bien greffé sur le hook displayProductAdditionalInfo, puis videz le cache dans Paramètres avancés > Performances.
Quelles bonnes pratiques pour vos fiches produits ?
- Commencez par les bons produits : vos meilleures ventes et les articles dont la taille ou le rendu suscitent le plus de questions, comme les meubles, les luminaires, la décoration ou les objets volumineux.
- Annoncez la fonction : une courte phrase près de la visionneuse, par exemple « Voyez ce produit chez vous en réalité augmentée », incite les visiteurs à l'essayer.
- Soignez la miniature et l'échelle : une miniature nette donne envie de lancer la 3D, et une échelle exacte évite les mauvaises surprises à la livraison.
- Proposez les variantes : si un produit existe en plusieurs coloris ou finitions, créez un objet 3D par variante ou utilisez la personnalisation pour montrer chaque option.
Personnalisation produit en réalité augmentée
Module ou code iframe : que choisir ?
Le module est la méthode recommandée : il affiche automatiquement le bon objet sur chaque fiche, adapte la langue de la visionneuse et centralise les associations dans une seule page.
Le code iframe reste utile pour une page qui n'est pas une fiche produit (page CMS, landing de lancement) ou si votre thème n'appelle pas le hook displayProductAdditionalInfo. Copiez-le depuis « Visualiser / Partager » et collez-le dans l'éditeur HTML de la page. PrestaShop bloque les iframes par défaut : activez l'option « Autoriser les iframes sur les champs HTML » dans Paramètres de la boutique > Général.
Tous les détails : visionneuse 3D pour site web : iframe, lien et QR code.
Comment obtenir des modèles 3D pour vos produits ?
Le module affiche les objets de votre bibliothèque Visuality. Pour les créer, trois options s'offrent à vous :
- Importer vos fichiers : GLB ou USDZ, par exemple fournis par votre fabricant ou votre graphiste 3D. Les fichiers USD et USDZ sont convertis automatiquement en GLB à l'import.
- Générer un modèle par IA : à partir d'une simple photo du produit, avec le quota mensuel de conversions inclus dans votre formule. De la photo au modèle 3D avec l'IA
- Commander une modélisation : notre équipe réalise des modèles 3D sur mesure, sur devis. Demander un devis
Vous vendez aussi sur Shopify ? Les mêmes objets 3D peuvent être affichés sur votre boutique Shopify grâce à notre application. Découvrir l'application Shopify
Dépannage : questions fréquentes
Sources
- Paramètres généraux de la boutique (option iframes sur les champs HTML) — PrestaShop, Vérifié le 15/10/2026