Añadir botones de Visualizer en Shopify

Una vez publicados los modelos, añade View in Room y AR desde el editor de temas de Shopify Online Store 2.0.

1. Usa bloques de app

Los temas Online Store 2.0 admiten estos bloques sin código.

1. En Shopify, abre Online Store → Themes → Customize.
2. Abre la plantilla de ficha de producto.
3. Añade Imersian Visualizer y, si quieres, AR button desde los bloques de app.
4. Arrastra el bloque a la posición deseada, preferiblemente debajo del botón de compra.
5. Guarda y previsualiza.

Los botones solo aparecen en productos etiquetados y habilitados para visualización.

2. Adapta el estilo del tema

Para usar colores y esquinas del tema, añade un bloque Custom Liquid debajo de los bloques de app con este ejemplo. El equipo puede ayudarte en inglés.

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

Ajusta button--primary a las clases CSS de tu tema, como btn--primary en temas Archetype.