Guide développeur : Shopify

Un configurateur 3D
sur Shopify.
2 lignes de code.

<viewer-3dvue> est un Web Component natif. Aucune dépendance, aucun framework requis. Il fonctionne partout où vous pouvez coller du HTML : section Liquid, theme.liquid, product template.

Zéro dépendance

Compatible Shopify 2.0

Attributs HTML ou API JS

IntersectionObserver intégré

<!-- Dans <head> ou avant </body> -->
<script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script>

<viewer-3dvue
  name="monViewer"
  src="https://app.3dvue.fr/view?p=AB01-CD02"
></viewer-3dvue>

<!-- C'est tout. -->

Pas de développeur ?

Créez votre configurateur vous-même.

Le guide ci-dessous s'adresse aux développeurs qui intègrent un configurateur conçu sur mesure par 3DVue. Si vous avez déjà les fichiers 3D de vos produits et voulez créer et publier votre configurateur vous-même, sans écrire de code, utilisez le logiciel 3DVue. Pour chaque produit, il génère :

Un lien direct : l'URL du configurateur, à mettre dans une fiche produit, un email ou un réseau social.
Un code iframe : à coller dans un bloc Custom Liquid de l'éditeur de thème Shopify, sur la page produit.
Un widget : un script à coller une fois dans theme.liquid, qui ajoute un bouton « Voir en 3D » sur vos pages produit.

Gratuit pendant 14 jours, puis dès 49 € HT par mois, sans commission sur vos ventes.

Essayer gratuitement Découvrir le logiciel

+94%

de conversions sur les fiches avec un modèle 3D

Source : Shopify

−40%

de retours après visualisation 3D du produit

Source : Shopify

+27%

de commandes après interaction avec le modèle 3D

Source : Rebecca Minkoff / Shopify

82%

des visiteurs activent la vue 3D quand disponible

Source : Cappasity

1

Inclure le script

Ajoutez le script dans votre theme.liquid, dans <head> ou juste avant </body>. Une seule inclusion suffit pour toutes vos pages produit.

Le script CDN ci-dessus est public. L'attribut src du composant <viewer-3dvue> est l'URL spécifique à votre configurateur : elle vous est fournie par 3DVue à la livraison du projet.
theme.liquid
```
<script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script>
```
2

Placer le composant

Collez la balise <viewer-3dvue> là où vous voulez afficher le configurateur : dans votre section produit Liquid, dans un bloc personnalisé ou dans une section dédiée. Deux attributs sont requis : name (identifiant unique) et src (URL de votre configurateur).

Le name sert à cibler ce viewer depuis les boutons HTML ou l'API JS. Utilisez un identifiant unique par page si vous avez plusieurs viewers.
product.liquid
```

<viewer-3dvue
  name="monViewer"
  src="https://app.3dvue.fr/view?p=AB01-CD02"
></viewer-3dvue>


<viewer-3dvue
  name="monViewer"
  src="https://app.3dvue.fr/view?p=AB01-CD02"
  debug
></viewer-3dvue>
```

Brancher vos sélecteurs

Ajoutez des attributs viewer-3dvue sur vos boutons ou selects existants pour déclencher des changements de matériaux. Aucun JavaScript à écrire : le composant écoute automatiquement les événements click et change.

<!-- Bouton qui change le tissu au clic -->
<button
  viewer-3dvue="monViewer"
  viewer-3dvue-clic="setMaterial"
  viewer-3dvue-meshs-materials='{"1":"0n","2":"1a"}'
>
  Coloris Bleu nuit
</button>

<!-- Select qui change la couleur -->
<select
  viewer-3dvue="monViewer"
  viewer-3dvue-change="setMaterial"
  viewer-3dvue-mesh="2,4"
>
  <option value="0n">Rouge</option>
  <option value="1a">Bleu</option>
  <option value="2b">Vert</option>
</select>

setMaterial sur clic

Idéal pour des boutons couleur ou des swatches. Applique plusieurs matériaux simultanément en une seule action.

