Ajouter les boutons du Visualizer à Shopify

Une fois vos modèles publiés, ajoutez View in Room et AR dans l’éditeur de thème Shopify Online Store 2.0.

1. Utiliser les blocs d’appli

Les thèmes Online Store 2.0 acceptent ces blocs sans code.

1. Dans Shopify, ouvrez Online Store → Themes → Customize.
2. Ouvrez le modèle de fiche produit.
3. Ajoutez Imersian Visualizer et, si vous le souhaitez, AR button depuis les blocs d’appli.
4. Placez le bloc, de préférence sous le bouton d’achat.
5. Enregistrez et prévisualisez.

Les boutons apparaissent uniquement sur les produits étiquetés et activés pour la visualisation.

2. Reprendre le style du thème

Pour reprendre couleurs et arrondis, ajoutez un bloc Custom Liquid sous les blocs d’appli avec cet exemple. Notre équipe peut vous aider en anglais.

<script>
document.addEventListener('DOMContentLoaded', () => {
  const selectors = ['.imersian-view-in-room', '.imersian_inhome'];

  function waitForElements(selectors, timeout = 5000) {
    return new Promise((resolve) => {
      const found = selectors.map(sel => document.querySelector(sel)).filter(Boolean);
      if (found.length > 0) return resolve(found);

      const observer = new MutationObserver(() => {
        const matched = selectors.map(sel => document.querySelector(sel)).filter(Boolean);
        if (matched.length > 0) { observer.disconnect(); resolve(matched); }
      });

      observer.observe(document.body, { childList: true, subtree: true });
      setTimeout(() => { observer.disconnect(); resolve([]); }, timeout);
    });
  }

  waitForElements(selectors).then((buttons) => {
    if (buttons.length === 0) return;
    buttons.forEach(btn => {
      btn.removeAttribute('style');
      const span = btn.querySelector('span');
      if (span) span.style.color = '';
    });
    // Apply theme native button classes here:
    if (buttons[0]) buttons[0].classList.add('button', 'button--primary');
    if (buttons[1]) buttons[1].classList.add('button', 'button--secondary');
  });
});
</script>

Adaptez button--primary aux classes CSS de votre thème, comme btn--primary pour les thèmes Archetype.