Realidad aumentada en Shopify: tecnología 3D Warehouse

El gigante de las plataformas de tiendas online ha implementado la realidad aumentada en sus servicios. Para todos aquellos que tengáis vuestra tienda online en Shopify, tenéis la grandísima suerte de poder implementarla y ofrecer una experiencia innovadora a vuestros clientes. En el artículo de hoy, os contamos cómo podéis hacerlo en unos sencillos pasos.

¿Para qué?

En internet encontramos una dificultad pasmosa para poder diferenciarnos del resto de nuestros competidores. Las soluciones más primarias son realizar actos de marketing concretos, contenido, posicionamiento o políticas de empresa distintas. Sin embargo, en este mismo marco encontramos información a disposición de cualquiera, por lo que sea cota dicha diferenciación.

Por otro lado, la idea de implementar la realidad aumentada en los procesos de compra-venta puede ser el empujón que un negocio online necesita para despegar y distinguirse de los demás.

1.- Instalación

Para empezar a instalar la aplicación 3D Warehouse debemos ir a la página de registro de la aplicación y poner nuestro dominio de Shopify. Le damos clic a instalar ¡No os olvidéis de revisar los detalles! Después, basta con acceder a nuestro panel de control de Shopify para acceder a la aplicación 3D Warehouse. Recordad que esta aplicación es la que va a implementar la realidad aumentada en nuestra tienda online.

2.- Obtener modelos 3D de nuestros productos

Para mostrar los productos en nuestra tienda en realidad aumentada, debemos tener modelos 3D de los mismos. La solución más rápida es que vayamos a nuestro panel de control, nos dirijamos a nuestra cuenta y hagamos clic en “contratar un Shopify Expert”. Después tendremos que expandir la sección “nueva funcionalidad”.
Ya en el menú, hacer clic en crear modelos 3D de tus productos para realidad aumentada. Respondemos todas las preguntas, proporcionamos fotos y dimensiones del producto y hacemos clic en enviar trabajo.
El experto decidirá si trabaja con nosotros o no, se pondrá en contacto con nosotros y nos dirá cuánto nos cuesta el trabajo.

3.- Revisa la calidad del modelo

El experto os mandará el modelo 3D para que lo veamos y así dar el OK. Todo experto nos debe proporcionar una vista previa, por lo que cuidado con aceptar algo que no habéis visto. Fijaros que sea igual al producto que vendéis, esto es realmente importante porque, de lo contrario, podéis tener problemas con clientes.

4.- Agregar el modelo a la aplicación

Nos vamos a nuestro panel de control de Shopify y nos metemos en “aplicaciones”. Hacemos clic en la aplicación “3D Warehouse”, agregamos un modelo e introducimos el titulo para el modelo del 3D. Luego, nos dirigimos a “producto vinculado”, en el que seleccionaremos el producto. Cargaremos el archivo que nos proporciona el experto y le damos a “guardar”.

5.- Habilitar AR Quick Look

Pensad que tenemos que editar nuestro tema para poder habilitarlo, ya que no es compatible con todos. Así que nos vamos al panel de control de nuestra tienda online y hacemos clic en “Acciones” y editamos el código. Una vez dentro de la carpeta de “diseño”, hacemos cli en “{/} theme.liquid”. Buscamos la etiqueta <head> y pegamos este código en la próxima línea:

<script

  src="https://cdn.shopifycloud.com/ar-quicklook-js/assets/v1/shopify3d.js"

  crossorigin="anonymous"

></script>
Guardamos. En la carpeta secciones hacemos clic en {/} product-template.liquid y pegamos el siguiente código en la parte superior:

<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>

6.- Añade insignia AR a tus productos

Debes ir a tu panel de control, “acciones”-> editar código y en la carpeta secciones hacemos clic en {/} product-template.liquid. Buscad la foto buscando “productPhoto o “feautred_image. Dentro de la secciones de fotos, encontrad la primera etiqueta <img> y pegad esto 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> Guardamos. Abrid el archivo CSS de vuestro team. Se encuentra en la carpeta Activos y tiene el titulo de {/}theme.scss.liquid. En la parte inferior pegamos esto: .ar-quicklook-overlay {  position: absolute;  width: 100%;  height: 100%;  top: 0;  z-index: 2;  } Guardaremos y habremos terminado el proceso.

Videos

Ultimas Noticias