Shopify Modèles de produits 3D : GLB, AR et guide de flux de travail de la visionneuse

“

TL;DR

• Shopify prend en charge nativement les modèles de produits 3D : aucune application n'est requise pour les afficher ou activer AR.
• Shopify accepte les modèles GLB et USDZ. Un flux de travail GLB-first est pratique car Shopify crée le format compagnon nécessaire pour les appareils compatibles.
• Le véritable goulot d'étranglement n'est souvent pas la performance, mais l'obtention d'un modèle 3D. Vous pouvez en créer, en générer ou en externaliser un.
• Optimiser avant le téléchargement : gardez le nombre de polygones et la taille des textures à un niveau raisonnable afin que le mobile reste rapide.
• Choisissez votre voie : médias 3D natifs (gratuits) pour la plupart des magasins ; une application tierce ou un visualiseur/configurateur Liquid personnalisé pour les besoins avancés.

Shopify prend en charge les modèles de produits 3D comme support de produit, permettant aux acheteurs de faire pivoter un modèle sur la page du produit et d'utiliser AR sur les téléphones compatibles. La partie la plus difficile est généralement d'obtenir un modèle 3D approprié. Ce guide couvre le flux de travail depuis la création et l'optimisation du modèle jusqu'au téléchargement, la configuration de la visionneuse et les tests mobiles.

Fonctionnement des modèles de produits 3D sur Shopify

Shopify prend en charge les modèles 3D en tant que support de produit natif aux côtés des images et des vidéos. Un thème compatible peut afficher le modèle dans la galerie de produits sans nécessiter une application de vitrine distincte.

Les acheteurs peuvent faire pivoter, zoomer et inspecter le modèle dans le navigateur. Sur les appareils mobiles pris en charge, la page produit peut également proposer "Afficher dans votre espace" afin que l'article puisse être placé dans l'environnement de l'acheteur via AR.

Shopify accepte les modèles de produits GLB et USDZ et traite un modèle téléchargé afin que les formats compatibles soient disponibles sur tous les appareils. Ce guide utilise un flux de travail GLB d'abord, car GLB regroupe la géométrie, les matériaux et les textures dans un seul fichier. Vérifiez les exigences actuelles en matière de supports de produits de Shopify avant la livraison.

D'où viennent vos modèles 3D ?

Vous pouvez construire un modèle, en générer un avec AI ou faire appel à un artiste 3D. Choisissez en fonction de la précision requise du produit, de la taille du catalogue, du budget et du calendrier de lancement.

Fabriquez-les vous-même : Blender ou CAD

Blender et CAD offrent le meilleur contrôle sur les dimensions, la topologie, les UV et les matériaux. Cette voie convient aux produits et aux articles axés sur l'ingénierie qui doivent correspondre à des mesures exactes, mais elle nécessite une expertise en modélisation et plus de temps de production.

Générer avec AI

Pour une itération plus rapide, Tripo Image to 3D peut transformer une image de produit en un point de départ 3D. Les résultats doivent toujours être vérifiés par rapport au produit réel, en particulier pour les surfaces cachées, les pièces minces, la symétrie et l'échelle exacte.

Un flux de travail typique est simple :

1. Téléchargez une photo du produit (ou saisissez une invite de texte).
2. Générez le modèle 3D avec AI.
3. Vérifiez et affinez le résultat si nécessaire.
4. Exportez le modèle sous GLB et téléchargez-le vers Shopify.

Cette procédure peut raccourcir la production pour les catalogues volumineux, mais les produits complexes ou dont les dimensions sont critiques peuvent nécessiter un nettoyage manuel avant d'être adaptés à la 3D destinée au client ou à AR.

Acheter ou externaliser

Les actifs existants peuvent fonctionner pour des produits génériques, tandis que les marchandises uniques nécessitent généralement un modèle commandé. Demandez une échelle réelle, des matériaux PBR, une topologie propre et un livrable compatible Shopify.

AI est utile lorsque la vitesse et la couverture du catalogue sont importantes ; la modélisation manuelle ou le raffinement professionnel sont plus sûrs lorsque la précision dimensionnelle ou une qualité de gros plan supérieure sont essentielles. Un flux de travail hybride peut combiner une génération rapide avec un nettoyage ciblé par les artistes.

Optimisez le modèle avant de le télécharger

Les modèles Web doivent équilibrer la qualité visuelle avec la taille du téléchargement et les performances de l'appareil. Vérifiez la géométrie, les textures, l'échelle, l'orientation et l'origine avant le téléchargement.

Polygones et taille du fichier

