Shopify Modelos de productos 3D: GLB, AR y guía de flujo de trabajo del visor

shopify 3d product models workflow

TL;DR

  • Shopify admite de forma nativa modelos de productos 3D: no se requiere ninguna aplicación para mostrarlos o habilitar AR.
  • Shopify acepta los modelos GLB y USDZ. Un flujo de trabajo primero GLB es conveniente porque Shopify crea el formato complementario necesario para los dispositivos compatibles.
  • El verdadero cuello de botella a menudo no es el rendimiento, sino la obtención de un modelo 3D. Puede crear, generar o subcontratar uno.
  • Optimice antes de cargar: mantenga el número de polígonos y los tamaños de textura razonables para que los dispositivos móviles se mantengan rápidos.
  • Elige tu camino: medios 3D nativos (gratis) para la mayoría de las tiendas; una aplicación de terceros o un visor/configurador de Liquid personalizado para necesidades avanzadas.

Shopify admite modelos de productos 3D como medios de productos, lo que permite a los compradores rotar un modelo en la página del producto y usar AR en teléfonos compatibles. La parte más difícil suele ser obtener un modelo 3D adecuado. Esta guía cubre el flujo de trabajo desde la creación y optimización del modelo hasta la carga, la configuración del visor y las pruebas móviles.

Cómo funcionan los modelos de productos 3D en Shopify

Shopify admite modelos 3D como medio nativo de producto junto con imágenes y videos. Un tema compatible puede representar el modelo en la galería de productos sin requerir una aplicación de tienda separada.

Los compradores pueden rotar, hacer zoom e inspeccionar el modelo en el navegador. En dispositivos móviles compatibles, la página del producto también puede ofrecer "Ver en tu espacio" para que el artículo pueda colocarse en el entorno del comprador a través de AR.

Shopify acepta modelos de productos GLB y USDZ y procesa un modelo cargado para que los formatos compatibles estén disponibles en todos los dispositivos. Esta guía utiliza un flujo de trabajo GLB primero porque GLB empaqueta geometría, materiales y texturas en un solo archivo. Verifique los requisitos de medios actuales del producto de Shopify antes de la entrega.

shopify 3d product media and ar viewer

¿De dónde provienen tus modelos 3D?

Puedes construir un modelo, generar uno con AI o encargarle a un artista 3D. Elija según la precisión requerida del producto, el tamaño del catálogo, el presupuesto y el calendario de lanzamiento.

Hágalos usted mismo: Blender o CAD

Las herramientas Blender y CAD brindan el mayor control sobre las dimensiones, la topología, los UV y los materiales. Esta ruta se adapta a productos y artículos de ingeniería que deben coincidir con medidas exactas, pero requiere experiencia en modelado y más tiempo de producción.

Generar con AI

Para una iteración más rápida, Tripo Imagen en 3D puede convertir la imagen de un producto en un punto de partida en 3D. Aún así, los resultados deben compararse con el producto real, especialmente en superficies ocultas, piezas delgadas, simetría y escala exacta.

Un flujo de trabajo típico es simple:

  1. Sube una foto del producto (o ingresa un mensaje de texto).
  2. Genera el modelo 3D con AI.
  3. Revisa y perfecciona el resultado si es necesario.
  4. Exporta el modelo como GLB y súbelo a Shopify.

Esta ruta puede acortar la producción de catálogos grandes, pero los productos complejos o de dimensiones críticas pueden necesitar una limpieza manual antes de que sean adecuados para 3D o AR de cara al cliente.

Comprar o subcontratar

Los activos existentes pueden funcionar para productos genéricos, mientras que la mercancía única generalmente requiere un modelo encargado. Solicite escala del mundo real, materiales PBR, topología limpia y un entregable compatible con Shopify.

AI es útil cuando la velocidad y la cobertura del catálogo son importantes; El modelado manual o el refinamiento profesional son más seguros cuando la precisión dimensional o la calidad superior de los primeros planos son esenciales. Un flujo de trabajo híbrido puede combinar una generación rápida con una limpieza específica del artista.

shopify 3d model sourcing options

Optimice el modelo antes de cargarlo

Los modelos web deben equilibrar la calidad visual con el tamaño de descarga y el rendimiento del dispositivo. Verifique la geometría, texturas, escala, orientación y origen antes de cargarlo.

Polígonos y tamaño de archivo

