Come aggiungere la realtà aumentata alle schede prodotto di Shopify e WooCommerce
In breve: Per aggiungere la realtà aumentata a una scheda prodotto serve un modello 3D del prodotto in formato GLB (Android e web) e USDZ (iPhone), alla dimensione reale del prodotto. Shopify supporta i modelli 3D come contenuti multimediali del prodotto; su WooCommerce o su qualsiasi altro sito si inserisce il componente gratuito model-viewer con entrambi i file.
Passo 1: crea i file 3D
- Prodotti piatti (stampe d'arte, poster, tele, tappeti, campioni di carta da parati): carica la foto del prodotto su jpgtousdz e inserisci la larghezza o l'altezza reale. Ottieni GLB e USDZ in quella misura.
- Oggetti (vasi, sedie, scarpe): registra un video lento intorno al prodotto e usa il convertitore da video a 3D, inserendo l'altezza reale.
- Mantieni ogni file leggero (texture di 2048 px o meno) per non rallentare la scheda prodotto.
Passo 2a: Shopify
- Nell'area di amministrazione di Shopify apri il prodotto, poi Contenuti multimediali (Media), e carica il file GLB come modello 3D.
- Shopify lo mostra con il suo visualizzatore 3D e i temi che lo supportano aggiungono sugli smartphone un pulsante "Visualizza nel tuo spazio".
- Controlla il prodotto su un iPhone e su uno smartphone Android. Il centro assistenza di Shopify elenca i limiti attuali di dimensione dei file e i temi supportati.
Passo 2b: WooCommerce, WordPress o qualsiasi sito web
Carica il GLB e il USDZ nella libreria media, poi aggiungi alla descrizione del prodotto un blocco HTML personalizzato con model-viewer:
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<model-viewer src="/media/print-50x70.glb" ios-src="/media/print-50x70.usdz"
ar ar-modes="quick-look scene-viewer webxr" ar-placement="wall"
camera-controls alt="Stampa 50 x 70 cm"></model-viewer>Passo 2c: l'opzione senza codice
Se non puoi modificare la pagina, aggiungi un pulsante o un codice QR che rimanda al link del visualizzatore AR di jpgtousdz per quel prodotto. Si apre in realtà aumentata su iPhone e Android, senza app.
Controlli prima della pubblicazione
| Controllo | Perché |
|---|---|
| La dimensione reale è corretta | I clienti valutano la misura dalla realtà aumentata; una scala sbagliata causa resi. |
| Il posizionamento è giusto (parete o pavimento) | Le opere d'arte vanno alla parete, i mobili sul pavimento. |
| Funziona su iPhone e Android | Ognuno usa un file diverso. |
| Testo alternativo impostato | Accessibilità e ricerca. |
Provalo ora
Trasforma una foto in un USDZ e un GLB a dimensioni reali in pochi secondi, oppure un video in un modello 3D. La prima conversione di una foto è gratis.
Foto di prodotto in ARFAQ
Shopify ha bisogno del USDZ?
Carica il GLB su Shopify: ci pensa lui alla visualizzazione. Tieni comunque anche un USDZ, nel caso serva al tuo tema o a un altro canale.
WooCommerce supporta la realtà aumentata in modo nativo?
No. Usa un plugin oppure inserisci model-viewer con i file GLB e USDZ come mostrato sopra.
Quanto costa?
model-viewer è gratuito. La conversione di una foto in AR su jpgtousdz è gratis la prima volta, poi rientra in un abbonamento. L'API costa $0.15 a foto e $1.50 a modello 3D da video.