<button
  viewer-3dvue="monViewer"
  viewer-3dvue-clic="setMaterial"
  viewer-3dvue-meshs-materials='{"1":"0n","3":"2b","5":"1c"}'
>
  Thème bois naturel
</button>

// {"indexMesh": "idMaterial"}
// L'index 0 est réservé : commence à 1

setMaterial sur <select>

Branchez un select natif Shopify. La valeur sélectionnée est appliquée à tous les meshes listés dans viewer-3dvue-mesh.

<select
  viewer-3dvue="monViewer"
  viewer-3dvue-change="setMaterial"
  viewer-3dvue-mesh="2,4"
>
  <option value="0n">Rouge</option>
  <option value="1a">Bleu</option>
</select>

// viewer-3dvue-mesh="2,4"
// applique à mesh 2 ET mesh 4

querySelector Récupérer la référence du composant : point de départ de toute l'API JS

const viewer = document.querySelector('viewer-3dvue[name="monViewer"]');

// Toutes les méthodes vérifient que le viewer est chargé (LOAD_COMPLETE)
// Si pas prêt → warning console, appel ignoré

setMaterial() Applique des matériaux sur un objet : même logique que les attributs HTML, mais en JS

// Sur l'objet 0 (défaut)
viewer.setMaterial({ "1": "0n", "3": "2b" });

// Sur un objet spécifique (multi-segments)
viewer.setMaterial({ "1": "1a" }, 1);
// setMaterial(materialList, objectIndex = 0)

loadModel() / addModel() / removeModel() Gestion dynamique des modèles : pour les produits multi-composants

// Charger un nouveau modèle (remplace l'actuel)
viewer.loadModel("AB01-CD02");

// Ajouter un segment au modèle existant
viewer.addModel("EF03");
viewer.addModel("EF03-GH04");

// Supprimer un segment par son index
viewer.removeModel(1);
// ⚠ Impossible de supprimer le dernier segment restant

captureToBase64() Capture le rendu courant en image base64 : utile pour les previews de commande ou les partages

viewer.captureToBase64();

viewer.addEventListener("onCaptureBase64Complete", (e) => {
  const { base64, error } = e.detail;
  if (error) { console.error(error); return; }
  // base64 = "data:image/png;base64,..."
  document.querySelector("#preview").src = base64;
});

resetCamera() · pauseRenderer() · startRenderer() Contrôle de la caméra et du rendu. pauseRenderer/startRenderer sont appelés automatiquement par l'IntersectionObserver.

// Ramène la caméra à sa position initiale
viewer.resetCamera();

// Mise en pause manuelle (économise le GPU)
viewer.pauseRenderer();
viewer.startRenderer();

// ℹ Ces méthodes sont gérées automatiquement
// quand le composant sort/entre dans le viewport

API SVG : Personnalisation avancée

Texte, logos, BAT.
Tout en SVG.

L'API SVG permet d'ajouter du texte et des images directement sur le produit 3D via des dropzones définies dans le modèle. Utilisée pour les produits personnalisables : marquage, gravure de texte, upload de logo client.

Méthode	Description
`addSVGText(text, opts)`	Ajoute un texte dans une dropzone. Options : `fill`, `fontFamily`, `selectable`
`addSVGImage(source, opts)`	Ajoute une image (File ou ArrayBuffer) dans une dropzone. Zero-copy via Transferable Objects.
`setSVGElementParam(param, value, id)`	Modifie un paramètre d'un élément SVG existant. Sans 3e argument : applique à l'élément sélectionné.
`removeSVGElement(id)`	Supprime un élément SVG (texte ou image). Sans argument : supprime l'élément sélectionné.
`exportSVG()`	Génère le fichier SVG du produit configuré : BAT prêt pour production.

// 1. Ajouter du texte sur le produit
viewer.addSVGText("Mon texte", {
  fill: "#ffffff",
  fontFamily: "Arial",
  dropzone: "dropzone001",
  selectable: true
});

