Integrare la prova virtuale degli occhiali in un negozio Shopify

Un negozio può avere il plugin installato, i modelli 3D disponibili e un pulsante di prova funzionante, senza avere ancora un’integrazione coerente con il catalogo. La montatura aperta può corrispondere a un altro calibro; il colore scelto nella prova può non arrivare al carrello; una nuova collezione può restare esclusa dall’abbinamento. La qualità dell’integrazione si misura nella relazione fra dati commerciali, asset digitali e comportamento del tema durante l’intero ciclo di vita dei prodotti.

Per un retailer di occhiali, la prova virtuale aggiunge al catalogo una rappresentazione che deve seguire la stessa identità del prodotto venduto. Shopify governa la variante commerciale, i suoi dati e il percorso d’ordine. Il servizio VTO governa la rappresentazione digitale e il suo utilizzo. Collegare i due ambiti richiede regole esplicite su abbinamenti, disponibilità, selezioni e aggiornamenti. Shopify mostra già modelli 3D fra i media di prodotto, con un tema compatibile;¹ l’integrazione di cui parliamo qui riguarda altro: la prova sul volto e il legame, mantenuto nel tempo, fra la variante commerciale e l’asset approvato.

Il catalogo commerciale e quello 3D hanno stati diversi

Una variante può essere pubblicata sul negozio senza avere ancora un modello 3D approvato. Può anche avere un asset pronto ed essere temporaneamente indisponibile alla vendita. Questi stati non sono intercambiabili.

Nel modello di Shopify, la variante possiede un identificatore, opzioni e informazioni sulla disponibilità; la politica di inventario può consentire o impedire la vendita in assenza di stock.² L’esistenza di una rappresentazione 3D non risolve nessuna di queste decisioni commerciali.

Il negozio deve quindi definire quando esporre la prova. Se una variante è acquistabile ma manca l’asset, la scheda continua a funzionare con i suoi contenuti ordinari. Se l’asset è pronto ma il prodotto non è ordinabile, si può eventualmente mantenere la consultazione, rendendo chiara l’indisponibilità. La decisione dipende dall’assortimento e dal ruolo della pagina: vendita corrente, anteprima o archivio.

La copertura della prova va letta come intersezione fra prodotti commercialmente pertinenti e varianti digitali effettivamente utilizzabili. Un elenco di file consegnati e un elenco di prodotti acquistabili descrivono due condizioni diverse. La funzione pubblicata deve rispettarle entrambe.

SKU e identificatore della variante svolgono ruoli differenti

Nel dialogo con un fornitore o con una Library condivisa, SKU e codici a barre permettono di cercare una corrispondenza commerciale. Dentro Shopify, l’identificatore della variante individua invece l’oggetto su cui lavorano il negozio e le operazioni di carrello.

Ogni variante ha il suo codice: su quello si regge l’abbinamento con il modello 3D.

Shopify distingue esplicitamente SKU e barcode e raccomanda SKU univoci per le varianti. La documentazione segnala che codici duplicati possono creare problemi nelle integrazioni con servizi terzi.³ Per il retailer multibrand è importante capire anche il significato del codice: uno SKU interno assegnato dal negozio può essere diverso dal riferimento con cui il produttore identifica la stessa montatura.

L’abbinamento richiede una relazione stabile fra questi riferimenti. Una correzione al nome della scheda non dovrebbe modificare l’identità della variante; un cambio di SKU può invece compromettere un processo che usa proprio quel codice per cercare l’asset. Eliminare e ricreare un prodotto può richiedere di ricostruire relazioni basate sugli identificatori del negozio.

Nel plugin ARShades, la ricerca della corrispondenza usa SKU, EAN o UPC, senza ricavare l’abbinamento dal nome o dall’immagine del prodotto. La sincronizzazione crea i collegamenti verso i modelli disponibili in Library e li conserva nel catalogo ARShades associato al negozio.⁴

Il controllo deve arrivare fino alla variante fisica. Un codice formalmente valido può essere associato al colore sbagliato o a un calibro diverso. Per questo, la verifica dei dati e quella visiva hanno funzioni complementari: la prima controlla il collegamento, la seconda ciò che il cliente vede effettivamente.

