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 Quick Look de AR y, luego, agrega el distintivo 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: agregar un modelo 3D a la aplicación 3D Warehouse

Una vez que hayas instalado la aplicación 3D Warehouse y haya obtenido un modelo 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 / .glb. Estos diferentes tipos de archivos son utilizados por diferentes plataformas y características. Por ejemplo, para que los clientes vean productos 3D en el navegador Safari en dispositivos iOS 12, debes cargar un archivo .usdz. La mejor manera de asegurarte de que tu tienda online sea compatible con la realidad aumentada futura y las características 3D es cargar ambos tipos de archivos.

Paso 4: editar el tema para habilitar Quick Look de AR

Debes editar tu código de tema para habilitar Quick Look de AR, que es la característica que les permite a los clientes que usan 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 5: agregar la insignia AR a tus productos 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