Todas las plataformas / Guía
Modelo 3D y AR en Magento y Adobe Commerce
Con Page Builder añades un elemento «HTML Code» en la descripción del producto. Sin Page Builder, pegas el código en el editor HTML de la descripción.
- Plugin / app
- No hace falta
- Dónde pegas el código
- Content → Page Builder → «HTML Code»
- AR en el móvil
- Sí, Android y iPhone
Opción 1: Page Builder (Magento 2.4)
El camino estándar en Magento 2.4.3+ y Adobe Commerce.
Paso 1
Copia el código de 3DView
Entra en tu cuenta, ve a «Mis modelos» y, en el modelo, pulsa «Código para tu web»: el código se copia al instante. Las pestañas Shopify, WooCommerce y «Cualquier web» solo indican dónde pegarlo; el código es el mismo.
Copia el código de 3DView Paso 2
Abre el producto
Catalog → Products → Edit en el producto.
Abre el producto Paso 3
Abre Page Builder
Despliega la sección Content y pulsa «Edit with Page Builder».
Paso 4
Arrastra el elemento HTML Code
Desde el panel de la izquierda, en Elements, arrastra «HTML Code» a la descripción. Pulsa el engranaje del elemento, pega el código y pulsa Save.
Arrastra el elemento HTML Code Paso 5
Guarda el producto
Cierra Page Builder, pulsa Save y comprueba el producto en la tienda.
Opción 2: Sin Page Builder (editor WYSIWYG)
Si Page Builder está desactivado o tienes una versión anterior.
Paso 1
Copia el código de 3DView
Entra en tu cuenta, ve a «Mis modelos» y, en el modelo, pulsa «Código para tu web»: el código se copia al instante. Las pestañas Shopify, WooCommerce y «Cualquier web» solo indican dónde pegarlo; el código es el mismo.
Copia el código de 3DView Paso 2
Cambia a HTML
En la sección Content, en Description, pulsa «Show / Hide Editor» para ver el código HTML.
Cambia a HTML Paso 3
Pega el código y guarda
Pega el código y pulsa Save.
Pega el código y guarda
El código que pegas
Así es el código copiado de 3DView (en el tuyo aparece el ID del modelo en lugar de MODEL_ID). Puedes cambiar la altura (height:480px); el resto déjalo igual. Añade ?controls=0 después del ID para ocultar la barra de ajustes bajo el modelo.
<iframe src="https://www.3dview.ai/embed/MODEL_ID" title="Sofá Oslo" loading="lazy" allow="xr-spatial-tracking; fullscreen; accelerometer; gyroscope" allowfullscreen style="width:100%;height:480px;border:0;border-radius:12px"></iframe>
Cómo comprobar que funciona
- En el ordenador: el modelo se carga, gira con el ratón y el botón «Ver en el móvil» muestra un código QR para AR.
- En Android (Chrome): pulsa el botón AR en la esquina del modelo. Se abre el visor AR de Google y colocas el producto en la habitación, a tamaño real. El móvil debe ser compatible con ARCore.
- En iPhone/iPad (Safari): pulsa el botón AR. Se abre AR Quick Look, sin ninguna app.
- Prueba desde Safari o Chrome, no desde el navegador interno de Facebook/Instagram: ahí AR no arranca.
- Después de guardar, vacía la caché: System → Cache Management → Flush Magento Cache (si no ves el cambio).
Problemas frecuentes y soluciones
La consola del navegador muestra un error de Content Security Policy
Tu tienda tiene CSP en modo restrictivo. El desarrollador añade https://www.3dview.ai a frame-src (en el csp_whitelist.xml del tema o de un módulo).
El modelo aparece en todos los productos
Lo has puesto en la plantilla de página, no en la descripción del producto. Pon el elemento HTML Code en Content de cada producto.
El código desaparece o se convierte en texto al guardar
El editor lo ha limpiado: pega el código en el modo HTML / código fuente, no en el modo visual (los pasos de arriba indican el botón exacto). Si sigue desapareciendo, la plataforma no admite iframes: usa el enlace y el código QR de «Compartir / QR».
El modelo es demasiado pequeño o aparece cortado
Aumenta la altura en el código: height:480px pasa, por ejemplo, a height:600px. El ancho (100%) se adapta solo a la columna. En el móvil suelen bastar 400–500px.
El botón AR no aparece o no arranca en iPhone
AR en iPhone requiere Safari (o Chrome en iOS) y un iPhone/iPad con iOS 12 o posterior. 3DView prepara automáticamente la versión para iPhone (USDZ). Abre directamente el enlace del modelo (el botón «Ver en AR» de tu cuenta): si ahí funciona, tu plataforma bloquea AR en los marcos incrustados; pon bajo el modelo un enlace «Ver en AR» a ese enlace.
El navegador avisa de «contenido no seguro» o el modelo no se carga
No cambies la dirección del código a http://. En una web https, los navegadores bloquean los marcos http (contenido mixto). Deja la dirección tal cual: https://www.3dview.ai/embed/…
Aparece el logo de 3DView en el modelo
Lo quitas por modelo, desde tu cuenta: «Quitar logo», un único pago en créditos. El código sigue siendo el mismo.
¿Hace más lenta la página?
No: el código lleva loading="lazy", así que el modelo solo se carga cuando llega a la pantalla. El alojamiento está incluido, sin suscripción.
Ilustraciones simplificadas, no capturas de pantalla; los menús pueden verse algo distintos en tu versión.
Preguntas frecuentes
¿Necesito una extensión de Magento?
No. El elemento HTML Code de Page Builder viene incluido.
¿Funciona en Magento Open Source?
Sí. Page Builder viene incluido desde la 2.4.3; antes, usas la opción con el editor WYSIWYG.
¿Aún no tienes un modelo 3D?
Escanea el producto con el móvil o parte de una foto. Recibes el código para tu web, el enlace con QR y AR incluidos.
Crea tu primer modelo