Tutoriel : ajouter un viewer 3D et la réalité augmentée à une fiche produit Shopify
Pour ajouter un viewer 3D et la réalité augmentée à une fiche produit Shopify, installez l'application Visuality depuis le Shopify App Store, associez un modèle 3D au produit, puis ajoutez le bloc « Visuality 3D Viewer » dans l'éditeur de thème. Sans l'application, vous pouvez aussi coller le code iframe de Visuality dans la description du produit.
Quelle méthode choisir pour ajouter la 3D sur Shopify ?
Deux méthodes permettent d'afficher une visionneuse Visuality sur Shopify. Le tableau ci-dessous résume leurs différences pour vous aider à choisir avant de commencer.
| Critère | Application Visuality | Code iframe Visuality |
|---|---|---|
| Thèmes compatibles | Thèmes Online Store 2.0, comme Dawn | Tous les thèmes, y compris les anciens thèmes « vintage » |
| Mise en place | Installation depuis le Shopify App Store, puis ajout d'un bloc au thème | Copier-coller dans chaque fiche produit, ou un bloc Liquid personnalisé |
| Affichage par produit | Automatique sur chaque produit associé à un objet 3D | Fiche par fiche, ou automatique grâce à un métachamp |
| Modes d'affichage | Viewer 3D, QR code, ou les deux | Iframe et QR code, à coller séparément |
| Code à écrire | Aucun | Aucun dans la description ; quelques lignes de Liquid pour un bloc automatique |
| Abonnement | Facturé par Shopify, en dollars US | Abonnement Visuality souscrit sur visuality.fr |
De quoi avez-vous besoin avant de commencer ?
- Une boutique Shopify et un accès administrateur, pour installer une application et modifier le thème.
- Un modèle 3D par produit, au format GLB ou USDZ. Pas de fichier ? Visuality peut le générer à partir d'une photo grâce à l'IA, vous guider pour un scan avec RealityScan ou réaliser une modélisation sur devis.
- Les dimensions réelles du produit, pour vérifier qu'il s'affiche à la bonne taille en réalité augmentée.
- Un smartphone, idéalement un iPhone et un appareil Android, pour tester la réalité augmentée.
Guides utiles : générer un modèle 3D par IA · scanner un objet avec RealityScan · formats GLB et USDZ
Méthode 1 : installer l'application Visuality (recommandée)
L'application Visuality est disponible sur le Shopify App Store depuis mai 2026. Elle relie votre boutique à votre bibliothèque d'objets 3D et ajoute un bloc de thème qui s'affiche sur chaque produit associé.
Étape 1 : installer l'application et choisir une formule
Ouvrez la fiche Visuality sur le Shopify App Store, cliquez sur Installer et autorisez l'accès à vos produits. Dans l'application, choisissez ensuite votre formule : Shopify gère le paiement et votre compte Visuality est créé automatiquement, sans clé API à saisir. Tarifs et essai gratuit de l'application
Étape 2 : ajouter vos objets 3D
Sur la page Configuration de l'application, cliquez sur « Ouvrir mon espace » : vous êtes connecté à visuality.fr en un clic. Dans la Librairie d'objets 3D, cliquez sur « Ajouter un Objet » pour importer un fichier GLB ou USDZ, ou pour générer un modèle à partir d'une photo.
Avant de revenir dans Shopify, réglez l'échelle de l'objet pour qu'il apparaisse à sa taille réelle, et choisissez le placement au sol ou au mur. Le fichier USDZ utilisé par l'iPhone est généré automatiquement sur nos serveurs quelques instants après l'import. Régler la taille d'un objet 3D
Étape 3 : associer un objet à chaque produit
Dans l'onglet Produits de l'application, ouvrez un produit, sélectionnez l'objet 3D correspondant et choisissez le mode d'affichage :
- Viewer 3D : la visionneuse interactive est intégrée à la fiche produit.
- QR Code : seul un QR code s'affiche ; le client le scanne pour voir le produit en réalité augmentée sur son téléphone.
- Les deux : la visionneuse, avec le QR code en dessous pour les visiteurs sur ordinateur.
Enregistrez. La configuration est stockée dans un métachamp du produit que le thème lit directement : l'affichage de la fiche ne dépend d'aucun appel supplémentaire à l'application.
Étape 4 : ajouter le bloc « Visuality 3D Viewer » au thème
- Dans l'administration Shopify, ouvrez Boutique en ligne > Thèmes, puis cliquez sur Personnaliser.
- En haut de l'éditeur, changez de page : sélectionnez Produits > Produit par défaut.
- Dans la barre latérale gauche, section Modèle, cliquez sur Ajouter un bloc.
- Dans la liste, sous Applications, sélectionnez Visuality 3D Viewer.
- Placez le bloc où vous le souhaitez, par exemple sous la galerie de photos ou sous le bouton d'ajout au panier, puis cliquez sur Enregistrer.
Le bloc s'affiche automatiquement sur tous les produits qui ont un objet 3D associé. Si certains produits utilisent un autre modèle de page, répétez l'opération sur ce modèle.
Méthode 2 : coller le code iframe de Visuality
Cette méthode convient aux anciens thèmes, qui n'acceptent pas les blocs d'applications, ou si vous avez déjà un abonnement Visuality souscrit sur visuality.fr.
Récupérer le code
Dans votre Librairie d'objets 3D, cliquez sur « Visualiser / Partager ». La page propose un lien d'accès, un QR code, le code HTML de ce QR code et, dans la rubrique « Intégration directe sur votre site (Iframe) », le code de la visionneuse. Cliquez sur « Copier dans le presse-papier ».
Option A : dans la description du produit
- Dans l'administration Shopify, ouvrez Produits et sélectionnez le produit.
- Dans l'éditeur de la description, cliquez sur le bouton Afficher le HTML (icône <>).
- Collez le code iframe à l'endroit voulu, puis enregistrez le produit.
Pour un affichage qui occupe toute la largeur de la description, avec un chargement différé, vous pouvez enrichir le code ainsi :
<iframe src="https://visuality.fr/viewer/object/VOTRE-ID"
title="Visionneuse 3D du produit"
width="100%" height="500"
style="border: 0;"
loading="lazy"
allow="xr-spatial-tracking; fullscreen"
allowfullscreen></iframe>Option B : dans un bloc Liquid personnalisé, pour tout le catalogue
Pour ne pas modifier chaque description, créez dans les paramètres de données personnalisées de Shopify un métachamp de produit de type URL, par exemple custom.visuality_url. Renseignez-y l'adresse de la visionneuse de chaque produit, puis ajoutez au modèle de produit un bloc Liquid personnalisé contenant ce code :
{% if product.metafields.custom.visuality_url != blank %}
<iframe src="{{ product.metafields.custom.visuality_url.value }}"
title="3D viewer"
width="100%" height="500"
style="border: 0;"
loading="lazy"
allow="xr-spatial-tracking; fullscreen"
allowfullscreen></iframe>
{% endif %}La visionneuse ne s'affiche alors que sur les produits dont le métachamp est rempli : les autres fiches restent inchangées.
Le détail de l'intégration par iframe, vidéo à l'appui, se trouve dans la documentation : intégrer la visionneuse 3D sur une page.
Et la 3D native de Shopify ?
Shopify sait aussi afficher des modèles 3D importés dans les médias d'un produit, au format GLB ou USDZ, et en dérive une version USDZ pour l'iPhone. Cette option est intégrée à Shopify et ne demande pas d'abonnement supplémentaire, mais elle suppose de disposer déjà de fichiers 3D prêts à l'emploi et d'un thème qui affiche les médias 3D.
Lire le comparatif détaillé : Visuality ou la 3D native de Shopify
Comment vérifier que tout fonctionne ?
- Sur ordinateur : la visionneuse se charge, le modèle pivote à la souris et le zoom fonctionne. Si vous avez choisi 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 et le produit se pose sur une surface horizontale (le placement au mur fonctionne pour l'instant sur Android uniquement).
- Sur Android : la réalité augmentée s'ouvre dans Google Scene Viewer ou en WebXR, selon l'appareil.
- À l'échelle : comparez l'objet virtuel avec un meuble ou un mètre posé à côté. En cas d'écart, corrigez l'échelle dans Visuality.
- Vitesse de la page : vérifiez que la fiche produit reste fluide sur un smartphone d'entrée de gamme, en 4G comme en Wi-Fi.