Eliminar geometría que no mejora la silueta del producto o el detalle visible. Las mallas de menor complejidad generalmente se descargan y procesan de manera más eficiente en hardware móvil.

Para mallas densas o generadas por AI, Tripo Smart Mesh puede crear una topología más limpia y con menos polígonos para Web3D y flujos de trabajo en tiempo real. Comprima texturas y use Draco solo cuando la canalización completa de exportación y visor lo admita.

Shopify actualmente acepta cargas de modelos 3D de hasta 500 MB y optimiza automáticamente archivos de más de 15 MB. Trate 15 MB como un umbral de optimización, no como límite de carga, y verifique los requisitos actuales en la documentación multimedia del producto Shopify.

Escala y orientación del mundo real

Las unidades, la orientación o la ubicación del origen incorrectas pueden hacer que un producto parezca demasiado grande, demasiado pequeño o mal posicionado en AR.

Exporta a escala del mundo real, confirma los ejes hacia arriba y hacia adelante del modelo y coloca el origen en un punto de contacto lógico como el centro de la base. Pruebe el resultado en las superficies donde es probable que los clientes lo coloquen.

Texturas & PBR

Elimine los materiales no utilizados, utilice resoluciones de textura sensibles y combine mapas en un atlas cuando eso reduzca la sobrecarga sin dañar los detalles visibles.

Utiliza materiales estándar de PBR y prueba su apariencia en el visor de Shopify. Los materiales altamente reflectantes, transparentes o en capas pueden necesitar ajustes adicionales en distintos navegadores y dispositivos.

shopify 3d model optimization checklist

Agregar un modelo 3D a un producto Shopify (Paso a paso)

Después de la optimización, cargue el modelo como medio del producto y configure su presentación inicial antes de publicarlo.

  1. Abre Shopify Admin y ve a Productos, luego selecciona el producto que deseas actualizar.
  2. En la sección Medios, haz clic en Agregar medios y carga un archivo GLB o USDZ compatible. Shopify lo procesa y lo agrega a la galería multimedia.
  3. Seleccione el modelo 3D cargado, haga clic en Editar archivo y use el editor sin código de Shopify para ajustar el entorno o la iluminación, el fondo y la rotación y el zoom iniciales del modelo.
  4. Vista previa de la página del producto. Verifique la rotación y el zoom en el escritorio, luego pruebe "Ver en su espacio" en dispositivos iOS y Android compatibles.

Para conocer la ruta del editor actual y los controles disponibles, consulte la documentación del editor de modelos 3D de Shopify.

add 3d model to shopify product

Activa AR: "Ver en tu espacio"

Un único modelo cargado puede admitir tanto el visor interactivo del escaparate como AR después de que Shopify lo procese en formatos compatibles. Normalmente no es necesario administrar activos de escaparate separados para cada dispositivo compatible.

El control "Ver en tu espacio" aparece solo cuando el dispositivo, navegador, tema y modelo son compatibles con AR. Pruebe en dispositivos físicos en lugar de depender de una vista previa del escritorio.

Los dispositivos Apple compatibles usan USDZ con Apple Quick Look; Los dispositivos Android compatibles pueden utilizar Google Scene Viewer. Shopify prepara formatos de modelo compatibles, mientras que el tema es responsable de representar los medios del producto y AR controles.

Antes de publicar tu producto, prueba la experiencia en un dispositivo móvil real:

  1. Abra la página del producto en un teléfono inteligente compatible.
  2. Confirma que aparece el botón "Ver en tu espacio".
  3. Toca el botón AR y coloca el producto en el suelo o en una mesa.
  4. Verifica que el tamaño, la orientación y la iluminación del modelo se vean naturales.
shopify view in your space ar workflow

3D nativo versus aplicaciones de terceros versus visor personalizado

Elija entre medios nativos del producto, un configurador de terceros o una implementación de tema personalizada según la interacción que requiere el producto.

Medios 3D nativos

Los medios 3D nativos son la ruta más sencilla para la rotación, el zoom y son AR compatibles. Funciona mejor cuando el tema ya maneja correctamente los medios del producto Shopify.

Configuradores y aplicaciones de terceros

Utilice una plataforma de terceros cuando los compradores deban cambiar materiales, configurar componentes, activar puntos de acceso o interactuar con opciones de productos dentro de la experiencia 3D.

  • Cambio de color y material
  • Configuración del producto
  • Selección de componentes
  • Puntos de acceso interactivos
  • Experiencias de producto guiadas

