Toutes les plateformes / Guide
Modèle 3D et AR sur Magento et Adobe Commerce
Avec Page Builder, vous ajoutez un élément « HTML Code » dans la description du produit. Sans Page Builder, vous collez le code dans l'éditeur HTML de la description.
- Plugin / application
- Pas nécessaire
- Où coller le code
- Content → Page Builder → « HTML Code »
- AR sur mobile
- Oui, Android et iPhone
Option 1: Page Builder (Magento 2.4)
La méthode standard dans Magento 2.4.3+ et Adobe Commerce.
Étape 1
Copiez le code depuis 3DView
Connectez-vous, allez dans « Mes modèles » et, sur le modèle, cliquez sur « Code pour le site » : le code est copié aussitôt. Les onglets Shopify, WooCommerce et « Tout site » indiquent seulement où le coller ; le code est le même.
Copiez le code depuis 3DView Étape 2
Ouvrez le produit
Catalog → Products → Edit sur le produit.
Ouvrez le produit Étape 3
Ouvrez Page Builder
Ouvrez la section Content et cliquez sur « Edit with Page Builder ».
Étape 4
Faites glisser l'élément HTML Code
Dans le panneau de gauche, sous Elements, faites glisser « HTML Code » dans la description. Cliquez sur l'engrenage de l'élément, collez le code et cliquez sur Save.
Faites glisser l'élément HTML Code Étape 5
Enregistrez le produit
Fermez Page Builder, cliquez sur Save et vérifiez le produit dans la boutique.
Option 2: Sans Page Builder (éditeur WYSIWYG)
Si Page Builder est désactivé ou si vous avez une version plus ancienne.
Étape 1
Copiez le code depuis 3DView
Connectez-vous, allez dans « Mes modèles » et, sur le modèle, cliquez sur « Code pour le site » : le code est copié aussitôt. Les onglets Shopify, WooCommerce et « Tout site » indiquent seulement où le coller ; le code est le même.
Copiez le code depuis 3DView Étape 2
Passez en HTML
Dans la section Content, sous Description, cliquez sur « Show / Hide Editor » pour voir le code HTML.
Passez en HTML Étape 3
Collez le code et enregistrez
Collez le code et cliquez sur Save.
Collez le code et enregistrez
Le code à coller
Voici le code copié depuis 3DView (chez vous, l'ID du modèle remplace MODEL_ID). Vous pouvez changer la hauteur (height:480px) ; ne modifiez pas le reste. Ajoutez ?controls=0 après l'ID pour masquer la barre de réglages sous le modèle.
<iframe src="https://www.3dview.ai/embed/MODEL_ID" title="Canapé Oslo" loading="lazy" allow="xr-spatial-tracking; fullscreen; accelerometer; gyroscope" allowfullscreen style="width:100%;height:480px;border:0;border-radius:12px"></iframe>
Comment vérifier que ça fonctionne
- Sur ordinateur : le modèle se charge, tourne à la souris, et le bouton « Voir sur le téléphone » affiche un code QR pour l'AR.
- Sur Android (Chrome) : touchez le bouton AR dans le coin du modèle. La visionneuse AR de Google s'ouvre et vous placez le produit dans la pièce, en taille réelle. Le téléphone doit être compatible ARCore.
- Sur iPhone/iPad (Safari) : touchez le bouton AR. AR Quick Look s'ouvre, sans aucune application.
- Testez depuis Safari ou Chrome, pas depuis le navigateur intégré de Facebook/Instagram : l'AR n'y démarre pas.
- Après l'enregistrement, videz le cache : System → Cache Management → Flush Magento Cache (si vous ne voyez pas le changement).
Problèmes fréquents et solutions
La console du navigateur affiche une erreur Content Security Policy
Votre boutique a une CSP en mode restrictif. Le développeur ajoute https://www.3dview.ai à frame-src (dans le csp_whitelist.xml du thème ou d'un module).
Le modèle apparaît sur tous les produits
Vous l'avez placé dans le modèle de page, pas dans la description du produit. Mettez l'élément HTML Code dans Content sur chaque produit.
Le code disparaît ou devient du texte après l'enregistrement
L'éditeur l'a nettoyé : collez le code en mode HTML / code source, pas en mode visuel (les étapes ci-dessus indiquent le bouton exact). S'il disparaît encore, la plateforme n'autorise pas les iframes : utilisez le lien et le code QR de « Partager / QR ».
Le modèle est trop petit ou coupé
Augmentez la hauteur dans le code : height:480px devient par exemple height:600px. La largeur (100 %) s'adapte toute seule à la colonne. Sur mobile, 400–500px suffisent en général.
Le bouton AR n'apparaît pas ou ne démarre pas sur iPhone
L'AR sur iPhone demande Safari (ou Chrome sur iOS) et un iPhone/iPad sous iOS 12 ou plus récent. 3DView prépare automatiquement la version iPhone (USDZ). Ouvrez directement le lien du modèle (bouton « Voir en AR » dans votre compte) : si ça marche là, votre plateforme bloque l'AR dans les cadres intégrés ; ajoutez sous le modèle un lien « Voir en AR » vers ce lien.
Le navigateur signale un « contenu non sécurisé » ou le modèle ne se charge pas
Ne remplacez pas l'adresse du code par http://. Sur un site https, les navigateurs bloquent les cadres http (contenu mixte). Laissez l'adresse telle quelle : https://www.3dview.ai/embed/…
Le logo 3DView apparaît sur le modèle
Vous le retirez par modèle, depuis votre compte : « Retirer le logo », un paiement unique en crédits. Le code reste le même.
Est-ce que ça ralentit la page ?
Non : le code contient loading="lazy", le modèle ne se charge donc que lorsqu'il arrive à l'écran. L'hébergement est inclus, sans abonnement.
Illustrations simplifiées, pas des captures d'écran ; les menus peuvent être un peu différents dans votre version.
Questions fréquentes
Ai-je besoin d'une extension Magento ?
Non. L'élément HTML Code de Page Builder est inclus.
Ça marche sur Magento Open Source ?
Oui. Page Builder est inclus depuis la 2.4.3 ; avant, utilisez l'option avec l'éditeur WYSIWYG.
Vous n'avez pas encore de modèle 3D ?
Scannez le produit avec votre téléphone ou partez d'une photo. Code pour le site, lien avec QR et AR inclus.
Créer votre premier modèle