La selezione deve restare coerente fino al carrello

In una scheda prodotto, una persona può scegliere il colore prima di aprire il Virtual Try-On, cambiarlo durante la prova e continuare poi verso l’ordine. Il progetto deve stabilire come si propagano questi cambiamenti.

Se il VTO si apre su una variante predefinita, la pagina deve rendere comprensibile il rapporto con quella selezionata nel negozio. Se la prova permette di scegliere un’altra variante, il ritorno alla scheda può aggiornarne la selezione oppure richiedere un nuovo passaggio esplicito. Ciò che va evitato è lasciare due selezioni divergenti senza segnalarlo.

La documentazione del carrello Shopify usa l’ID della variante per l’aggiunta dell’articolo.⁵ Di conseguenza, una prova visivamente corretta può comunque produrre un percorso errato se il controllo d’acquisto conserva l’identificatore precedente. L’ultima immagine vista e l’articolo aggiunto devono poter essere ricondotti alla stessa variante.

Un caso di verifica utile parte da una montatura con più colori e almeno due calibri. Si entra da un collegamento che preseleziona una variante, si modifica la scelta nella prova e si controllano nome, prezzo, disponibilità e riga del carrello. Shopify documenta i link diretti alla variante tramite il parametro ?variant=; senza quel parametro il tema apre la variante selezionata o la prima disponibile, e il risultato della verifica cambia.⁶ Il risultato richiesto dipende dalle funzioni effettivamente abilitate nell’integrazione; l’eventuale aggiunta al carrello dentro il VTO richiede la stessa verifica.

Lo stesso principio vale per configurazioni ottiche più articolate. La prova della montatura e la configurazione della lente di prescrizione possono appartenere a sistemi distinti. La rappresentazione mostrata deve chiarire a quale combinazione si riferisce, lasciando al percorso d’ordine la validazione delle opzioni commerciali previste.

Il tema determina dove e come vive la funzione

Le estensioni di tema Shopify separano gli app block, collocabili nelle sezioni compatibili, dagli app embed, usati anche per elementi sovrapposti e componenti trasversali. Gli embed richiedono l’attivazione nel tema; aggiungere un blocco e attivare il relativo livello di integrazione possono essere passaggi distinti.⁷

Questa struttura riduce la necessità di interventi diretti sui file del tema, ma lascia al progetto alcune dipendenze: template utilizzato, posizione del blocco, logica del selettore di variante e aggiornamenti dinamici della pagina. Un negozio può usare template diversi per categorie o marchi, e una modifica pubblicata sul template principale può non raggiungere tutte le schede interessate.

Va verificato anche il comportamento in componenti che aggiornano solo una parte della pagina, come alcune viste rapide del prodotto. Il tema può sostituire un selettore o un pulsante durante il cambio di variante; l’integrazione deve continuare a leggere lo stato corretto, senza duplicare controlli o mantenere riferimenti al prodotto precedente.

La prova su un tema non pubblicato è utile per controllare questi aspetti. Prima dell’apertura al pubblico occorre poi verificare il dominio reale, i template effettivamente assegnati e le condizioni con cui vengono attivati gli script. Un negozio headless o un percorso fortemente personalizzato richiede inoltre di valutare l’integrazione sulla propria architettura, oltre alla compatibilità dichiarata per i temi standard.

La copertura dipende dall’assortimento che riceve attenzione

Dire che la prova virtuale è disponibile su cento varianti non indica ancora quanta parte dell’esperienza commerciale sia coperta. Le cento varianti potrebbero comprendere i prodotti più richiesti oppure una porzione marginale dell’assortimento. Vanno lette anche come montature: il limite dell’abbonamento si conta sulle varianti collegate, non sui prodotti, quindi cento varianti possono essere venti montature in cinque colori.⁴

Per un’analisi utile conviene distinguere la quota di varianti coperte dalla quota di visite alle schede che offrono la prova. La seconda misura richiede dati di traffico del negozio: non si ricava dal conteggio dei modelli digitali. Le due quote possono essere molto diverse, soprattutto quando una campagna concentra le visite su pochi prodotti.

