Visualizer-knoppen toevoegen aan Shopify

Zijn je modellen gepubliceerd? Voeg View in Room en AR toe via de thema-editor van Shopify Online Store 2.0.

1. App-blokken gebruiken

Er is geen code nodig bij een Online Store 2.0-thema.

1. Ga naar Online Store → Themes → Customize in Shopify.
2. Open het template van je productpagina.
3. Voeg Imersian Visualizer en desgewenst AR button toe uit de app-blokken.
4. Sleep de blokken naar de gewenste plek, bij voorkeur direct onder de koopknop.
5. Sla op en bekijk het resultaat.

De knoppen verschijnen alleen bij getagde producten die voor visualisatie zijn geactiveerd.

2. De themastijl overnemen

Wil je de kleuren en ronde hoeken van je themaknoppen gebruiken? Voeg onder de app-blokken een Custom Liquid-blok toe met het onderstaande voorbeeld. Vraag ons team om hulp als je twijfelt; support is in het Engels.

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

Pas button--primary aan de CSS-klassen van je thema aan, bijvoorbeeld btn--primary bij Archetype-thema’s.