Integrar el probador virtual de gafas en una tienda Shopify

Una tienda puede tener el plugin instalado, los modelos 3D disponibles y un botón del probador virtual que funciona, sin tener todavía una integración coherente con el catálogo. La montura que se abre puede corresponder a otro calibre; el color elegido en el probador virtual puede no llegar al carrito; una nueva colección puede quedarse sin asociar. La calidad de la integración se mide por la relación entre datos comerciales, activos digitales y comportamiento del tema durante todo el ciclo de vida de los productos.

Para un minorista del sector óptico, el probador virtual añade al catálogo un modelo 3D que debe mantener la misma identidad que el producto que se vende. Shopify gestiona la variante comercial, sus datos y el proceso de pedido. Virtual Try-On (VTO) gestiona el modelo 3D y su uso. Conectar los dos ámbitos exige reglas explícitas sobre asociaciones, disponibilidad, selecciones y actualizaciones. Shopify ya muestra modelos 3D en el contenido multimedia del producto, con un tema compatible¹; la integración de la que hablamos aquí es otra cosa: el probador virtual sobre el rostro y el vínculo, mantenido en el tiempo, entre la variante comercial y el activo digital aprobado.

El catálogo comercial y el de activos digitales tienen estados distintos

Una variante puede estar publicada en la tienda sin tener todavía un modelo 3D aprobado. También puede tener un activo digital listo y no estar disponible temporalmente para la venta. Que una variante esté publicada, tenga un activo digital listo o esté disponible para la venta son condiciones distintas; ninguna implica las otras.

En el modelo de Shopify, la variante tiene un identificador, opciones e información sobre la disponibilidad; la política de inventario puede permitir o impedir la venta cuando no hay stock². La existencia de un modelo 3D no resuelve ninguna de estas decisiones comerciales.

La tienda debe definir cuándo mostrar el probador virtual. Si una variante se puede comprar pero falta el activo digital, la ficha sigue funcionando con sus contenidos habituales. Si el activo digital está listo pero el producto no se puede pedir, puede seguir siendo consultable, si procede, dejando clara la falta de disponibilidad. La decisión depende del surtido y de la función de la página: venta en curso, presentación de próximos lanzamientos o archivo.

La cobertura del probador virtual debe interpretarse como la intersección entre los productos comercialmente relevantes y los modelos 3D de las variantes que realmente se pueden usar. Una lista de archivos entregados y una lista de productos que se pueden comprar describen dos condiciones distintas. La función publicada debe respetar ambas.

El SKU y el identificador de la variante cumplen funciones distintas

En la relación con un proveedor o con una Library compartida, los SKU y los códigos de barras permiten buscar una asociación comercial. Dentro de Shopify, en cambio, el identificador de la variante designa el objeto sobre el que trabajan la tienda y las operaciones del carrito.

Cada variante tiene su propio código: en él se apoya la asociación con el modelo 3D.

Shopify distingue explícitamente entre SKU y código de barras, y recomienda SKU únicos para las variantes. La documentación advierte de que los códigos duplicados pueden causar problemas en las integraciones con servicios de terceros³. Para el minorista multimarca también es importante entender qué significa el código: un SKU interno asignado por la tienda puede ser distinto de la referencia con la que el fabricante identifica la misma montura.

La asociación requiere un vínculo estable entre estas referencias. Corregir el nombre de la ficha no debería modificar la identidad de la variante; en cambio, un cambio de SKU puede comprometer un proceso que usa precisamente ese código para buscar el activo digital. Eliminar y volver a crear un producto puede obligar a reconstruir los vínculos que la propia tienda basa en sus identificadores.

En el plugin de ARShades, la asociación se busca por SKU, EAN o UPC, sin deducir la asociación del nombre ni de la imagen del producto. La sincronización crea los vínculos con los modelos 3D disponibles en la Library y los conserva en el catálogo de activos digitales de ARShades conectado a la tienda⁴.

El control debe llegar hasta la variante física. Un código formalmente válido puede estar asociado al color equivocado o a otro calibre. Por eso, la verificación de los datos y la verificación visual cumplen funciones complementarias: la primera controla el vínculo; la segunda, lo que el cliente ve realmente.

La selección debe mantenerse coherente hasta el carrito

