Cómo añadir AR a las páginas de producto de Shopify y WooCommerce
En resumen: Para añadir AR a una página de producto necesitas un modelo 3D del producto en GLB (Android y web) y en USDZ (iPhone), al tamaño real del producto. Shopify admite modelos 3D como contenido multimedia del producto; en WooCommerce o en cualquier otro sitio insertas el componente gratuito model-viewer con los dos archivos.
Paso 1: crea los archivos 3D
- Productos planos (láminas, pósteres, lienzos, alfombras, muestras de papel pintado): sube la foto del producto a jpgtousdz e indica el ancho o el alto real. Obtienes GLB y USDZ a ese tamaño.
- Objetos (jarrones, sillas, zapatos): graba un vídeo lento alrededor del producto y usa vídeo a 3D, indicando la altura real.
- Mantén cada archivo ligero (texturas de 2048 px o menos) para que la página de producto siga siendo rápida.
Paso 2a: Shopify
- En el administrador de Shopify abre el producto, luego Multimedia, y sube el archivo GLB como modelo 3D.
- Shopify lo muestra con su visor 3D, y los temas compatibles añaden un botón Ver en tu espacio en los móviles.
- Comprueba el producto en un iPhone y en un móvil Android. El centro de ayuda de Shopify indica los límites de tamaño de archivo y los temas compatibles actuales.
Paso 2b: WooCommerce, WordPress o cualquier sitio web
Sube el GLB y el USDZ a tu biblioteca de medios y luego añade a la descripción del producto un bloque de HTML personalizado con model-viewer:
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<model-viewer src="/media/print-50x70.glb" ios-src="/media/print-50x70.usdz"
ar ar-modes="quick-look scene-viewer webxr" ar-placement="wall"
camera-controls alt="Lámina de 50 x 70 cm"></model-viewer>Paso 2c: la opción sin código
Si no puedes editar la página, añade un botón o un código QR que enlace al visor AR de jpgtousdz del producto. Se abre en AR en iPhone y Android sin ninguna app.
Lista de comprobación antes de publicar
| Comprobar | Por qué |
|---|---|
| El tamaño real es correcto | Los clientes juzgan el tamaño por la AR; una escala equivocada provoca devoluciones. |
| La colocación es la correcta (pared o suelo) | El arte va en la pared y los muebles en el suelo. |
| Funciona en iPhone y Android | Cada uno usa un archivo distinto. |
| Texto alternativo definido | Accesibilidad y buscadores. |
Pruébalo ahora
Convierte una foto en un USDZ y un GLB a tamaño real en pocos segundos, o un vídeo en un modelo 3D. Tu primera conversión de foto es gratis.
AR para fotos de productoPreguntas frecuentes
¿Shopify necesita USDZ?
Sube el GLB a Shopify; él se encarga de mostrarlo. Conserva también un USDZ por si tu tema u otro canal lo necesita.
¿WooCommerce admite AR de forma nativa?
No. Usa un plugin o inserta model-viewer con archivos GLB y USDZ como se muestra arriba.
¿Cuánto cuesta?
model-viewer es gratis. Una conversión de foto a AR en jpgtousdz es gratis la primera vez y después forma parte de un plan. La API cuesta $0.15 por foto y $1.50 por modelo 3D de vídeo.