La scelta del primo gruppo di montature dovrebbe quindi tenere insieme rilevanza commerciale, varietà e disponibilità degli asset. Un assortimento composto soltanto da modelli facili da rappresentare può essere adatto a una prima verifica tecnica, ma dice poco sulla qualità del servizio per il catalogo completo. Acetati traslucidi, metalli sottili e lenti differenti mettono alla prova caratteristiche diverse della rappresentazione.

La copertura va riletta anche nel tempo. Se il negozio pubblica una nuova collezione senza completare gli abbinamenti, il numero assoluto di modelli VTO può restare invariato mentre la quota del traffico servita diminuisce. Il monitoraggio del catalogo deve seguire le campagne e i nuovi arrivi.

La sincronizzazione fa parte della gestione del prodotto

Il catalogo cambia anche dopo il lancio: nuovi codici, prodotti rimossi, varianti aggiunte, modelli digitali corretti. Ogni cambiamento può interessare un lato diverso della relazione.

La documentazione ARShades indica di ripetere la sincronizzazione quando si aggiungono prodotti, si modificano SKU o codici a barre, oppure diventano disponibili nuovi modelli. Il collegamento opera sul catalogo ARShades e non modifica i prodotti Shopify.⁴ La sincronizzazione va quindi considerata un’attività del ciclo di assortimento, con una responsabilità assegnata.

La disponibilità del servizio dipende anche dall’accesso alla piattaforma: licenza, dominio autorizzato e perimetro delle varianti attive. Un prodotto può avere un abbinamento corretto e un asset disponibile, mentre un problema su uno di questi livelli impedisce l’apertura. La verifica dovrebbe distinguere i tre casi, perché richiedono interventi differenti.

Un processo sostenibile collega la pubblicazione dei nuovi prodotti a un controllo della copertura: quali varianti sono abbinate, quali attendono la produzione dell’asset e quali devono restare consultabili senza prova. La dismissione di una montatura richiede un’analoga decisione su ciò che rimane visibile e sui collegamenti ancora in circolazione.

Valutare il servizio nel percorso d’acquisto

L’affidabilità dell’integrazione comprende il comportamento di chi non usa il VTO. Script e asset non dovrebbero compromettere la consultazione della scheda, la selezione delle opzioni o l’acquisto ordinario. La documentazione delle estensioni Shopify raccomanda di limitare il caricamento degli script alle pagine in cui servono.⁷ I requisiti Built for Shopify fissano una soglia: un’app non deve ridurre il punteggio Lighthouse del negozio di più di dieci punti, e gli elementi inseriti nel tema vanno costruiti con le theme app extensions.⁸ È un criterio che il retailer può chiedere a qualsiasi fornitore. Il carico iniziale e quello introdotto all’apertura della prova vanno valutati separatamente.

Per chi avvia la funzione, interessa sapere se viene caricata la variante corretta e se il ritorno al negozio conserva una selezione coerente. Per il responsabile e-commerce, questi controlli precedono la lettura dell’eventuale effetto sulle vendite: una conversione maggiore fra chi sceglie di provare non dimostra da sola il contributo causale della funzione, come approfondiamo nell’articolo sul progetto pilota.

L’integrazione diventa affidabile quando il negozio riesce a mantenerla coerente mentre cambia. Il criterio di riuscita comprende quindi il primo avvio e il lavoro delle settimane successive: collegare una nuova variante, correggere un codice, pubblicare un tema aggiornato e continuare a mostrare al cliente l’occhiale che potrà ordinare.

Fonti

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

2. Shopify Developer Documentation, oggetto Liquid variant, identificatore, disponibilità e politica di inventario. ↩

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

4. Knowledge Base ARShades, Nuova sincronizzazione e Sincronizzazione catalogo. ↩ ↩² ↩³

5. Shopify Developer Documentation, Cart API reference. ↩

6. Shopify Developer Documentation, Product merchandising, Variants, sezione sui variant deep links. ↩

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

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