Supprimez la géométrie qui n'améliore pas la silhouette du produit ou les détails visibles. Les maillages de faible complexité se téléchargent et s’affichent généralement plus efficacement sur le matériel mobile.

Pour les maillages denses ou générés par AI, Tripo Smart Mesh peut créer une topologie plus propre et à polygones inférieurs pour les flux de travail Web3D et en temps réel. Compressez les textures et utilisez Draco uniquement lorsque le pipeline complet d'exportation et de visualisation le prend en charge.

Shopify accepte actuellement les téléchargements de modèles 3D jusqu'à 500 Mo et optimise automatiquement les fichiers de plus de 15 Mo. Considérez 15 Mo comme un seuil d'optimisation, et non comme une limite de téléchargement, et vérifiez les exigences actuelles dans la documentation multimédia du produit Shopify.

Échelle et orientation du monde réel

Des unités, une orientation ou un placement d'origine incorrects peuvent donner l'impression qu'un produit est trop grand, trop petit ou mal positionné dans AR.

Exportez à l'échelle réelle, confirmez les axes ascendant et avant du modèle et placez l'origine à un point de contact logique tel que le centre de la base. Testez le résultat sur les surfaces où les clients sont susceptibles de le placer.

Textures et PBR

Supprimez les matériaux inutilisés, utilisez des résolutions de texture sensibles et combinez des cartes dans un atlas lorsque cela réduit les frais généraux sans nuire aux détails visibles.

Utilisez des matériaux PBR standards et testez leur apparence dans la visionneuse de Shopify. Les matériaux hautement réfléchissants, transparents ou superposés peuvent nécessiter des ajustements supplémentaires sur les navigateurs et les appareils.

Ajouter un modèle 3D à un produit Shopify (étape par étape)

Après optimisation, téléchargez le modèle comme support produit et configurez sa présentation initiale avant de le publier.

1. Ouvrez Shopify Admin et accédez à Produits, puis sélectionnez le produit que vous souhaitez mettre à jour.
2. Dans la section Média, cliquez sur Ajouter un média et téléchargez un fichier GLB ou USDZ pris en charge. Shopify le traite et l'ajoute à la galerie multimédia.
3. Sélectionnez le modèle 3D téléchargé, cliquez sur Modifier le fichier et utilisez l'éditeur sans code de Shopify pour ajuster l'environnement ou l'éclairage, l'arrière-plan ainsi que la rotation et le zoom initiaux du modèle.
4. Aperçu de la page produit. Vérifiez la rotation et le zoom sur le bureau, puis testez "Afficher dans votre espace" sur les appareils iOS et Android pris en charge.

Pour connaître le chemin actuel de l'éditeur et les contrôles disponibles, consultez la documentation de l'éditeur de modèles 3D de Shopify.

Activez AR : "Afficher dans votre espace"

Un seul modèle téléchargé peut prendre en charge à la fois la visionneuse de vitrine interactive et AR après que Shopify l'ait traité dans des formats compatibles. Vous n'avez normalement pas besoin de gérer des actifs de vitrine distincts pour chaque appareil pris en charge.

Le contrôle "Afficher dans votre espace" apparaît uniquement lorsque l'appareil, le navigateur, le thème et le modèle prennent en charge AR. Testez sur des appareils physiques plutôt que de vous fier à un aperçu du bureau.

Les appareils Apple compatibles utilisent USDZ avec Apple Quick Look ; Les appareils Android pris en charge peuvent utiliser Google Scene Viewer. Shopify prépare les formats de modèles compatibles, tandis que le thème est responsable du rendu des supports du produit et des contrôles AR.

Avant de publier votre produit, testez l'expérience sur un véritable appareil mobile :

1. Ouvrez la page produit sur un smartphone pris en charge.
2. Confirmez que le bouton "Afficher dans votre espace" apparaît.
3. Appuyez sur le bouton AR et placez le produit sur un sol ou une table.
4. Vérifiez que la taille, l'orientation et l'éclairage du modèle semblent naturels.

3D native, applications tierces et visionneuse personnalisée

Choisissez parmi un support produit natif, un configurateur tiers ou une implémentation de thème personnalisé en fonction de l'interaction requise par le produit.

Médias 3D natifs

Les médias 3D natifs constituent la voie la plus simple pour la rotation, le zoom et le AR pris en charge. Cela fonctionne mieux lorsque le thème gère déjà correctement les supports du produit Shopify.

Applications et configurateurs tiers

