Shopify RA optimisé par 3D Warehouse

Attention

L’application 3D Warehouse est obsolète et ne pourra pas être installée. Vous pouvez mettre en ligne des modèles 3D directement à partir de la page Produits. En savoir plus sur l’ajout de supports multimédias à des produits.

Shopify RA permet aux clients qui utilisent le navigateur Safari sur des appareils iOS 12 de voir des versions réalistes et interactives de vos produits en réalité augmentée (RA). Grâce à la RA, vous pouvez fournir à vos clients une meilleure idée de la taille, de l’échelle et des détails de vos produits. L'application 3D Warehouse offre des expériences de RA en vous permettant de télécharger des modèles 3D et de les connecter aux produits de votre boutique.

Pour permettre aux clients de voir vos produits en RA, installez l'application 3D Warehouse, obtenez des modèles 3D de vos produits, ajoutez les modèles 3D à l'application, modifiez votre thème pour activer AR Quick Look, puis ajoutez le badge RA à vos produits en 3D.

Étape 1 : installer l'application 3D Warehouse

Remarque

L’application 3D Warehouse est obsolète et ne pourra pas être installée. Vous pouvez mettre en ligne des modèles 3D directement à partir de la page Produits. Pour plus d’informations sur l’ajout de supports multimédia à vos produits, consultez Supports multimédia et produits.

Étape 2 : obtenir des modèles 3D de ses produits

Vous devez posséder des modèles 3D de vos produits pour que les clients puissent voir ces derniers en RA. Les modèles 3D sont des représentations virtuelles d'un objet ou d'une surface en trois dimensions. Ils vous permettent de voir l'objet sous n'importe quel angle.

Vous pouvez engager un expert Shopify pour vous aider à créer des modèles 3D de vos produits. Sur la place de marché des experts Shopify, parcourez les experts qui offrent un service de création de modèles 3D, sélectionnez-en un et contactez-le.

Indiquez les détails de votre projet sur le formulaire de contact d'expert. Si vous souhaitez fournir des photos et des dimensions de produit maintenant, veuillez suivre les instructions associées.

Lorsque vous contacter un(e) expert(e), vous n’êtes pas tenu(e) d'engager un(e) expert(e) Shopify. Cette étape consiste uniquement à adresser une demande à l’expert(e) qui peut ensuite l'étudier. S'il/elle décide de travailler avec vous, il/elle vous contactera pour vous fournir des informations supplémentaires sur ses tarifs et sur la marche à suivre pour commencer à collaborer.

Si vous n'avez pas fourni les photos et les dimensions du produit dans votre demande de tâche, l'expert vous les demandera. Suivez les instructions ci-dessous pour prendre des photos et des mesures.

Photos du produit

Les modèles 3D sont créés à l'aide de photos. Pour créer le modèle 3D, l'expert Shopify a besoin de photos de vos produits sous différents angles :

Lorsque vous prenez des photos de votre produit, suivez ces instructions :

• Assurez-vous que votre produit est bien éclairé.
• Assurez-vous que tout votre produit est dans le cadre.
• Si possible, n'utilisez pas l'appareil photo de votre téléphone portable. Pour les gros produits comme les meubles, utilisez un appareil photo avec un objectif de 50 mm. Pour les produits de taille petite à moyenne, utilisez un objectif de 70 ou 100 mm.
• Prenez des photos supplémentaires de tous les détails ou textures uniques.
• Donnez des titres clairs aux fichiers photo comme blue vase - top, ou blue vase - left et stockez-les dans un dossier portant un nom clair.

Dimensions du produit

Pour créer des modèles 3D précis, l'expert Shopify a besoin de connaitre les mesures détaillées de votre produit. Lorsque vous fournissez des mesures, suivez ces instructions :

• Décrivez chaque dimension de votre produit en termes simples et clairs.
• Fournissez les mesures en mm.
• Ajoutez un diagramme pour montrer à quelles dimensions correspondent les mesures.
• Si vous avez des dessins techniques ou des fichiers CAO associés à votre produit, ajoutez-les également.

Exemple de fabrication de modèles 3D

Naomi vend ce vase bleu :

Elle installe l'application 3D Warehouse, puis utilise la place de marché des experts pour engager un expert Shopify afin de créer un modèle 3D du vase. Naomi fournit à l'expert six photos haute qualité prises avec un appareil photo doté d'un objectif de 70 mm :

Naomi fournit à l'expert un diagramme de mesure avec les dimensions correspondantes du produit en millimètres :