En una ficha de producto, una persona puede elegir el color antes de abrir el Virtual Try-On, cambiarlo mientras se prueba las gafas y continuar después con el pedido. El equipo que implementa la integración debe establecer cómo se propagan estos cambios.

Si el probador virtual se abre en una variante predeterminada, la página debe dejar clara su relación con la variante seleccionada en la tienda. Si el probador virtual permite elegir otra variante, al volver a la ficha se puede actualizar su selección o bien requerir un nuevo paso explícito. Lo que hay que evitar es dejar dos selecciones divergentes sin indicarlo.

La documentación del carrito de Shopify usa el ID de la variante para añadir el artículo⁵. Así, un resultado visualmente correcto en el probador virtual puede llevar igualmente a un proceso de compra erróneo si el botón de compra conserva el identificador anterior. Debe poder comprobarse que la última imagen vista y el artículo añadido corresponden a la misma variante.

Un caso de prueba útil parte de una montura con varios colores y al menos dos calibres. Se entra por un enlace que preselecciona una variante, se cambia la elección en el probador virtual y se comprueban el nombre, el precio, la disponibilidad y la línea del carrito. Shopify documenta los enlaces directos a la variante mediante el parámetro ?variant=; sin ese parámetro, el tema abre la variante seleccionada o la primera disponible, y el resultado de la verificación cambia⁶. El resultado que debe obtenerse depende de las funciones efectivamente habilitadas en la integración; si el probador virtual permite añadir al carrito, esa función requiere la misma verificación.

El mismo principio se aplica a configuraciones ópticas más complejas. Probarse la montura y configurar la lente graduada pueden depender de sistemas distintos. El modelo 3D que se muestra debe aclarar a qué combinación se refiere y dejar al proceso de pedido la validación de las opciones comerciales previstas.

El tema decide dónde aparece la función y cómo se comporta

Las extensiones de aplicaciones de tema [theme app extensions] de Shopify separan los bloques de aplicación [app blocks], que se pueden colocar en las secciones compatibles, de las incrustaciones de aplicaciones [app embeds], que se usan también para elementos superpuestos y componentes transversales. Las incrustaciones de aplicaciones deben activarse en el tema; añadir un bloque y activar la capa de integración correspondiente pueden ser pasos distintos⁷.

Esta estructura reduce la necesidad de intervenir directamente en los archivos del tema, pero el equipo que implementa la integración aún debe tener en cuenta varias dependencias: la plantilla utilizada, la posición del bloque, la lógica del selector de variantes y las actualizaciones dinámicas de la página. Una tienda puede usar plantillas distintas para categorías o marcas, y un cambio publicado en la plantilla principal puede no llegar a todas las fichas afectadas.

También hay que verificar el comportamiento en componentes que actualizan solo una parte de la página, como algunas vistas rápidas del producto. El tema puede sustituir un selector o un botón durante el cambio de variante; la integración debe seguir leyendo el estado correcto, sin duplicar controles ni mantener referencias al producto anterior.

Probar la integración en un tema no publicado sirve para comprobar estos aspectos. Después, antes de abrirla al público, hay que verificar el dominio real, las plantillas efectivamente asignadas y las condiciones en que se activan los scripts. Además, una tienda headless o un proceso de compra muy personalizado obliga a evaluar la integración en su propia arquitectura, más allá de la compatibilidad declarada para los temas estándar.

La cobertura depende del tráfico que recibe cada parte del surtido

Decir que el probador virtual está disponible en cien variantes todavía no indica qué parte de la experiencia comercial está cubierta. Esas cien variantes podrían incluir los productos más demandados o una parte marginal del surtido. También hay que considerar cuántas monturas representan: el límite de la suscripción se cuenta en variantes vinculadas, no en productos, así que cien variantes pueden ser veinte monturas en cinco colores⁴.

Para un análisis útil, conviene distinguir la proporción de variantes cubiertas de la proporción de visitas a fichas que ofrecen el probador virtual. La segunda medida requiere datos de tráfico de la tienda: no se deduce del recuento de modelos 3D. Las dos proporciones pueden ser muy distintas, sobre todo cuando una campaña concentra las visitas en pocos productos.