// 2. Upload logo depuis un input file
const file = input.files[0];
viewer.addSVGImage(file, {
  dropzone: "dropzone001"
});

// 3. Exporter le BAT SVG
viewer.exportSVG();
viewer.addEventListener("onSVGExportComplete", (e) => {
  const { path, error } = e.detail;
  // path = URL du fichier SVG généré
});

Questions fréquentes

Comment installer le configurateur 3D sur Shopify ?+

Ajoutez la balise script du CDN dans votre fichier theme.liquid, puis collez le composant <viewer-3dvue> là où le configurateur doit apparaître : une section Liquid, votre template produit ou theme.liquid lui-même. Aucun outil de build n'est nécessaire.

Est-ce compatible avec les thèmes Shopify 2.0 et OS 2.0 ?+

Oui. Le Web Component fonctionne dans tout environnement qui accepte du HTML, donc avec tous les thèmes Shopify 2.0, Dawn et les thèmes OS 2.0.

Faut-il écrire du JavaScript pour relier les pastilles de couleur ?+

Non. Ajoutez les attributs viewer-3dvue directement sur vos boutons ou vos listes existants. Le composant écoute automatiquement les événements de clic et de changement : aucun JavaScript à écrire.

À quoi sert l'attribut src de la balise viewer-3dvue ?+

C'est l'URL de votre configurateur, fournie par 3DVue à la livraison de votre projet. Le script du CDN, lui, est public.

Combien coûte un configurateur 3D pour Shopify ?+

Le configurateur sur mesure démarre à 5 000 € HT, sur devis : modélisation, interface à votre charte, intégration, hébergement et support humain sont inclus. Pour tester par vous-même, le logiciel en libre-service est gratuit pendant 14 jours sans carte bancaire, puis dès 49 € HT par mois.

Prêt à intégrer ?
On s'occupe des modèles 3D.

Vous gérez le code côté Shopify, on s'occupe de tout le reste : modélisation, matières, configuration. En 30 minutes, on vous explique ce qu'on peut faire sur votre catalogue.

Script fourni à la livraison : prêt à coller

ID modèles et matières documentés par projet

Support direct avec le développeur de l'API

Compatible Shopify 2.0, OS 2.0, Dawn et tous themes

Un configurateur 3D
sur Shopify.
2 lignes de code.

Créez votre configurateur vous-même.

Prêt en 3 étapes. Sans build tool.

Zéro JavaScript.
Tout en attributs HTML.

Pour les cas avancés.

Texte, logos, BAT.
Tout en SVG.

Questions fréquentes

Comment installer le configurateur 3D sur Shopify ?+

Est-ce compatible avec les thèmes Shopify 2.0 et OS 2.0 ?+

Faut-il écrire du JavaScript pour relier les pastilles de couleur ?+

À quoi sert l'attribut src de la balise viewer-3dvue ?+

Combien coûte un configurateur 3D pour Shopify ?+

Prêt à intégrer ?
On s'occupe des modèles 3D.

Un configurateur 3D sur Shopify. 2 lignes de code.

Créez votre configurateur vous-même.

Prêt en 3 étapes. Sans build tool.

Zéro JavaScript.Tout en attributs HTML.

Pour les cas avancés.

Texte, logos, BAT.Tout en SVG.

Questions fréquentes

Comment installer le configurateur 3D sur Shopify ?+

Est-ce compatible avec les thèmes Shopify 2.0 et OS 2.0 ?+

Faut-il écrire du JavaScript pour relier les pastilles de couleur ?+

À quoi sert l'attribut src de la balise viewer-3dvue ?+

Combien coûte un configurateur 3D pour Shopify ?+

Prêt à intégrer ?On s'occupe des modèles 3D.

Un configurateur 3D
sur Shopify.
2 lignes de code.

Zéro JavaScript.
Tout en attributs HTML.

Texte, logos, BAT.
Tout en SVG.

Prêt à intégrer ?
On s'occupe des modèles 3D.