• La hauteur du vase (1) est de ____ mm
• Le haut du vase jusqu'au bas du col (2) mesure ____ mm
• Le bas du col jusqu'au bas du vase (3) mesure ____ mm
• Le diamètre de la bouche du vase (4) est de ____ mm
• La largeur de la lèvre de la bouche (5) est de ____ mm
• Le diamètre du bas du col (6) est de ____ mm
• Le vase comporte 8 faces hexagonales
• La hauteur des faces hexagonales (8) est de ____ mm
• La largeur des faces hexagonales (9) est de ____ mm
• Le diamètre de la partie la plus large du vase (10) est de ____ mm
• Le diamètre du fond du vase (11) est de ____ mm
• Le diamètre des pieds en mousse est de ____ mm

L'expert Shopify utilise ces photos et dimensions pour créer un modèle 3D du vase bleu. Il envoie à Naomi un fichier .glb et un fichier .usdz qu'elle doit ajouter à l’application 3D Warehouse.

Étape 3 : vérifier la qualité du modèle

Lorsqu'un expert Shopify vous fournit un modèle 3D, assurez-vous que celui-ci est de qualité satisfaisante. L'expert doit vous expliquer comment prévisualiser le modèle.

Vérifiez le modèle sous tous les angles. Vous pouvez utiliser l' afficheur glTF pour prévisualiser vos modèles 3D. Tout en examinant votre modèle, prenez en compte les questions suivantes :

• La forme du modèle correspond-elle aux photos de référence du produit que vous avez fournies à l'expert ?
• Les différentes parties du modèle sont-elles toutes proportionnelles ?
• S'il vous est possible de prévisualiser le modèle en réalité augmentée, son échelle semble-t-elle correcte vis-à-vis du reste de la scène ?
• Le modèle semble-t-il fabriqué à partir des mêmes matériaux que le produit ?
• Les matériaux du modèle semblent-ils étirés, flous ou déformés ?
• Remarquez-vous la présence de détails rendant les matériaux du modèle plus réalistes, tels que des traces de frottement ou des griffures ?
• Si le produit comporte des parties transparentes, réfléchissantes ou lumineuses, leur apparence est-elle correctement rendue ?
• Les bords semblent-ils tous réalistes ? Certains d'entre eux sont-ils trop prononcés et nécessiteraient-ils d'être adoucis ?
• S'il y a des détails décoratifs, tels qu'un logo ou du texte, sont-ils aisément visibles ?
• Remarquez-vous des écarts ou des trous à des endroits qui ne devraient pas en avoir ?
• Le modèle 3D répond-il aux exigences techniques de la plateforme Shopify ?
  • Le modèle 3D doit être un fichier GLB.
  • Le fichier GLB doit être d’environ 4 Mo.
  • Le fichier GLB ne doit pas dépasser 15 Mo.

L'expert Shopify doit créer le modèle 3D en respectant certaines normes. Afin d'en savoir plus sur ces normes et de pouvoir mieux vérifier un modèle, consultez la page Créer des modèles 3D pour les marchands.

Si vous pensez que la qualité du modèle n'est pas satisfaisante, contactez l'expert Shopify et expliquez-lui ce qui ne va pas.

Étape 4 : ajouter un modèle 3D à l'application 3D Warehouse

Une fois que vous avez installé l'application 3D Warehouse et obtenu un modèle 3D, vous devez l'ajouter à l'application.

Remarque

Si vous ne voyez pas l'image RA après l'avoir ajoutée à l'application 3D Warehouse, contactez l'assistance Apple.

Étapes :

1. Depuis votre interface administrateur Shopify, cliquez sur Paramètres > Applications et canaux de vente.

2. À la page Applications et canaux de vente, cliquez sur 3D Warehouse.

3. Cliquez sur Ouvrir l’application.

4. Cliquez sur Add 3D Model (Ajouter un modèle 3D).

5. Dans le champ Titre, saisissez un titre pour le modèle 3D.

6. Dans le champ Linked Product (Produit associé), sélectionnez le produit et la variante auxquels ce modèle 3D est associé, puis cliquez sur Sélectionner le produit.

7. Cliquez sur Upload File (Importer un fichier) et sélectionnez le fichier .usdz fourni par l'expert Shopify.

8. Cliquez sur Save (Enregistrer).

Répétez le processus d'importation pour les fichiers .gltf ou .glb fournis par votre expert Shopify. Assurez-vous de l'associer au même produit afin que les deux types de fichiers de modèle 3D soient associés au produit.

Remarque

