Todas las plataformas / Guía
Modelo 3D y AR en Shoptet
En Shoptet, la descripción del producto admite HTML. Pegas el código 3DView en el modo Source (código fuente) del editor.
- Plugin / app
- No hace falta
- Dónde pegas el código
- Producto → Descripción → «Source»
- AR en el móvil
- Sí, Android y iPhone
El código 3DView en la descripción del producto
No hemos probado todos los temas de Shoptet: comprueba la página después de guardar.
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
En la administración de Shoptet entra en Productos y abre el producto.
Abre el producto Paso 3
Pasa la descripción a Source
En la descripción (la descripción larga) pulsa el botón «Source» (código fuente) de la barra del editor.
Pasa la descripción a Source Paso 4
Pega el código y guarda
Pega el código y guarda el producto.
Pega el código y guarda Paso 5
Comprueba el producto
Abre la página del producto en el ordenador y en el móvil.
Comprueba el producto
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.
Problemas frecuentes y soluciones
El iframe no se guarda
Pide al soporte de Shoptet que permita iframes de www.3dview.ai. Mientras tanto, pon el enlace del modelo en la descripción.
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 un complemento de Shoptet?
No. El código es HTML normal y funciona en la descripción.
¿Puedo usar la opción con script?
Sí: el script /embed.js se añade una sola vez desde los ajustes de códigos HTML de la tienda y luego usas <view3d-model> en las descripciones. Para la mayoría de las tiendas, el iframe es suficiente.
¿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