Todas las plataformas / Guía
Modelo 3D y AR en PrestaShop
PrestaShop elimina por defecto los iframes de las descripciones. Un ajuste los permite y luego pegas el código en la descripción del producto, desde el modo código fuente del editor.
- Plugin / app
- No hace falta
- Dónde pegas el código
- Descripción / Resumen → «Código fuente»
- AR en el móvil
- Sí, Android y iPhone
El código 3DView en la descripción del producto
El resumen (Summary) aparece junto al precio; la descripción larga, más abajo en la página.
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
Permite los iframes
Parámetros de la tienda (Shop Parameters) → General → «Permitir iframes en campos HTML» (Allow iframes on HTML fields) → Sí → Guardar. Solo lo haces una vez.
Permite los iframes Paso 3
Abre el producto
Catálogo → Productos → haz clic en el producto.
Abre el producto Paso 4
Abre el código fuente de la descripción
En el editor de Resumen o Descripción pulsa el botón «Código fuente» (Source code, <>). En algunos temas está bajo el botón «…» del editor.
Abre el código fuente de la descripción Paso 5
Pega el código y guarda
Pega el código, pulsa OK en la ventana de código y luego guarda el producto.
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.
- Si la tienda tiene varios idiomas, pega el código en la descripción de cada idioma (las pestañas de idioma junto al campo).
Problemas frecuentes y soluciones
El código desaparece incluso después del ajuste
Revisa en el mismo sitio la opción «Usar la biblioteca HTMLPurifier»; con los iframes permitidos, el código debería quedarse. Vacía también la caché: Parámetros avanzados → Rendimiento → Borrar caché.
No veo el botón de código fuente
Algunos módulos de editor lo ocultan. Busca el botón «<>» o «Source code» bajo «…», o pide al desarrollador que lo active en TinyMCE.
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 módulo de PrestaShop?
No. Después del ajuste para iframes, el código va directamente en la descripción.
¿Es seguro permitir los iframes?
El ajuste permite iframes solo a quienes editan los productos desde el admin. Pega solo códigos de fuentes de confianza.
¿Funciona en PrestaShop 1.6?
Sí, el mismo ajuste está en Preferencias → General; el editor tiene el botón «HTML».
¿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