Si vous mettez en ligne un fichier .gltf, vous êtes invité(e) à ajouter des fichiers supplémentaires dans la section Fichiers associés. Cliquez sur Mettre en ligne le fichier pour importer les ressources de texture associées fournies par votre expert(e).

Types de fichiers acceptés

Les experts Shopify fournissent deux types de fichiers pour chaque modèle 3D : un fichier .usdz et un fichier .gltf ou .glb. Ces différents types de fichiers sont utilisés par diverses plateformes et fonctionnalités. Par exemple, pour que les clients puissent voir des produits en 3D dans le navigateur Safari sur des appareils iOS 12, vous devez importer un fichier .usdz. Le meilleur moyen de vous assurer que votre boutique en ligne soit compatible avec les futures fonctionnalités de réalité augmentée et de 3D consiste à importer les deux types de fichiers.

Étape 5 : modifier votre thème pour activer AR Quick Look

Vous devez modifier votre code de thème pour activer AR Quick Look. Cette fonctionnalité permet aux clients utilisant le navigateur Safari sur des appareils iOS 12 de visualiser vos produits en 3D.

Étapes :

1. Depuis votre interface administrateur Shopify, cliquez sur Paramètres > Applications et canaux de vente.

2. À la page Applications et canaux de vente, cliquez sur Online store.

3. Cliquez sur Ouvrir le canal de vente.

4. À côté de votre thème actuel, cliquez sur le bouton … > Modifier le code.

5. Dans le dossier Mise en page, cliquez sur {/} theme.liquid.

6. Trouvez la balise <head>. Elle devrait se situer près du haut du fichier.

7. Sur la ligne suivante, collez le code ci-après :

<script
  src="https://cdn.shopify.com/shopifycloud/ar-quicklook-js/assets/v1/shopify3d.js"
  crossorigin="anonymous"
></script>

1. Cliquez sur Save (Enregistrer).
2. Dans le dossier Sections, cliquez sur {/} product-template.liquid.
3. Collez le code suivant en haut du fichier :

<script>
  (function(s3d) {
    if (!s3d) {
      console.warn('"window.Shopify3d" does not exist. Please ensure you\'ve added the <script> to your theme');
      return;
    }
    {% for variant in product.variants %}
      s3d.mapMetafieldAssets('{{ variant.id }}', '{{ variant.metafields.shopify3d['assets'] }}');
    {% endfor %}
  })(window.Shopify3d);
</script>

![Quicklook library added to product template](/manual/apps/3d-warehouse/quicklook-product-template.png)

1. Cliquez sur Save (Enregistrer).

Si vous utilisez plusieurs modèles de produit, ajoutez également le code à ces fichiers de modèles.

Étape 6 : ajouter le badge RA à vos produits 3D.

Les clients utilisant des appareils iOS 12 sauront qu'ils peuvent visualiser votre produit en 3D en voyant la superposition de badge RA :

Vous devez modifier votre code de thème pour afficher le badge RA sur les images de produit.

Étapes :

1. Depuis votre interface administrateur Shopify, cliquez sur Paramètres > Applications et canaux de vente.

2. À la page Applications et canaux de vente, cliquez sur Online store.

3. Cliquez sur Ouvrir le canal de vente.

4. À côté de votre thème actuel, cliquez sur le bouton … > Modifier le code.

5. Dans le dossier Sections, cliquez sur {/} product-template.liquid.

6. Trouvez la section du modèle associée à la photo de votre produit. Recherchez des mots clés comme ProductPhoto ou featured_image :

   

7. Dans la section photo du produit, trouvez la première balise <img... >.

8. Sur la ligne située au-dessus de cette balise, collez le code suivant :

<div class="ar-quicklook-overlay" data-shopify-3d-variant-id="{{ product.selected_or_first_available_variant.id }}" style="display: none;"></div>

![Product photo liquid with code](/manual/apps/3d-warehouse/product-image-liquid-with-code.png)

1. Cliquez sur Save (Enregistrer).
2. Ouvrez le fichier contenant le CSS de votre thème. Ce fichier se trouve généralement dans le dossier Ressources et porte le plus souvent un nom tel que {/}theme.scss.liquid.
3. Tout en bas du fichier, collez le code suivant :

.ar-quicklook-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 2;
}

1. Cliquez sur Save (Enregistrer).

Pour tester votre modèle 3D, ouvrez votre boutique en ligne dans le navigateur Safari sur un appareil iOS 12 et accédez à la page du produit. Appuyez sur le badge RA sur l'image du produit pour l'afficher en 3D.