Visor de líquidos personalizado

Para temas personalizados, comience con la ruta Liquid compatible de Shopify: renderice los medios del modelo de producto con model_viewer_tag y siga los medios del producto de Shopify y la guía de Shopify-XR para AR específico del dispositivo.

Una integración sin formato de Google <model-viewer> aún puede ser una opción avanzada cuando el tema necesita controles personalizados, puntos de acceso, animaciones o comportamiento de carga, pero requiere que el desarrollador administre la accesibilidad, el estado de los medios, los respaldos y la configuración AR.

¿Cuál deberías elegir?

  • ¿Necesitas algo simple? Usa los medios 3D nativos de Shopify.
  • ¿Necesita configuración o personalización del producto? Elija una plataforma 3D de terceros.
  • ¿Necesita un control total? Amplíe la integración de medios nativos de Shopify o cree un visor personalizado avanzado.
shopify native 3d vs custom viewer

¿Realmente ayudan los modelos 3D? Rendimiento y conversión

El 3D puede agregar un contexto útil al producto, pero su valor depende del producto y la implementación. Mida el rendimiento y el comportamiento del cliente en lugar de asumir que todos los catálogos se benefician por igual.

Performance: Mito versus Realidad

El comportamiento de carga varía según el tema y el espectador. La geometría y las texturas optimizadas reducen los costos de transferencia, memoria y renderizado, pero los comerciantes aún deben probar páginas de productos representativos en dispositivos móviles de rango medio y conexiones más lentas.

Conversión y devoluciones

El 3D interactivo y AR pueden ayudar a los compradores a comprender la escala, la forma y los detalles que son difíciles de comunicar con imágenes planas.

Los resultados de conversión y tasa de retorno varían ampliamente según la categoría, la audiencia, la calidad de los activos y la ubicación. Trate los estudios de casos externos como contexto en lugar de un pronóstico, y evalúe la función con datos de participación, conversión y devolución específicos de la tienda.

Cuando el 3D vale la pena

No todos los productos necesitan un modelo 3D. El mayor valor proviene de artículos en los que los compradores se benefician al comprender la escala, los materiales o el ajuste espacial antes de comprar.

Los modelos 3D son especialmente útiles para:

  • Muebles y decoración del hogar.
  • Zapatos y complementos de moda
  • Joyería y artículos de lujo
  • Electrónica de consumo
  • Equipos industriales y productos técnicos
  • Productos con opciones configurables

Para productos económicos o altamente estandarizados, las fotografías tradicionales pueden ya proporcionar suficiente información. Una buena estrategia es comenzar con los SKU de mayor valor o mayor retorno, medir el compromiso y las conversiones y luego expandir el 3D al resto de su catálogo si los resultados justifican la inversión.

shopify 3d performance and conversion

Errores comunes y solución de problemas

La mayoría de las fallas provienen de la complejidad de los activos, la escala incorrecta, las condiciones del dispositivo no compatibles o el manejo de medios temáticos. Utilice las comprobaciones a continuación antes de publicar.

El modelo se carga lentamente o no se carga en el móvil

Si la carga es lenta, inspecciona la geometría, la resolución de la textura, el recuento de materiales y el tamaño total del archivo. Shopify acepta archivos de hasta 500 MB y optimiza archivos de más de 15 MB, pero aún son preferibles los activos más pequeños y eficientes para la entrega móvil.

Lista de verificación:

  • Reducir el número de polígonos.
  • Comprime texturas.
  • Exporta un GLB optimizado.
  • Prueba tanto en Wi-Fi como en datos móviles.

El producto parece tener el tamaño incorrecto en AR

Si el producto parece enorme o pequeño en AR, la escala u orientación del modelo probablemente sea incorrecta. Asegúrese de que utilice unidades del mundo real, que tenga el eje de avance correcto y que el origen esté ubicado en la base del objeto antes de exportar.

Lista de verificación:

  • Verificar unidades (escala del mundo real).
  • Verifique la orientación del modelo.
  • Confirma que el origen/pivote esté colocado correctamente.
  • Prueba nuevamente en un dispositivo móvil real.

El botón "Ver en tu espacio" no aparece

Si el modelo gira pero AR no está disponible, verifique que la carga sea un modelo GLB o USDZ compatible, pruebe en un dispositivo físico compatible y confirme que el tema muestre los controles AR de Shopify.

