Shopify AR con tecnología de 3D Warehouse

Shopify AR les permite a los clientes que utilizan el navegador Safari en dispositivos iOS 12 ver versiones realistas e interactivas de sus productos en realidad aumentada (AR). Con AR, puedes brindarles a tus clientes un mejor sentido del tamaño, la escala y los detalles de tus productos. La aplicación 3D Warehouse facilita experiencias de AR al permitirte cargar modelos 3D y vincularlos a productos de tu tienda.

Para permitir que los clientes vean tus productos en AR,instala la aplicación 3D Warehouse,obtén modelos 3D de tus productos,agrega los modelos 3D a la aplicación,edita tu tema para habilitar AR Quick Looky, luegoagrega el emblema AR a tus productos 3D.

Paso 1: instalar la aplicación 3D Warehouse

Paso 2: conseguir los modelos 3D de los productos

Antes de que los clientes puedan ver tus productos en AR, necesitas modelos 3D de tus productos. Los modelos 3D son representaciones virtuales de un objeto o superficie en tres dimensiones. Te permiten ver el objeto desde cualquier ángulo.

Puedes contratar a un experto de Shopify para que te ayude a crear modelos 3D de tus productos. En el Mercado de Expertos de Shopify, busca expertos que ofrezcan el servicio decreación de modelos 3D, selecciona un experto y ponte en contacto.

Usando el formulario de contacto con expertos, indica los detalles de tu proyecto. Si deseas proporcionarfotos del productoydimensiones del productoahora, asegúrate de seguir las pautas vinculadas.

Al contactar a un experto, no te comprometes a contratar a un experto de Shopify. Este paso solo envía una solicitud al experto, quien luego podrá revisar tu solicitud. Si un experto decide trabajar contigo, se comunicará para brindarte más información sobre sus tarifas y sobre cómo empezar a trabajar juntos.

Si aún no has proporcionadolas fotos del productoylas dimensiones del productocomo parte de tu encargo de trabajo, el experto te las solicitará. Sigue las especificaciones a continuación cuando tomes fotos y medidas.

Fotos del producto

洛杉矶莫德罗3 d se克林使用有意者。帕拉crear el modelo 3D, el experto de Shopify necesita fotos de tus productos desde diferentes ángulos:

Al tomar fotos de tu producto, sigue estas pautas:

• Asegúrate de que tu producto esté bien iluminado.
• Asegúrate de que todo tu producto esté enfocado.
• Si es posible, no uses una cámara de teléfono celular. Para productos grandes, como muebles, usa una cámara con una lente de 50 mm. Para productos de tamaño pequeño a mediano, usa una lente de 70 mm o 100 mm.
• Toma fotos adicionales de cualquier detalle o textura particulares.
• Titula los archivos de las fotos de manera clara, comoblue vase - topoblue vase - left, y guárdalos en una carpeta claramente etiquetada.

Dimensiones del producto

帕拉crear modelos 3D precisos, el experto de Shopify necesita mediciones detalladas de tu producto. Al proporcionar mediciones, sigue estas pautas:

• Describe cada dimensión de tu producto en términos claros y simples.
• Proporciona las medidas enmm.
• Incluye un diagrama para mostrar a qué dimensiones corresponden las medidas.
• Si tienes dibujos técnicos o archivos CAD asociados con tu producto, inclúyelos también.

Ejemplo de cómo lograr la realización de un modelo 3D

Naomi está vendiendo este jarrón azul:

Instala la aplicación 3D Warehouse, y luego usa el Mercado de Expertos paracontratar a un experto de Shopifypara crear un modelo 3D del jarrón. Le proporciona al experto seis fotos de alta calidad tomadas con una cámara con una lente de 70 mm:

También le entrega al experto un diagrama de medición con las dimensiones correspondientes del producto en milímetros:

• La altura del jarrón (1) es de ____mm.
• De la parte superior del jarrón hasta la parte inferior del cuello del jarrón (2) hay ____mm.
• De la parte superior del cuello del jarrón hasta la parte inferior del jarrón (2) hay ____mm.
• El diámetro de la boca del jarrón (4) es de ____mm.
• El ancho del borde de la boca del jarrón (5) mide ____mm.
• El diámetro de la parte inferior del cuello del jarrón (6) es de ____mm.
• El jarrón tiene 8 caras hexagonales.
• La altura de las caras hexagonales (8) es de ____mm.
• El ancho de las caras hexagonales (9) es de ____mm.
• El diámetro de la parte más ancha del jarrón (10) es de ____mm.
• El diámetro de la parte inferior del jarrón (11) es de ____mm.
• El diámetro de los pies de espuma mide ____mm.

El experto de Shopify utiliza estas fotos y dimensiones para crear un modelo 3D del jarrón azul. El experto le envía a Naomi un archivo.glby.usdzpara que ellalos agregue a la aplicación 3D Warehouse.

Paso 3: comprobar la calidad del modelo

Cuando un experto de Shopify te envíe un modelo 3D, verifica que estás satisfecho con su calidad. El experto debe darte las instrucciones para revisar una vista previa del modelo.

Verifica el modelo desde todos los ángulos. Puedes usarglTF Viewerpara ver una vista previa de tus modelos 3D. Mientras revisas tu modelo, piensa en las siguientes preguntas:

