15 février 2024

Comment intégrer des produits 3D et AR interactifs sur un site Shopify

Transformez votre activité e-commerce avec un configurateur de produit Shopify.

Vectary intégration web est un moyen simple d’ajouter un élément 3D interactif sur votre site ou votre blog. Viewer 3D/AR Vectary fonctionne par simple copier-coller d’un code généré dans l’éditeur web. C’est le même procédé que pour intégrer une vidéo YouTube. Cette technologie est connue sous le nom de WebAR car elle offre une expérience de 3D et de réalité augmentée sur n’importe quel smartphone, iPhone ou Android, sans aucune application supplémentaire.

Comment personnaliser mon produit sur Shopify ?

Le configurateur de produit 3D Shopify vous permet de créer des présentations de produits interactives dotées de sélecteurs de matériaux, de variantes de formes, d’animations et de hotspots. Cela vous permet d’afficher la gamme de produits dans un viewer 3D en temps réel sans nécessiter de multiples rendus ou photos. De plus, vous pouvez mettre à jour instantanément votre offre de produits sans modifier le code du configurateur sur votre site. En prime, toutes les variantes peuvent être prévisualisées en réalité augmentée à leur taille réelle, ce qui permet aux visiteurs d’essayer le produit dans leur propre espace avant de l’acheter. Tout cela peut être mis en œuvre sans aucun code dans le Vectary Studio.

Connectez le configurateur de produit Shopify au checkout

Un configurateur 3D peut être converti en un calculateur de prix basé sur les paramètres sélectionnés dans le viewer 3D. Cela vous permet de lier le prix et les variantes sélectionnées au checkout. Vous pouvez y parvenir en utilisant une couche d’API Vectary au-dessus du configurateur 3D sans code.

Voir la démo sur Shopify

Comment intégrer un configurateur 3D interactif

Tout designer peut intégrer le configurateur comme vitrine, car la plateforme Vectary dispose d’un éditeur de configurateur sans code. Si vous souhaitez connecter le configurateur à votre panier, vous devrez implémenter l’API Vectary, ce qui peut nécessiter l’aide d’un développeur.

1. Niveau basique : uniquement l’intégration d’un configurateur 3D dans Shopify

1. Importez votre modèle 3D dans le Vectary Studio ou créez votre propre modèle à partir de zéro.

2. Créez un configurateur 3Dinteractif. Vous trouverez de nombreuses ressources sur notre chaîne YouTube.

3. Cliquez sur l’onglet Share, activez le partage et copiez le code.

4. Ouvrez votre admin Shopify et cliquez sur Thèmes dans le menu Canaux de vente.

5. Accédez à votre thème et cliquez sur le bouton Personnaliser .

5. Dans votre modèle, cliquez sur Ajouter une section et sélectionnez Liquid personnalisé. Collez maintenant le code de Vectary, et le viewer 3D devrait s’afficher.

6. Prévisualisez votre site et publiez-le lorsque le résultat vous convient.

7. Ajustez le configurateur à tout moment dans le Vectary Studio et synchronisez les modifications en un clic dans la section Share.

2. Niveau avancé : configurateur 3D Shopify connecté à un calculateur de prix et au panier

Cette fonctionnalité est uniquement disponible pour les clients Vectary Business via l’API. Reportez-vous aux instructions détaillées dans la documentation de l’API.

Astuce : activez la prévisualisation en réalité augmentée dans votre Shopify

Le viewer intégré affichera automatiquement une icône AR permettant de lancer une Réalité augmentée prévisualisation du produit sur n’importe quel appareil, sans aucune installation d’application.

FAQ

Est-ce que cela ralentit le site web ?

Tout contenu ajouté au site doit être optimisé, y compris le viewer 3D. Retrouvez nos conseils d’optimisation dans Documentation. Pour découvrir toutes les solutions proposées aux clients Business et aux équipes, contactez notre équipe commerciale.

Où le modèle est-il hébergé ?

Le modèle est hébergé sur la plateforme Vectary, mais le sous-domaine peut être masqué grâce à la fonctionnalité de « domaine personnalisé » disponible dans les espaces de travail Business.