Lista de verificación:

  • Confirma que el modelo es un formato compatible.
  • Prueba en un dispositivo físico iPhone o Android.
  • Asegúrate de que el sistema operativo y el navegador sean compatibles con AR.
  • Vuelva a publicar el producto si reemplazó el modelo recientemente.

AR No funciona en iPhone

En iOS, prueba en Safari en un dispositivo compatible con Quick Look. Si AR aún falla, permita que finalice el procesamiento de Shopify, vuelva a verificar la escala y los materiales y confirme que el tema utiliza la integración de medios y productos admitidos por Shopify.

Lista de verificación:

  • Prueba en Safari en un iPhone o iPad compatible.
  • Verifica que Apple Quick Look esté disponible en el dispositivo.
  • Consulte la documentación más reciente de Shopify si el problema persiste.

Unos pocos minutos de prueba en dispositivos móviles reales antes de la publicación pueden detectar la mayoría de los problemas de manera temprana, lo que garantiza que los clientes obtengan una experiencia 3D fluida y AR.

shopify 3d model troubleshooting

Preguntas frecuentes

¿Qué formato de archivo usa Shopify para los modelos 3D?

Shopify acepta los modelos de producto GLB y USDZ. Un flujo de trabajo GLB-first es conveniente para la entrega web porque empaqueta el modelo y las texturas en un solo archivo, mientras que Apple Quick Look usa USDZ. Shopify procesa las cargas para proporcionar formatos compatibles en todos los dispositivos compatibles.

¿Cómo agrego un modelo 3D a un producto Shopify?

Abra Shopify Administrador → Productos, seleccione el producto y cargue un archivo GLB o USDZ compatible en Medios. Seleccione el modelo cargado y use Editar archivo para ajustar su presentación inicial. Obtenga una vista previa del escaparate y pruebe AR en dispositivos móviles físicos antes de publicar.

¿Los modelos de productos 3D son gratuitos en Shopify o necesito una aplicación?

La función nativa de medios de producto de Shopify no requiere una aplicación de visualización separada para 3D básico y compatible con AR. Una aplicación de terceros aún puede resultar útil para configuradores, cambio de materiales, puntos de acceso, análisis o integraciones especializadas. Compruebe que el tema activo admita Shopify medios del producto.

¿Cómo habilito AR para mis productos Shopify?

Cargue un modelo 3D compatible y use un tema que represente Shopify medios de productos y AR controles. Shopify prepara activos GLB y USDZ compatibles; Los dispositivos Apple compatibles usan Quick Look, mientras que los dispositivos Android compatibles pueden usar Scene Viewer. Confirme el resultado en dispositivos reales.

¿Los modelos 3D ralentizan mi tienda Shopify?

Pueden hacerlo si los recursos son grandes o el tema los carga de manera ineficiente. Reduzca la geometría innecesaria, optimice las texturas y pruebe la página del producto real en hardware móvil y redes más lentas. El comportamiento de carga depende de la implementación, por lo que debe medirse en lugar de confiar en una afirmación de rendimiento universal.

¿Dónde puedo conseguir modelos 3D para mis productos Shopify?

Puedes modelar el producto en Blender o CAD, generar un punto de partida con Tripo Imagen en 3D, comprar un activo con licencia adecuado o encargar a un artista 3D. Cualquiera que sea la ruta que elija, verifique las dimensiones, los materiales, la topología y los derechos de uso antes de publicar.

¿Cuál es la diferencia entre GLB y USDZ en Shopify?

GLB es un formato compacto orientado a la web que puede incluir geometría, materiales y texturas en un solo archivo. USDZ se utiliza para Apple Quick Look AR. Shopify acepta ambos formatos y procesa la carga para experiencias de dispositivos y escaparates compatibles.

Conclusión

Shopify proporciona la base del producto y los medios para 3D interactivo y es compatible con AR; la calidad de la experiencia depende del modelo, el tema y las pruebas. Cree u obtenga un recurso preciso, optimícelo, cargue un formato compatible y valide el resultado en dispositivos reales. Para crear un modelo inicial a partir de una imagen de producto, pruebe Tripo AI Studio.

Compartir en

Genera cualquier cosa en 3D

Haz clic abajo para unirte a millones de creadores 3D. Prueba la generación de modelos de ultra alta fidelidad y texturas PBR de primer nivel.