Passa al contenuto principale
Versione: 1.0.0

Ultimo aggiornamento: 01/04/2026

App Blocks (Componenti)

ARShades si integra con i temi Shopify OS 2.0 utilizzando gli App Blocks. Il posizionamento dipende dal componente: Pulsante VTO e Visualizzatore 3D sono destinati alle pagine prodotto, mentre ARPDMeter può essere posizionato in qualsiasi sezione/template del tema compatibile.

Come Aggiungere i Blocchi​

  1. Apri l'Editor Tema Shopify (puoi farlo dalla scheda "Personalizza Tema" del plugin).
  2. Per il Pulsante VTO e il Visualizzatore 3D, naviga al tuo Template Prodotto (solitamente Default Product).
  3. Per ARPDMeter, naviga alla sezione/template compatibile desiderato dove vuoi posizionarlo.
  4. Nella barra laterale, clicca + Aggiungi Blocco nella sezione pertinente.
  5. Scorri fino ad App e seleziona il blocco desiderato.

Impostazioni App Block

  1. Trascina il blocco nella posizione desiderata.
  2. Clicca sul blocco aggiunto per aprire il pannello impostazioni sulla destra e configura le opzioni descritte di seguito.
  3. Salva le modifiche.

Blocchi Disponibili​

1. Pulsante VTO (Virtual Try-On)​

Questo è il componente principale per avviare l'esperienza di virtual try-on.

Opzioni di Personalizzazione​

  • Configurazione VTO:

    • Layout VTO: Scegli tra versioni dell'interfaccia (v1, v2, v3).
    • Modalità SKU Singolo: Se attiva (predefinita), apre direttamente la variante selezionata.

  • Aspetto del Pulsante:

    • Testo: Personalizza l'etichetta (es. "Virtual Try-On").
    • Icona: Mostra/nascondi icona, carica icona personalizzata, regola dimensione (16px-48px).
    • Colori: Definisci colori di sfondo, hover e testo.
    • Dimensioni: Larghezza (100%, Auto, 50%), Padding personalizzato, Raggio bordi (0-30px), Dimensione font (12-24px).

  • Configurazione Modale:

    • Dimensioni: Larghezza/altezza desktop e mobile (50-100%).
    • Stile: Raggio bordi modale, Opacità overlay (0-100%), Colore di sfondo.
    • Testo di Caricamento: Messaggio mostrato durante l'apertura (es. "Caricamento...").

Nota: I blocchi VTO appariranno solo sui prodotti che sono sincronizzati con successo e hanno i metafield ARShades corretti.

2. Pulsante Visualizzatore 3D​

Apre un visualizzatore 3D interattivo del prodotto in una modale.

Opzioni di Personalizzazione​

Simile al pulsante VTO, offre opzioni complete per adattarsi al tuo tema:

  • Pulsante: Testo (es. "Vedi in 3D"), Icona personalizzabile (predefinita cubo 3D), Colori (Predefinito: Blu Scuro #1a1a2e), Dimensioni e Bordi.
  • Modale 3D: Controllo completo su dimensioni, raggio bordi, opacità sfondo e testo di caricamento ("Caricamento 3D...").

Nota: I blocchi 3D appariranno solo sui prodotti che sono sincronizzati con successo e hanno i metafield ARShades corretti.

3. Componente ARPDMeter (PD Meter)​

Aggiunge un'esperienza guidata di misurazione della distanza interpupillare direttamente in qualsiasi sezione compatibile del tuo storefront.

ARShades PD Meter nel selettore blocchi

Prerequisito — ARShades VTO Embed

Il blocco ARPDMeter richiede che l'ARShades VTO Embed App Embed sia abilitato nel tema. Questo embed carica il bundle JavaScript da cui il PD Meter dipende. Senza di esso, cliccando il pulsante si produrrà l'errore: VTO bundle not loaded. Ensure vto-embed-loader is enabled in theme settings.

Questo è richiesto anche se non stai utilizzando le funzionalità VTO. Vedi Componenti Embed per come abilitarlo.

Opzioni di Personalizzazione​

Clicca sul blocco ARShades PD Meter per aprire il pannello impostazioni:

Pannello impostazioni ARShades PD Meter

  • Configurazione PD Meter:

    • Lingua PD Meter: Lingua per l'interfaccia di misurazione e la guida audio. Utilizza automaticamente la lingua dello store se supportata (English, Italiano, Deutsch, Español, Français). Ricade sull'inglese se la lingua dello store non è supportata o non è configurato alcun override.

  • Impostazioni Pulsante:

    • Testo Pulsante: Etichetta CTA (predefinita: "Measure PD").
    • Mostra Icona: Attiva/disattiva la visibilità dell'icona accanto al testo del pulsante.
    • Icona Personalizzata: Carica un'icona personalizzata o usa il mirino predefinito.
    • Dimensione Icona: Regolabile tramite slider (predefinita: 24px).
    • Colore Pulsante: Colore di sfondo (predefinito: #000000).
    • Colore Hover Pulsante: Colore stato hover (predefinito: #333333).
    • Colore Testo Pulsante: Colore del testo (predefinito: #FFFFFF).
    • Raggio Pulsante: Raggio bordi in pixel (predefinito: 8px).
    • Dimensione Font: Dimensione del testo del pulsante (predefinita: 16px).
    • Larghezza Pulsante: Modalità larghezza — Full Width, Auto o 50%.

Comportamento Funzionale (Alto Livello)​

  1. L'utente clicca il pulsante PD Meter dalla sezione dove il blocco è posizionato.
  2. L'interfaccia di misurazione si apre con guida visiva e audio nella lingua configurata.
  3. Un risultato di misurazione leggibile viene visualizzato al termine del flusso.

L'intera esperienza funziona nel browser senza download di app aggiuntive.

Dipendenza dalla Licenza​

Se la licenza ARPDMeter non è attiva, il blocco visualizzerà un messaggio di avviso invece del componente funzionale:

Blocco ARPDMeter senza licenza attiva

Per tutti i dettagli sul componente ARPDMeter, vedi la pagina dedicata Componente ARPDMeter.