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.

Ver un jarrón en 3D

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 Look y, luego agrega la insignia AR a tus productos 3D.

Paso 1: instalar la aplicación 3D Warehouse

Puedes instalar la aplicación 3D Warehouse utilizando la página de registro.

Pasos:

  1. Abre la página de registro.
  2. Introduce tu dominio de tienda myshopify.com.
  3. Haz clic en Instalar.
  4. Revisa los detalles; luego, haz clic en Instalar aplicación.

Puedes acceder a la aplicación 3D Warehouse en la página de Aplicaciones de tu panel de control de Shopify.

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 obtener modelos 3D de tus productos a través del Programa de Partners de Shopify.

Pasos:

  1. Desde tu panel de control de Shopify, haz clic en el menú de tu cuenta, luego haz clic en Contratar a un Shopify Expert:

    Contrata a un Shopify Expert

  2. Haz clic para expandir la sección Nueva funcionalidad.

  3. Haz clic en Crear modelos 3D de tus productos para realidad aumentada (a partir de USD $100).

  4. Responde a las preguntas requeridas. Si deseas proporcionar fotos del producto y dimensiones del producto ahora, asegúrate de seguir las pautas vinculadas.

  5. Haz clic en Enviar trabajo.

Cuando envías una solicitud de trabajo, no te comprometes a contratar a un Experto de Shopify. Este paso solo envía una descripción de tu proyecto a los expertos disponibles, quienes entonces revisarán tu solicitud. Si un experto decide trabajar contigo, se comunicará para brindarte más información sobre tus tarifas y sobre cómo iniciar el proceso.

Si aún no has proporcionado las fotos del producto y las dimensiones del producto como parte de tu solicitud de trabajo, el experto te las solicitará. Sigue las especificaciones a continuación cuando tomes fotos y medidas.

Fotos del producto

Los modelos 3D se crean utilizando fotos. Para crear el modelo 3D, el experto de Shopify necesita fotos de tus productos desde diferentes ángulos:

Ángulos de foto del producto

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, como blue vase - top o blue vase - left, y guárdalos en una carpeta claramente etiquetada.

Dimensiones del producto

Para 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 en mm.
  • 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:

Jarrón

Naomi instala la aplicación 3D Warehouse y, luego, usa el Mercado de servicios para encontrar un experto de Shopify para 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:

Ángulos de foto del producto

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

Jarrón

  • 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 .glb y .usdz para que ella los agregue a la aplicación 3D Warehouse.

Paso 3: comprobar la calidad del modelo

Cuando un Shopify Expert te proporcione un modelo en 3D, verifica que estás satisfecho con su calidad. El experto debe proporcionarte las instrucciones para obtener una vista previa del modelo.

Verifica el modelo desde todos los ángulos. Mientras lo haces, considera 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 Shopify Expert debe construir el modelo en 3D siguiendo unos estándares determinados. Para más información sobre esos estándares que te permitirán revisar mejor un modelo, consulta la Creación de modelos en 3D para comerciantes.

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

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

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

Pasos:

  1. Desde tu panel de control de Shopify, haz clic en Aplicaciones.
  2. Haz clic en 3D Warehouse.
  3. Haz clic en Agregar un modelo 3D.
  4. En el campo Título, introduce un título para el modelo 3D.
  5. En el campo Producto vinculado, selecciona el producto y la variante a los que está asociado este modelo 3D, luego haz clic en Seleccionar producto.
  6. Haz clic en Cargar archivo y selecciona el archivo .usdz que te proporcionó el experto de Shopify.
  7. Haz clic en Guardar.

Repite el proceso de carga para el archivo .gltf o el archivo .glb que te proporcionó 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 .usdz y un archivo .gltf o .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 subir ambos tipos 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. Desde tu panel de control de Shopify, haz clic en Tienda online.
  2. Junto a tu tema actual, haz clic en Acciones > Editar código.
  3. En la carpeta Diseño, haz clic en {/} theme.liquid.
  4. Encuentre la etiqueta <head>. Debe estar cerca de la parte superior del archivo.
  5. Pega el siguiente código en la próxima línea:
<script
  src="https://cdn.shopifycloud.com/ar-quicklook-js/assets/v1/shopify3d.js"
  crossorigin="anonymous"
></script>
  1. Haz clic en Guardar.

  2. En la carpeta Secciones , haz clic en {/} product-template.liquid.

  3. Pegue el siguiente código en la parte superior del archivo:

<script>
  (function(s3d) {
    if (!s3d) {
      console.warn('"window.Shopify3d" does not exist. Please ensure you\'ve added the <script> to your theme');
      return;
    }
    {% for variant in product.variants %}
      s3d.mapMetafieldAssets('{{ variant.id }}', '{{ variant.metafields.shopify3d['assets'] }}');
    {% endfor %}
  })(window.Shopify3d);
</script>

Biblioteca de Vista rápida agregada a la plantilla de producto

  1. Haz clic en Guardar.

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

Paso 6: agregar la insignia AR a tus productos en 3D

Los clientes que usan dispositivos iOS 12 saben que pueden ver tu producto en 3D cuando ven la insignia AR superpuesta:

Insignia AR superpuesta

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

Pasos:

  1. Desde tu panel de control de Shopify, haz clic en Tienda online.
  2. Junto a tu tema actual, haz clic en Acciones > Editar código.
  3. En la carpeta Secciones , haz clic en {/} product-template.liquid.
  4. Busca la sección de la plantilla asociada con la foto de tu producto. Busca palabras clave como ProductPhoto o featured_image:
    Producto foto líquido
  5. Dentro de la sección de fotos del producto, encuentra la primera etiqueta <img... >.
  6. Pega el siguiente código en la línea de arriba de esa etiqueta:
<div class="ar-quicklook-overlay" data-shopify-3d-variant-id="{{ product.selected_or_first_available_variant.id }}" style="display: none;"></div>

Producto foto líquido con código

  1. Haz clic en Guardar.
  2. Abre el archivo que contiene el CSS de tu tema. Este archivo se encuentra generalmente en la carpeta Activos y la mayoría de las veces tiene un título como {/}theme.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 en Guardar.

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

¿Estas listo(a) para comenzar a vender con Shopify?

Pruébala gratis