embed 3DShopifyWordPressWebflowe-commerce

Comment intégrer un viewer 3D sur son site web (Shopify, WordPress, Webflow)

2 juin 20267 minPierre Chabot

Guide pas à pas pour ajouter un viewer 3D interactif à votre site. Compatible Shopify, WordPress, Webflow et tout CMS avec iFrame.

Afficher un produit en 3D interactif sur sa fiche aide l'acheteur à juger la taille, la finition et les proportions avant d'acheter. Les données de Shopify sur le commerce 3D/AR sont concrètes : la marque Rebecca Minkoff a constaté que les acheteurs ayant manipulé un produit en 3D étaient 44 % plus enclins à l'ajouter au panier et 65 % plus enclins à commander. Bonne nouvelle : pas besoin de développeur. OmniView 3D vous donne un iFrame standard à coller dans Shopify, WordPress, Webflow ou tout CMS acceptant du HTML. Voici le déroulé complet.

Ce dont vous avez besoin

Un fichier 3D de votre produit (GLB, STEP, FBX, OBJ ou STL)
Un compte OmniView 3D (le plan Starter gratuit suffit pour démarrer)
Un accès à l'éditeur de votre CMS

Étape 1 : Uploader votre modèle 3D

Connectez-vous à OmniView 3D et glissez-déposez votre fichier. La conversion prend moins de 60 secondes et vous obtenez un viewer interactif avec un code iFrame prêt à copier. Le modèle est privé par défaut : rien n'est public tant que vous n'avez pas placé l'intégration vous-même. Pour un chargement rapide en boutique, gardez un GLB léger — voir réduire la taille d'un fichier GLB pour le web.

Étape 2 : Récupérer le code d'intégration

Depuis le viewer, cliquez sur « Partager » puis « Code d'intégration ». Vous obtenez un snippet iFrame du type : <iframe src="https://omniview3d.com/view/votre-id" width="100%" height="500" loading="lazy"></iframe>. Copiez-le. L'attribut loading="lazy" laisse le navigateur différer le chargement du cadre jusqu'à ce qu'il approche de l'écran, ce qui le garde hors du chemin critique.

Où coller l'intégration, par plateforme

Plateforme	Où l'ajouter	Élément / bloc	Remarques
Shopify	Boutique en ligne → Thèmes → Personnaliser	Bloc « HTML personnalisé » ou bloc Liquid	Aucune app Shopify requise
WordPress	Éditeur Gutenberg	Bloc « HTML personnalisé »	Une voie plugin/shortcode existe aussi — voir le guide WordPress
Webflow	Designer → panneau Add	Élément « Embed »	Réglez la hauteur sur 500-600px
Tout CMS	Éditeur de page ou HTML	Snippet iFrame brut	Fonctionne partout où le HTML brut est autorisé

Intégration sur Shopify

1Allez dans Boutique en ligne > Thèmes > Personnaliser
2Ouvrez la fiche produit et ajoutez un bloc « HTML personnalisé »
3Collez le code iFrame dans le bloc
4Sauvegardez, le viewer 3D apparaît sur la fiche

Intégration sur WordPress

1Ouvrez l'éditeur de blocs Gutenberg
2Ajoutez un bloc « HTML personnalisé » (cherchez « HTML » dans l'explorateur de blocs)
3Collez le code iFrame
4Publiez ou mettez à jour la page

Si vous gérez beaucoup de pages WordPress et préférez un shortcode réutilisable plutôt que de coller du HTML à chaque fois, voir le guide dédié viewer 3D WordPress : plugin, iFrame et shortcode.

Intégration sur Webflow

1En mode Designer, ajoutez un élément « Embed » depuis le panneau Add
2Collez le code iFrame dans la zone de code
3Ajustez la hauteur selon vos besoins (recommandé : 500-600px)
4Publiez le site

Conseils pour maximiser la conversion

Placez le viewer 3D above the fold, visible sans scroll sur desktop
Utilisez le mode Hologramme (fond noir) pour les produits haut de gamme — voir le viewer 3D luxe et mode
Activez la vue éclatée sur les assemblages complexes
Testez sur mobile, le viewer est optimisé tactile
Peur pour la vitesse ? Un iFrame lazy-loaded ne bouge quasiment pas les Core Web Vitals — voir un viewer 3D ralentit-il votre site

Créer mon code d'intégration gratuitement

Questions fréquentes

Faut-il un développeur pour intégrer un viewer 3D ?

Non. OmniView 3D fournit un snippet iFrame prêt à l'emploi. Vous le collez dans un bloc « HTML personnalisé » (Shopify, WordPress) ou un élément « Embed » (Webflow), ou dans tout champ de CMS acceptant du HTML. Aucune ligne de code à écrire.

Un viewer 3D va-t-il ralentir mon site ?

Pas de façon notable si vous le chargez en lazy-load. L'iFrame porte l'attribut loading="lazy" : le navigateur le diffère jusqu'à ce qu'il approche de l'écran et le garde hors du chemin de rendu critique. Voir notre analyse Core Web Vitals dans « un viewer 3D ralentit-il votre site ».

Le viewer intégré fonctionne-t-il sur mobile ?

Oui. Le viewer est responsive et optimisé pour le tactile : les visiteurs tournent et zooment au doigt sur téléphone et tablette, comme à la souris sur ordinateur.

Quels formats de fichiers puis-je intégrer ?

Tous les formats lus par OmniView 3D : GLB/GLTF, STEP, IGES, FBX, OBJ, STL et d'autres. Pour une boutique, le GLB avec matériaux PBR offre la meilleure qualité visuelle et le fichier le plus léger pour l'affichage web.

Sources & références