Visualizer-Schaltflächen zu Shopify hinzufügen

Sind Ihre Modelle veröffentlicht? Fügen Sie View in Room und AR über den Theme-Editor von Shopify Online Store 2.0 hinzu.

1. App-Blöcke verwenden

Für Online-Store-2.0-Themes benötigen Sie keinen Code.

1. Öffnen Sie Online Store → Themes → Customize im Shopify-Admin.
2. Öffnen Sie Ihre Produktseitenvorlage.
3. Fügen Sie den Block Imersian Visualizer und bei Bedarf AR button hinzu.
4. Ziehen Sie die Blöcke an die gewünschte Stelle, am besten direkt unter die Kaufschaltfläche.
5. Speichern und Vorschau prüfen.

Die Schaltflächen erscheinen nur für markierte und für die Visualisierung aktivierte Produkte.

2. An den Theme-Stil anpassen

Für Farben und Rundungen Ihres Themes können Sie unter den App-Blöcken einen Custom Liquid-Block mit diesem Beispiel ergänzen. Unser Support hilft auf Englisch.

<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>

Passen Sie button--primary an die CSS-Klassen Ihres Themes an, etwa btn--primary in Archetype-Themes.