Installer la visionneuse 3D de Complete sur Shopify

Avant de commencer

Dans le Complete Dashboard, ouvrez « Mes produits », choisissez la pièce et copiez le code d’intégration. Il se présente ainsi :

<iframe src="https://www.completemagazine.com.br/ar/CODE-DU-PRODUIT" width="100%" height="520" frameborder="0" allow="xr-spatial-tracking; fullscreen; camera" style="border:0;border-radius:12px"></iframe>

La partie qui suit /ar/ est le code de cette pièce. Gardez-le : dans la seconde méthode, c’est lui seul qui va dans Shopify.

Méthode 1 : dans la description du produit

1. 01

   Ouvrez le produit

   Dans l’interface administrateur de Shopify, allez dans Produits et ouvrez le produit qui doit recevoir la 3D.

2. 02

   Passez l’éditeur en HTML

   Dans le champ de description, cliquez sur le bouton d’affichage du HTML, marqué du symbole <>. Le texte apparaît alors sous forme de code.

3. 03

   Collez le code

   Collez le code d’intégration à l’endroit où la visionneuse doit apparaître, de préférence au début de la description.

4. 04

   Enregistrez et vérifiez

   Enregistrez le produit et ouvrez la page dans la boutique, sur ordinateur et sur téléphone. Sur téléphone, touchez le bouton de réalité augmentée pour vérifier que la caméra s’ouvre.

C’est la bonne méthode pour tester sur quelques produits. Son inconvénient : la visionneuse se trouve là où le thème affiche la description, c’est-à-dire, dans beaucoup de thèmes, sous le prix et le bouton d’achat.

Méthode 2 : un bloc dans le thème pour tous les produits

1. 01

   Créez le champ sur le produit

   Dans Paramètres, ouvrez la partie consacrée aux données personnalisées (les métachamps), puis Produits, et ajoutez une définition de métachamp nommée « Complete 3D », avec l’identifiant custom.complete_3d et le type texte sur une seule ligne.

2. 02

   Remplissez-le pour chaque produit

   En bas de la page de chaque produit, le nouveau champ apparaît. Collez-y uniquement le code de la pièce, la partie qui suit /ar/.

3. 03

   Ajoutez le bloc dans le thème

   Dans Boutique en ligne, Thèmes, Personnaliser, ouvrez le modèle de page produit et ajoutez un bloc « Liquid personnalisé » dans la section des informations produit, près de la galerie.

4. 04

   Collez le code du bloc

   Collez le fragment ci-dessous dans le bloc et enregistrez. Il n’affiche la visionneuse que lorsque le champ du produit est rempli.

{% if product.metafields.custom.complete_3d.value != blank %}
  <iframe src="https://www.completemagazine.com.br/ar/{{ product.metafields.custom.complete_3d.value }}" title="Produit en 3D" width="100%" height="520" frameborder="0" allow="xr-spatial-tracking; fullscreen; camera" style="border:0;border-radius:12px"></iframe>
{% endif %}

Dès lors, passer un nouveau produit en 3D revient à générer la pièce dans le Dashboard et à coller son code dans le champ du produit, sans revenir au thème.

Si quelque chose ne s’affiche pas

Si le cadre reste blanc, vérifiez que le code a été collé en entier, avec l’attribut allow, qui donne accès à la caméra sur téléphone. Si le bouton de réalité augmentée n’apparaît pas, ouvrez la page sur le téléphone lui-même, et non dans un aperçu de l’éditeur, qui ne transmet pas toujours ces autorisations. Si le bloc n’apparaît pas, vérifiez que l’identifiant du métachamp est exactement custom.complete_3d.