Comment ajouter de l'AR aux fiches produit Shopify et WooCommerce
En bref: Pour ajouter de l'AR à une fiche produit, il vous faut un modèle 3D du produit en GLB (Android et web) et en USDZ (iPhone), à la taille réelle du produit. Shopify prend en charge les modèles 3D comme médias de produit ; sur WooCommerce ou tout autre site, vous intégrez le composant gratuit model-viewer avec les deux fichiers.
Étape 1 : créer les fichiers 3D
- Produits plats (tirages d'art, affiches, toiles, tapis, échantillons de papier peint) : importez la photo du produit dans jpgtousdz et indiquez la largeur ou la hauteur réelle. Vous obtenez un GLB et un USDZ à cette taille.
- Objets (vases, chaises, chaussures) : filmez lentement tout autour du produit et utilisez la conversion de vidéo en 3D, en indiquant la hauteur réelle.
- Gardez chaque fichier léger (textures de 2048 px ou moins) pour que la fiche produit reste rapide.
Étape 2a : Shopify
- Dans l'administration Shopify, ouvrez le produit, puis Médias, et importez le fichier GLB comme modèle 3D.
- Shopify l'affiche avec sa visionneuse 3D, et les thèmes compatibles ajoutent un bouton Voir dans votre espace sur téléphone.
- Testez le produit sur un iPhone et sur un téléphone Android. Le centre d'aide de Shopify indique les limites de taille de fichier actuelles et les thèmes compatibles.
Étape 2b : WooCommerce, WordPress ou tout site web
Importez le GLB et l'USDZ dans votre médiathèque, puis ajoutez un bloc HTML personnalisé à la description du produit avec model-viewer :
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<model-viewer src="/media/print-50x70.glb" ios-src="/media/print-50x70.usdz"
ar ar-modes="quick-look scene-viewer webxr" ar-placement="wall"
camera-controls alt="Tirage 50 x 70 cm"></model-viewer>Étape 2c : l'option sans code
Si vous ne pouvez pas modifier la page, ajoutez un bouton ou un QR code qui renvoie vers le lien de visionneuse AR jpgtousdz du produit. Il s'ouvre en AR sur iPhone et Android, sans application.
Liste de contrôle avant la mise en ligne
| Vérification | Pourquoi |
|---|---|
| La taille réelle est correcte | Les clients jugent la taille grâce à l'AR ; une mauvaise échelle provoque des retours. |
| Le placement est correct (mur ou sol) | Les œuvres vont au mur, les meubles au sol. |
| Fonctionne sur iPhone et Android | Chacun utilise un fichier différent. |
| Texte alternatif renseigné | Accessibilité et référencement. |
Essayez maintenant
Transformez une photo en USDZ et GLB à taille réelle en quelques secondes, ou une vidéo en modèle 3D. Votre première conversion de photo est gratuite.
Photo produit en ARFAQ
Shopify a-t-il besoin de l'USDZ ?
Importez le GLB dans Shopify, qui gère l'affichage. Gardez aussi un USDZ au cas où votre thème ou un autre canal en aurait besoin.
WooCommerce prend-il en charge l'AR en natif ?
Non. Utilisez une extension ou intégrez model-viewer avec des fichiers GLB et USDZ, comme indiqué ci-dessus.
Combien ça coûte ?
model-viewer est gratuit. Une conversion de photo en AR sur jpgtousdz est gratuite la première fois, puis incluse dans un abonnement. L'API coûte 0,15 $ par photo et 1,50 $ par modèle 3D de vidéo.