Utilisez une plate-forme tierce lorsque les acheteurs doivent modifier des matériaux, configurer des composants, déclencher des points chauds ou interagir avec des options de produits dans l'expérience 3D.

• Changement de couleur et de matériau
• Configuration du produit
• Sélection des composants
• Points d'accès interactifs
• Expériences produits guidées

Visionneuse de liquides personnalisée

Pour les thèmes personnalisés, commencez par le chemin Liquid pris en charge par Shopify : restituez le support du modèle de produit avec model_viewer_tag et suivez les supports de produit de Shopify et les conseils de Shopify-XR pour AR spécifique à l'appareil.

Une intégration brute de Google <model-viewer> peut toujours être une option avancée lorsque le thème nécessite des contrôles personnalisés, des points chauds, une animation ou un comportement de chargement, mais elle nécessite que le développeur gère l'accessibilité, l'état des médias, les solutions de secours et la configuration AR.

Lequel choisir ?

• Besoin de quelque chose de simple ? Utilisez le média 3D natif de Shopify.
• Besoin de personnalisation de produit ou de configurateurs ? Choisissez une plateforme 3D tierce.
• Besoin d'un contrôle total ? Étendez l'intégration multimédia native de Shopify ou créez une visionneuse personnalisée avancée.

Les modèles 3D sont-ils réellement utiles ? Performances et conversions

La 3D peut ajouter un contexte produit utile, mais sa valeur dépend du produit et de sa mise en œuvre. Mesurez les performances et le comportement des clients au lieu de supposer que chaque catalogue en profite de la même manière.

Performance : mythe contre réalité

Le comportement de chargement varie selon le thème et la visionneuse. La géométrie et les textures optimisées réduisent les coûts de transfert, de mémoire et de rendu, mais les commerçants devraient toujours tester les pages de produits représentatives sur les appareils mobiles de milieu de gamme et les connexions plus lentes.

Conversion et retours

Interactive 3D et AR peuvent aider les acheteurs à comprendre l'échelle, la forme et les détails difficiles à communiquer avec des images plates.

Les résultats de conversion et de taux de retour varient considérablement selon la catégorie, l'audience, la qualité des éléments et l'emplacement. Traitez les études de cas externes comme un contexte plutôt que comme une prévision, et évaluez la fonctionnalité avec des données d'engagement, de conversion et de retour spécifiques au magasin.

Quand la 3D en vaut la peine

Tous les produits ne nécessitent pas un modèle 3D. La plus grande valeur provient des articles pour lesquels les acheteurs bénéficient d'une compréhension de l'échelle, des matériaux ou de l'adéquation spatiale avant d'acheter.

Les modèles 3D sont particulièrement utiles pour :

• Meubles et décoration
• Chaussures et accessoires de mode
• Bijoux et articles de luxe
• Electronique grand public
• Équipements industriels et produits techniques
• Produits avec options configurables

Pour des produits peu coûteux ou très standardisés, les photos traditionnelles peuvent déjà fournir suffisamment d'informations. Une bonne stratégie consiste à commencer par vos SKU les plus rentables ou les plus rentables, à mesurer l'engagement et les conversions, puis à étendre la 3D au reste de votre catalogue si les résultats justifient l'investissement.

Pièges courants et dépannage

La plupart des échecs proviennent de la complexité des actifs, d'une échelle incorrecte, de conditions de périphérique non prises en charge ou de la gestion des médias thématiques. Utilisez les vérifications ci-dessous avant de publier.

Le modèle se charge lentement ou ne se charge pas sur mobile

Si le chargement est lent, inspectez la géométrie, la résolution de la texture, le nombre de matériaux et la taille totale du fichier. Shopify accepte des fichiers jusqu'à 500 Mo et optimise les fichiers de plus de 15 Mo, mais des ressources plus petites et efficaces restent préférables pour la diffusion mobile.

Liste de contrôle :

• Réduire le nombre de polygones.
• Compresser les textures.
• Exportez un GLB optimisé.
• Test sur le Wi-Fi et les données mobiles.

La taille du produit semble incorrecte dans AR

Si le produit apparaît énorme ou minuscule dans AR, l'échelle ou l'orientation du modèle est probablement incorrecte. Assurez-vous qu'il utilise des unités du monde réel, qu'il possède le bon axe avant et que l'origine est positionnée à la base de l'objet avant de l'exporter.

Liste de contrôle :

• Vérifiez les unités (échelle réelle).
• Vérifiez l'orientation du modèle.
• Vérifiez que l'origine/le pivot est correctement positionné.
• Testez à nouveau sur un vrai appareil mobile.