Por eso, la elección del primer grupo de monturas debería conjugar relevancia comercial, variedad y disponibilidad de los activos digitales. Un surtido compuesto solo por modelos fáciles de representar puede servir para una primera verificación técnica, pero dice poco sobre la calidad del servicio en el catálogo completo. Los acetatos translúcidos, los metales finos y las distintas lentes ponen a prueba aspectos diferentes del modelo 3D.

La cobertura también debe revisarse con el tiempo. Si la tienda publica una nueva colección sin completar las asociaciones, el número absoluto de modelos 3D puede mantenerse igual mientras disminuye la proporción del tráfico cubierta. La supervisión del catálogo debe acompañar a las campañas y a las nuevas incorporaciones.

La sincronización forma parte de la gestión del producto

El catálogo cambia también después del lanzamiento: nuevos códigos, productos retirados, variantes añadidas, modelos 3D corregidos. Cada cambio puede afectar a un lado distinto del vínculo.

La documentación de ARShades indica que hay que repetir la sincronización cuando se añaden productos, se modifican SKU o códigos de barras, o cuando hay nuevos modelos 3D disponibles. El vínculo actúa sobre el catálogo de activos digitales de ARShades y no modifica los productos de Shopify⁴. La sincronización debe considerarse, por ello, una actividad del ciclo del surtido, con un responsable asignado.

La disponibilidad del servicio depende también del acceso a la plataforma: licencia, dominio autorizado y conjunto de variantes activas. Un producto puede tener una asociación correcta y un activo digital disponible, mientras que un problema con una de estas condiciones impide que el probador virtual se abra. La verificación debería distinguir si el problema afecta a la licencia, al dominio autorizado o al conjunto de variantes activas, porque cada caso requiere una intervención distinta.

Un proceso sostenible vincula la publicación de los nuevos productos a un control de la cobertura: qué variantes están asociadas, cuáles esperan la producción de su activo digital y cuáles deben seguir siendo consultables sin probador virtual. Descatalogar una montura requiere una decisión análoga sobre lo que sigue visible y sobre los enlaces todavía en circulación.

Evaluar el servicio en el proceso de compra

La fiabilidad de la integración incluye la experiencia de quien no usa el probador virtual. Los scripts y los activos digitales no deberían comprometer la consulta de la ficha, la selección de las opciones ni la compra habitual. La documentación de las extensiones de Shopify recomienda limitar la carga de los scripts a las páginas en las que se necesitan⁷. Los requisitos de Built for Shopify fijan un umbral: una app no debe reducir la puntuación de Lighthouse de la tienda en más de diez puntos, y los elementos insertados en el tema deben crearse con las extensiones de aplicaciones de tema⁸. Es un criterio que el minorista puede pedir a cualquier proveedor. La carga inicial y la que se añade al abrir el probador virtual deben evaluarse por separado.

Para quien abre el probador virtual, lo que importa es si se carga la variante correcta y si al volver a la tienda se conserva una selección coherente. Para el responsable de e-commerce, estas comprobaciones son previas a la interpretación del posible efecto en las ventas: una conversión mayor entre quienes eligen probarse las gafas no demuestra por sí sola la contribución causal de la función, como analizamos en detalle en el artículo sobre el proyecto piloto.

La integración se vuelve fiable cuando la tienda consigue mantenerla coherente a medida que cambian el surtido, el tema y la disponibilidad. El criterio de éxito abarca la primera puesta en marcha y el trabajo de las semanas siguientes: vincular una nueva variante, corregir un código, publicar un tema actualizado y seguir mostrando al cliente las gafas que podrá pedir.

Fuentes

1. Shopify Help Center, Product media: 3D models. ↩

2. Shopify Developer Documentation, objeto Liquid variant, identificador, disponibilidad y política de inventario. ↩

3. Shopify Help Center, Using SKUs to manage your inventory. ↩

4. Knowledge Base ARShades, New synchronisation y Catalogue synchronisation. ↩ ↩² ↩³

5. Shopify Developer Documentation, Cart API reference. ↩

6. Shopify Developer Documentation, Product merchandising, Variants, sección sobre los variant deep links. ↩

7. Shopify Developer Documentation, Configure theme app extensions, secciones App blocks, App embed blocks y Performance. ↩ ↩²

8. Shopify Developer Documentation, Built for Shopify requirements, 2.2.1 Minimize the impact on store speed y 3.2.1. ↩