Les 3 approches d'intégration AR sur un e-commerce
1. WebAR natif via le navigateur (approche recommandée)
Le WebAR utilise les APIs natives des navigateurs mobiles (WebXR sur Chrome, Quick Look sur Safari iOS) pour afficher des modèles 3D en réalité augmentée directement depuis le navigateur. Aucune application à télécharger.
Avantages : Taux d'utilisation maximal (pas de friction), compatible 85 % des smartphones, facile à déployer et mettre à jour.
Inconvénients : Moins de fonctionnalités que l'AR native, rendu légèrement moins performant sur les appareils bas de gamme.
2. Application native AR
Une application iOS/Android dédiée utilise ARKit (Apple) ou ARCore (Google) pour une expérience AR plus fluide et complète. Réservée aux marques avec une base clients fidèle qui télécharge l'application.
3. Iframe AR ou SDK JavaScript
Des solutions comme model-viewer (Google), 8thWall, Zappar ou la solution Ogmentis s'intègrent via une balise `
Intégration sur les principales plateformes e-commerce
Shopify
Shopify supporte nativement le WebAR depuis 2019. L'intégration se fait en 3 étapes :
- Uploader le fichier GLB (Android) et/ou USDZ (iOS) dans la section "Médias" de la fiche produit.
- Shopify affiche automatiquement le bouton "Voir en AR" sur les appareils compatibles.
- Pour une expérience avancée (configurateur, analytics) : installer une app Shopify AR partenaire.
WooCommerce (WordPress)
L'intégration WooCommerce se fait via un plugin AR dédié ou en ajoutant la balise `
Prestashop
Un module Prestashop ou une modification du template de fiche produit permet d'afficher le viewer 3D AR. La complexité dépend de la version de Prestashop et du thème utilisé.
Site sur mesure (React, Vue, Angular)
Intégration via la bibliothèque `@google/model-viewer` ou le SDK Ogmentis. Quelques lignes de code suffisent pour afficher un modèle 3D avec bouton AR sur n'importe quelle page :
| Plateforme | Méthode d'intégration | Difficulté | Temps estimé |
|---|---|---|---|
| Shopify | Upload natif GLB/USDZ | Très facile | 15 min par produit |
| WooCommerce | Plugin AR | Facile | 1–2 heures (setup) |
| Prestashop | Module ou template | Moyenne | 2–4 heures |
| Site custom React/Vue | SDK JavaScript | Technique | 4–8 heures |
| Site custom PHP/HTML | Balise model-viewer | Facile | 1–3 heures |
Formats 3D : ce qu'il faut préparer
Le WebAR nécessite des fichiers 3D dans des formats spécifiques selon le système d'exploitation :
| Format | Compatible avec | Taille recommandée | Notes |
|---|---|---|---|
| GLB (GLTF binaire) | Android Chrome, desktop | < 15 MB | Format universel, recommandé |
| USDZ | iOS Safari, macOS | < 20 MB | Format natif Apple AR Quick Look |
| GLTF (non binaire) | Navigateurs desktop | < 10 MB | Moins adapté au mobile (fichiers séparés) |
Bonnes pratiques UX pour maximiser l'utilisation AR
La présence d'un bouton AR sur une fiche produit ne garantit pas son utilisation. Les bonnes pratiques pour maximiser le taux d'activation :
- Placer le bouton AR près du bouton "Ajouter au panier" — Le moment d'hésitation est l'opportunité AR.
- Afficher une preview du rendu 3D — Un visuel 3D rotatif sur la fiche produit incite à tester la AR.
- Indiquer clairement "Voir chez moi" ou "Tester dans votre espace" — Les libellés explicites convertissent mieux que "AR" ou "3D".
- Trigger automatique sur mobile — Détecter automatiquement la visite mobile et afficher une bannière incitative.
- Expérience de partage — Permettre de faire une capture d'écran et de la partager facilement.
Optimisation des performances AR
Un modèle 3D trop lourd qui met 8 secondes à charger sera abandonné par 70 % des utilisateurs. Les optimisations indispensables :
- Compression des textures avec Draco ou Basis Universal (KTX2)
- Réduction du nombre de polygones (LOD — Level of Detail)
- Hébergement sur un CDN géodistribué (< 500 ms de latence)
- Lazy loading des assets 3D (ne charger que sur interaction)
- Progressive loading : version basse résolution en premier
5 points clés à retenir
- Sur Shopify, l'intégration WebAR est native en uploadant simplement les fichiers GLB et USDZ dans la fiche produit.
- Il faut deux formats 3D pour une couverture maximale : GLB (Android) et USDZ (iOS).
- Le bouton AR doit être placé près du bouton "Ajouter au panier" pour maximiser le taux d'utilisation.
- La taille des modèles 3D doit être inférieure à 15 MB pour éviter les abandons lors du chargement.
- Un CDN est indispensable : les modèles 3D hébergés "dans le cloud" avec distribution géographique chargent 3 à 5× plus vite que sur un hébergement mutualisé.
Questions fréquentes
Intégrez la AR sur votre site e-commerce
Ogmentis prend en charge l'intégration complète : modélisation 3D de vos produits, setup WebAR, intégration Shopify/WooCommerce/Prestashop, optimisation des performances.
Discuter de votre intégration