• ¿La forma del modelo coincide con las fotos de referencia del producto que le proporcionaste al experto?
• ¿Todas las partes del modelo guardan proporcionalidad con respecto al resto?
• Si puedes obtener una vista previa del modelo en realidad aumentada, ¿la escala del modelo parece adecuada en comparación con el resto de la escena?
• ¿El modelo pareciera estar hecho con los mismos materiales que el producto?
• ¿Los materiales del modelo se ven estirados, borrosos o distorsionados?
• ¿Hay detalles como rasguños o rayones que hagan que los materiales del modelo parezcan más reales?
• Si algunas partes del producto son transparentes, brillantes o emiten luz, ¿se ven bien?
• ¿Todos los bordes parecen reales? ¿Alguno de ellos es demasiado afilado y necesita ser suavizado?
• Si hay detalles decorativos como un logo o texto, ¿pueden verse fácilmente?
• ¿Hay espacios o agujeros donde no debería haberlos?
• ¿El modelo 3D cumple con los requisitos técnicos de la plataforma Shopify?
  • El modelo 3D debe ser un archivo GLB.
  • El archivo GLB debe tener aproximadamente 4 MB.
  • El archivo GLB no puede sobrepasar los 15 MB.

El experto de Shopify debe construir el modelo 3D siguiendo unos estándares determinados. Para más información sobre esos estándares que te permitirán revisar mejor un modelo, consulta laCreación de modelos 3D para comerciantes.

Si crees que la calidad del modelo no es lo suficientemente buena, comunícate con el experto de Shopify y explícale cuál es el defecto.

Paso 4: agregar un modelo 3D a la aplicación 3D Warehouse

Una vez que hayas instalado la aplicación 3D Warehouse y hayas obtenido un modelo 3D, debes agregar el modelo a la aplicación 3D Warehouse.

Pasos:

1. En el panel de control de Shopify, haz clic enConfiguración>Aplicaciones y canales de ventas.

2. Desde la páginaAplicaciones y canales de ventas, haz clic en3D Warehouse.

3. Haz clic enAbrir aplicación.

4. Haz clic enAgregar un modelo 3D.

5. En el campoTítulo, introduce un título para el modelo 3D.

6. En el campoProducto vinculado, selecciona el producto y la variante a los que está asociado este modelo 3D, luego haz clic enSeleccionar producto.

7. Haz clic enCargar archivoy selecciona el archivo.usdz你proporciono el experto de Shopify。

8. Haz clic enGuardar.

Repite el proceso de carga para el archivo.gltfo el archivo.glb你proporciono el experto de Shopify。Asegúrate de vincularlo al mismo producto para tener ambos tipos de archivos de modelos 3D asociados con el producto.

Tipos de archivos aceptados

Los expertos de Shopify proporcionan dos tipos de archivos diferentes para cada modelo 3D, un archivo.usdzy un archivo.gltfo.glb. Diversas plataformas y funciones utilizan estos diferentes tipos de archivos. Por ejemplo, para que los clientes vean productos 3D en el navegador Safari en dispositivos iOS 12, debes subir un archivo.usdz. La mejor manera de asegurarte de que tu tienda online sea compatible con la realidad aumentada futura y las funciones 3D es subirambostipos de archivos.

Paso 5: editar tu tema para habilitar AR Quick Look

Debes editar tu código de tema para habilitar AR Quick Look, que es la característica que les permite a los clientes que usan el navegador Safari en dispositivos iOS 12 ver tus productos en 3D.

Pasos:

1. En el panel de control de Shopify, haz clic enConfiguración>Aplicaciones y canales de ventas.

2. Desde la páginaAplicaciones y canales de ventas, haz clic en欧宝体育官网入口首页.

3. Haz clic enAbrir canal de ventas.

4. Junto a tu tema actual, haz clic enAcciones>Editar código.

5. En la carpetaDiseño, haz clic en{/} theme.liquid.

6. Encuentre la etiqueta. Debe estar cerca de la parte superior del archivo.

7. Pega el siguiente código en la próxima línea:

1. Haz clic enGuardar.
2. En la carpetaSecciones, haz clic en{/} product-template.liquid.
3. Pegue el siguiente código en la parte superior del archivo:

![Quicklook library added to product template](/manual/apps/3d-warehouse/quicklook-product-template.png)

1. Haz clic enGuardar.

Si usas más de una plantilla de producto, agrega también el código a esos archivos de plantilla.

Paso 6: agregar el emblema AR a tus productos en 3D

Los clientes que usan dispositivos iOS 12 saben que pueden ver tu producto en 3D cuando ven el emblema AR superpuesto:

Debes editar el código de su tema para mostrar el emblema AR en las imágenes del producto.

Pasos:

1. En el panel de control de Shopify, haz clic enConfiguración>Aplicaciones y canales de ventas.

2. Desde la páginaAplicaciones y canales de ventas, haz clic en欧宝体育官网入口首页.

3. Haz clic enAbrir canal de ventas.

4. Junto a tu tema actual, haz clic enAcciones>Editar código.

5. En la carpetaSecciones, haz clic en{/} product-template.liquid.

6. Busca la sección de la plantilla asociada con la foto de tu producto. Busca palabras clave comoProductPhotoofeatured_image:

   

7. Dentro de la sección de fotos del producto, encuentra la primera etiqueta.

8. Pega el siguiente código en la línea de arriba de esa etiqueta:

{{product.selected_or_first_available_variant.id}}" style="display: none;">

![Product photo liquid with code](/manual/apps/3d-warehouse/product-image-liquid-with-code.png)

1. Haz clic enGuardar.
2. Abre el archivo que contiene el CSS de tu tema. Este archivo se encuentra generalmente en la carpeta行为ivosy la mayoría de las veces tiene un título como{/}主题.scss.liquid.
3. En la parte inferior del archivo, pega el siguiente código:

.ar-quicklook-overlay{position:absolute;width:100%;height:100%;top:0;z-index:2;}

1. Haz clic enGuardar.

Para probar tu modelo 3D, abre tu tienda online en un dispositivo con iOS 12 y navega hasta la página del producto. Toca el emblema AR en la imagen del producto para verla en 3D. Toca el emblema AR en la imagen del producto para verla en 3D.