Cómo instalar el visor 3D de Complete en Shopify

Antes de empezar

En Complete Dashboard, abre “Mis productos”, elige la pieza y copia el código de inserción. Tiene este formato:

<iframe src="https://www.completemagazine.com.br/ar/CODIGO-DEL-PRODUCTO" width="100%" height="520" frameborder="0" allow="xr-spatial-tracking; fullscreen; camera" style="border:0;border-radius:12px"></iframe>

Lo que va después de /ar/ es el código de esa pieza. Guárdalo: en el segundo camino, es lo único que se lleva a Shopify.

Camino 1: en la descripción del producto

1. 01

   Abre el producto

   En el panel de Shopify, entra en Productos y abre el producto que va a tener el 3D.

2. 02

   Cambia el editor a HTML

   En el cuadro de la descripción, haz clic en el botón para mostrar el HTML, marcado con el símbolo <>. El texto pasa a verse como código.

3. 03

   Pega el código

   Pega el código de inserción en el lugar donde debe aparecer el visor, de preferencia al comienzo de la descripción.

4. 04

   Guarda y revisa

   Guarda el producto y abre la página en la tienda, en la computadora y en el teléfono. En el teléfono, toca el botón de realidad aumentada para confirmar que se abre la cámara.

Es el camino adecuado para probar con pocos productos. La desventaja es que el visor queda donde el tema muestra la descripción, que en muchos temas está debajo del precio y del botón de compra.

Camino 2: un bloque en el tema para todos los productos

1. 01

   Crea el campo en el producto

   En Configuración, entra en la sección de datos personalizados o metacampos, elige Productos y agrega una definición de metacampo con el nombre “Complete 3D”, el identificador custom.complete_3d y el tipo texto de una sola línea.

2. 02

   Complétalo en cada producto

   Al final de la página de cada producto aparece el nuevo campo. Pega ahí solo el código de la pieza, lo que va después de /ar/.

3. 03

   Agrega el bloque en el tema

   En Tienda online, Temas, Personalizar, abre la plantilla de página de producto y agrega un bloque “Liquid personalizado” en la sección de información del producto, cerca de la galería.

4. 04

   Pega el código del bloque

   Pega el fragmento de abajo en el bloque y guarda. Solo muestra el visor cuando el producto tiene el campo completo.

{% if product.metafields.custom.complete_3d.value != blank %}
  <iframe src="https://www.completemagazine.com.br/ar/{{ product.metafields.custom.complete_3d.value }}" title="Producto en 3D" width="100%" height="520" frameborder="0" allow="xr-spatial-tracking; fullscreen; camera" style="border:0;border-radius:12px"></iframe>
{% endif %}

A partir de ahí, poner un producto nuevo en 3D se reduce a generar la pieza en el Dashboard y pegar su código en el campo del producto, sin volver al tema.

Si algo no aparece

Si el recuadro queda en blanco, revisa que el código se haya pegado completo, con el atributo allow, que es el que habilita la cámara en el teléfono. Si no aparece el botón de realidad aumentada, abre la página en el propio teléfono, y no en la vista previa del editor, que no siempre transmite esos permisos. Si el bloque no aparece, revisa que el identificador del metacampo sea exactamente custom.complete_3d.