Le bouton "Afficher dans votre espace" n'apparaît pas

Si le modèle pivote mais que AR n'est pas disponible, vérifiez que le téléchargement est un modèle GLB ou USDZ pris en charge, testez sur un appareil physique compatible et confirmez que le thème restitue les commandes AR de Shopify.

Liste de contrôle :

• Confirmez que le modèle est un format pris en charge.
• Test sur un iPhone physique ou un appareil Android.
• Assurez-vous que le système d'exploitation et le navigateur prennent en charge AR.
• Republiez le produit si vous avez récemment remplacé le modèle.

AR ne fonctionne pas sur iPhone

Sur iOS, testez dans Safari sur un appareil compatible Quick Look. Si AR échoue toujours, laissez le traitement Shopify se terminer, revérifiez l'échelle et les matériaux, et confirmez que le thème utilise l'intégration produit-média prise en charge par Shopify.

Liste de contrôle :

• Testez dans Safari sur un iPhone ou un iPad pris en charge.
• Vérifiez qu'Apple Quick Look est disponible sur l'appareil.
• Reportez-vous à la dernière documentation Shopify si le problème persiste.

Quelques minutes de tests sur de vrais appareils mobiles avant la publication peuvent détecter la plupart des problèmes plus tôt, garantissant ainsi aux clients une expérience 3D fluide et AR.

Foire aux questions

Quel format de fichier Shopify utilise-t-il pour les modèles 3D ?

Shopify accepte les modèles de produits GLB et USDZ. Un flux de travail GLB-first est pratique pour la livraison sur le Web car il regroupe le modèle et les textures dans un seul fichier, tandis que USDZ est utilisé par Apple Quick Look. Shopify traite les téléchargements pour fournir des formats compatibles sur tous les appareils pris en charge.

Comment ajouter un modèle 3D à un produit Shopify ?

Ouvrez Shopify Admin → Products, sélectionnez le produit et téléchargez un fichier GLB ou USDZ pris en charge dans Media. Sélectionnez le modèle téléchargé et utilisez Modifier le fichier pour ajuster sa présentation initiale. Prévisualisez la vitrine et testez AR sur les appareils mobiles physiques avant de publier.

Les modèles de produits 3D sont-ils gratuits sur Shopify, ou ai-je besoin d'une application ?

Shopify ne nécessite pas d'application de visualisation distincte pour la 3D de base et AR pris en charge. Une application tierce peut toujours être utile pour les configurateurs, le changement de matériel, les points d'accès, les analyses ou les intégrations spécialisées. Vérifiez que le thème actif prend en charge le support produit Shopify.

Comment activer AR pour mes produits Shopify ?

Téléchargez un modèle 3D pris en charge et utilisez un thème qui restitue les supports de produit Shopify et les contrôles AR. Shopify prépare les actifs GLB et USDZ compatibles ; Les appareils Apple pris en charge utilisent Quick Look, tandis que les appareils Android compatibles peuvent utiliser Scene Viewer. Confirmez le résultat sur de vrais appareils.

Les modèles 3D ralentissent-ils ma boutique Shopify ?

Ils le peuvent si les ressources sont volumineuses ou si le thème les charge de manière inefficace. Réduisez la géométrie inutile, optimisez les textures et testez la page produit réelle sur du matériel mobile et des réseaux plus lents. Le comportement de chargement dépend de l'implémentation, alors mesurez plutôt que de vous fier à une revendication de performance universelle.

Où puis-je obtenir des modèles 3D pour mes produits Shopify ?

Vous pouvez modéliser le produit en Blender ou CAD, générer un point de départ avec Tripo Image en 3D, acheter un actif sous licence approprié ou faire appel à un artiste 3D. Quelle que soit la voie que vous choisissez, vérifiez les dimensions, les matériaux, la topologie et les droits d'utilisation avant de publier.

Quelle est la différence entre GLB et USDZ sur Shopify ?

GLB est un format compact orienté Web qui peut inclure la géométrie, les matériaux et les textures dans un seul fichier. USDZ est utilisé pour Apple Quick Look AR. Shopify accepte les deux formats et traite le téléchargement pour des expériences de vitrine et d'appareil compatibles.

Conclusion

Shopify fournit la base produit-média pour la 3D interactive et prend en charge AR ; la qualité de l'expérience dépend du modèle, du thème et des tests. Créez ou recherchez un actif précis, optimisez-le, téléchargez un format pris en charge et validez le résultat sur des appareils réels. Pour créer un modèle de départ à partir d'une image de produit, essayez Tripo AI Studio.