Shopify RA optimisé par 3D Warehouse

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.

Voir un vase en 3D

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

Vous pouvez installer l'application 3D Warehouse depuis la page d'inscription.

Étapes :

  1. Ouvrez la Page d'inscription.
  2. Saisissez votre domaine de boutique myshopify.com.
  3. Cliquez sur Installer.
  4. Passez en revue les détails, puis cliquez sur Installer l'application.

Vous pouvez accéder à l'application 3D Warehouse sur la page Applications de votre interface administrateur Shopify.

É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 obtenir des modèles 3D de vos produits par le biais du programme de partenaires Shopify.

Étapes :

  1. Depuis votre interface administrateur Shopify, cliquez sur le menu de votre compte, puis sur Embaucher un expert Shopify:

    Engager un expert Shopify

  2. Cliquez pour développer la section New functionality (Nouvelle fonctionnalité).

  3. Cliquez sur Create 3D models of your products for augmented reality (starting at $100 USD) (Créer des modèles 3D de vos produits pour la réalité augmentée (à partir de 100 USD)).

  4. Répondez aux questions. Si vous souhaitez fournir des photos et des dimensions de produit maintenant, assurez-vous de suivre les instructions associées.

  5. Cliquez sur Send job (Envoyer la demande).

L'envoi d'une demande de tâche ne vous engage pas à recruter un Expert Shopify. Cette étape envoie uniquement une description de votre projet aux experts disponibles, qui examineront ensuite votre demande. Si un expert décide de travailler avec vous, il vous contactera pour vous fournir plus d'informations sur ses tarifs et sur la procédure à suivre.

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 :

Angles de la photo du produit

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 :

Vase

Elle installe l'application 3D Warehouse, puis utilise Services Marketplace pour trouver 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 :

Angles de la photo du produit

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

Vase

  • 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. L’expert envoie à Naomi un fichier .glb et un fichier .usdz qu'elle devra 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 d'une qualité satisfaisante. L'expert doit vous expliquer comment prévisualiser le modèle.

Examinez le modèle sous tous les angles et, ce faisant, posez-vous 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 ?
  • En cas de présence de 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 ?

L'expert Shopify doit créer le modèle 3D en respectant certaines normes. Pour en savoir plus sur ces normes et ainsi vous permettre une meilleure vérification du modèle, consultez la page Créer des modèles 3D pour les marchands.

Si vous pensez que la qualité du modèle est insatisfaisante, 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.

Étapes :

  1. Depuis votre interface administrateur Shopify, cliquez sur Applications.
  2. Cliquez sur 3D Warehouse.
  3. Cliquez sur Add 3D Model (Ajouter un modèle 3D).
  4. Dans le champ Titre, saisissez un titre pour le modèle 3D.
  5. 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.
  6. Cliquez sur Upload File (Importer un fichier) et sélectionnez le fichier .usdz fourni par l'expert Shopify.
  7. Cliquez sur 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 fichier de modèle 3D soient associés à ce produit.

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 mettre en ligne 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 à mettre en ligne 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. Dans l'interface administrateur Shopify, cliquez sur Boutique en ligne.
  2. À côté de votre thème actuel, cliquez sur Actions > Modifier le code.
  3. Dans le dossier Mise en page, cliquez sur {/} theme.liquid.
  4. Trouvez la balise <head>. Elle devrait se situer près du haut du fichier.
  5. Sur la ligne suivante, collez le code ci-après :
<script
  src="https://cdn.shopifycloud.com/ar-quicklook-js/assets/v1/shopify3d.js"
  crossorigin="anonymous"
></script>
  1. Cliquez sur 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>

Bibliothèque Quicklook ajoutée au modèle de produit

  1. Cliquez sur 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 :

Superposition de badge RA

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

Étapes :

  1. Dans l'interface administrateur Shopify, cliquez sur Boutique en ligne.
  2. À côté de votre thème actuel, cliquez sur Actions > Modifier le code.
  3. Dans le dossier Sections, cliquez sur {/} product-template.liquid.
  4. Trouvez la section du modèle associée à la photo de votre produit. Recherchez des mots clés comme ProductPhoto ou featured_image :
    Liquid du produit photo
  5. Dans la section photo du produit, trouvez la première balise <img... >.
  6. 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>

Liquid du produit photo avec le code

  1. Cliquez sur 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 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.

Prêt(e) à commencer à vendre avec Shopify ?

Essayez gratuitement