Shopify AR con tecnologia 3D Warehouse

Shopify AR consente ai clienti con dispositivi iOS 12 e browser Safari di visualizzare versioni realistiche e interattive dei tuoi prodotti in realtà aumentata (Augmented Reality, AR) L'AR fornisce ai clienti un'idea più precisa delle dimensioni, della scala e dei dettagli dei tuoi prodotti. Con l'app 3D Warehouse puoi offrire esperienze di AR caricando modelli 3D e collegandoli ai prodotti del tuo negozio.

Visualizzazione di un vaso in 3D

Per consentire ai clienti di visualizzare i tuoi prodotti in AR,installa l'app 3D Warehouse,richiedi modelli 3D dei tuoi prodotti,aggiungi i modelli 3D all'app,modifica il tema in modo da abilitare AR Quick Lookeaggiungi il badge AR ai tuoi prodotti 3D.

Passaggio 1: installa l'app 3D Warehouse

Passaggio 2: richiedi modelli 3D dei tuoi prodotti

Per consentire ai clienti di visualizzare i prodotti in AR, occorre creare i relativi modelli 3D. I modelli 3D sono rappresentazioni virtuali tridimensionali di un oggetto o una superficie, che ti permettono di visualizzare l'oggetto sotto ogni angolazione.

Puoi contattare un Esperto Shopify che ti aiuti a creare modelli 3D per i tuoi prodotti. Nell'Experts Marketplace di Shopify, cerca Esperti che offrano il servizio dicreazione di modelli 3D, selezionane uno e contattalo.

All'interno del modulo per contattare un Esperto, fornisci dettagli sul tuo progetto. Se vuoi fornire subitofoto dei prodottiedimensioni dei prodotti, segui il link alle linee guida.

Quando contatti un Esperto Shopify, lo fai senza impegno. In questa fase invii solo una richiesta all'Esperto, che può quindi procedere a esaminarla. Se un Esperto decide di collaborare con te, ti contatterà per fornirti ulteriori informazioni sulle tariffe e su come iniziare a lavorare insieme.

Se nella richiesta di lavoro non hai già fornito lefoto del prodottoe ledimensioni del prodotto, l'esperto richiederà tali informazioni. Per scattare le foto e prendere le misure, segui le specifiche riportate di seguito.

Foto dei prodotti

I modelli 3D vengono creati a partire da foto. Per creare i modelli 3D, l'esperto Shopify necessita di foto dei tuoi prodotti scattate da diverse angolazioni:

Angolazioni per le foto dei prodotti

Quando scatti foto del tuo prodotto, segui queste linee guida:

  • Assicurati che il prodotto sia ben illuminato.
  • Verifica che tutte le parti del prodotto siano messe a fuoco.
  • Se possibile, non utilizzare la fotocamera di un cellulare. Per prodotti di grandi dimensioni, ad esempio mobili, utilizza una fotocamera con un obiettivo da 50 mm. Per prodotti di piccole e medie dimensioni, utilizza un obiettivo da 70 o 100 mm.
  • Scatta foto aggiuntive di texture o dettagli particolari.
  • Assegna ai file delle foto titoli semplici, comeblue vase - topoblue vase - left, e archiviali in una cartella chiaramente etichettata.

Dimensioni del prodotto

Per creare modelli 3D accurati, all'esperto Shopify occorrono misurazioni dettagliate del prodotto. Quando prendi le misure, attieniti alle seguenti linee guida:

  • Descrivi ogni dimensione del tuo prodotto in termini chiari e semplici.
  • Fornisci le misure inmm.
  • Includi un diagramma per mostrare a quali dimensioni corrispondono le misure.
  • Se possiedi disegni tecnici o file CAD associati al prodotto, includi anche quelli.

Esempio di richiesta di modelli 3D

Naomi vende questo vaso blu:

Vaso

Installa l'app 3D Warehouse e utilizza Experts Marketplace percontattare un esperto Shopifyper creare un modello 3D del vaso. Naomi fornisce all'esperto sei foto ad alta risoluzione scattate con una fotocamera dotata di obiettivo da 70 mm:

Angolazioni per le foto dei prodotti

Naomi fornisce inoltre un diagramma delle misure con le dimensioni del prodotto corrispondenti in millimetri:

Vaso

  • L'altezza del vaso (1) è ____ mm
  • La parte superiore del vaso fino alla base del collo (2) è ____ mm
  • La base del collo fino alla base del vaso (3) è ____ mm
  • Il diametro della bocca del vaso (4) è ____ mm
  • La larghezza del bordo della bocca (5) è ____ mm
  • Il diametro della base del collo (6) è ____ mm
  • Il vaso ha 8 facce esagonali
  • L'altezza delle facce esagonali (8) è ____ mm
  • La larghezza delle facce esagonali (9) è ____ mm
  • Il diametro della parte più larga del vaso (10) è ____ mm
  • Il diametro della base del vaso (11) è ____ mm
  • Il diametro dei piedini in schiuma è ____ mm

L'esperto Shopify utilizza queste foto e le dimensioni per creare un modello 3D del vaso blu. L'esperto invia a Naomi un file.glbe.usdzdaaggiungere all'app 3D Warehouse.

Passaggio 3: verifica la qualità del modello

Quando un esperto Shopify ti consegna un modello 3D, verificane la qualità. L'esperto dovrebbe fornirti le istruzioni per visualizzare un'anteprima del modello.

Controlla il modello da tutte le angolazioni. Puoi utilizzare ilVisualizzatore glTFper visualizzare l'anteprima dei tuoi modelli 3D. Esaminando il modello, interrogati su quanto segue:

  • La forma del modello corrisponde alle foto di riferimento del prodotto che hai fornito all'esperto?
  • Le singole parti sono proporzionate al resto del modello?
  • Se hai la possibilità di visualizzare un'anteprima del modello in realtà aumentata, la scala del modello sembra corretta rispetto allo sfondo?
  • Il modello sembra realizzato con gli stessi materiali del prodotto?
  • I materiali del modello sembrano allungati, sfocati o distorti?
  • Sono presenti dettagli, ad esempio graffi o striature, che rendono più realistici i materiali del modello?
  • Eventuali parti trasparenti, riflettenti o luminose del modello sono rese in modo adeguato?
  • I bordi hanno un aspetto realistico? Alcuni di essi sono troppo netti e devono essere smussati?
  • Eventuali dettagli decorativi, ad esempio un logo o parti di testo, sono ben visibili?
  • Sono presenti lacune o vuoti indesiderati?
  • Il modello 3D soddisfa i requisiti tecnici della piattaforma Shopify?
    • Il modello 3D deve essere un file GLB.
    • Il file GLB dovrebbe essere di circa 4 MB.
    • Il file GLB non deve superare i 15 MB.

L'esperto Shopify deve creare il modello 3D seguendo determinati standard. Per ottenere maggiori informazioni su tali standard e poter ottimizzare la verifica di un modello, consultaCreare modelli 3D per i merchant.

Se ritieni che la qualità del modello sia insufficiente, contatta l'esperto Shopify e illustra i problemi riscontrati.

Passaggio 4: aggiungi i modelli 3D all'app 3D Warehouse

Dopo aver installato l'app 3D Warehouse e aver acquisito un modello 3D, questo deve essere aggiunto all'app.

Procedura:

  1. Dal pannello di controllo Shopify clicca suImpostazioni>应用程序e canali di vendita.

  2. Dalla pagina应用程序e canali di venditaclicca su3D Warehouse.

  3. Clicca苏Apri app.

  4. Clicca苏Aggiungi modello 3D.

  5. Nel campoTitolo, inserisci un titolo per il modello 3D.

  6. Nel campoProdotto collegato, seleziona il prodotto e la variante a cui questo modello 3D è associato e clicca suSeleziona prodotto.

  7. Clicca苏Carica Filee seleziona il file.usdzfornito dall'esperto Shopify.

  8. Clicca苏Salva.

Ripeti la procedura di caricamento per il file.gltfo.glbfornito dall'esperto Shopify. Assicurati di collegarlo allo stesso prodotto, in modo che entrambi i tipi di file del modello 3D siano associati al prodotto corretto.

Tipi di file accettati

Per ogni modello 3D, gli esperti Shopify forniscono due diversi tipi di file, un file.usdze un file.gltfo.glb. Questi tipi di file sono utilizzabili per varie piattaforme e funzionalità. Per esempio, per consentire ai clienti di visualizzare prodotti in 3D su dispositivi iOS 12 con browser Safari, devi caricare un file.usdz. Il modo migliore per avere la certezza che il tuo negozio online sia compatibile con la futura realtà aumentata e con le funzionalità 3D è caricareentrambii tipi di file.

Passaggio 5: modifica il tema per abilitare AR Quick Look

È necessario modificare il codice del tuo tema per attivare AR Quick Look, la funzionalità che consente ai clienti che utilizzano dispositivi iOS 12 e browser Safari di visualizzare i tuoi prodotti in 3D.

Procedura:

  1. Dal pannello di controllo Shopify clicca suImpostazioni>应用程序e canali di vendita.

  2. Dalla pagina应用程序e canali di venditaclicca su欧宝体育官网入口首页.

  3. Clicca苏Apri canale di vendita.

  4. Accanto al tema corrente, clicca suAzioni>Modifica codice:

  5. Nella cartellaLayout, clicca su{/} theme.liquid.

  6. Individua il tag, che dovrebbe trovarsi nella parte superiore del file.

  7. Nella riga successiva, incolla il seguente codice:

  1. Clicca苏Salva.
  2. Nella cartellaSezioni, clicca su{/} product-template.liquid.
  3. Incolla il seguente codice nella parte superiore del file:
![Quicklook library added to product template](/manual/apps/3d-warehouse/quicklook-product-template.png)
  1. Clicca苏Salva.

Se utilizzi più di un modello di prodotto, aggiungi il codice anche a questi file.

Passaggio 6: aggiungi il badge AR ai tuoi prodotti 3D

I clienti che utilizzano dispositivi iOS 12 sanno di poter visualizzare il prodotto in 3D quando viene visualizzato il badge AR sovrapposto:

Badge AR sovrapposto

Per visualizzare il badge AR sulle immagini dei prodotti, è necessario modificare il codice del tema.

Procedura:

  1. Dal pannello di controllo Shopify clicca suImpostazioni>应用程序e canali di vendita.

  2. Dalla pagina应用程序e canali di venditaclicca su欧宝体育官网入口首页.

  3. Clicca苏Apri canale di vendita.

  4. Accanto al tema corrente, clicca suAzioni>Modifica codice:

  5. Nella cartellaSezioni, clicca su{/} product-template.liquid.

  6. Individua la sezione del modello associata alla foto del prodotto. Cerca parole chiave comeProductPhotoofeatured_image:

    Product photo liquid

  7. Nella sezione delle foto del prodotto, individua il primo tag.

  8. Nella riga al di sopra del tag, incolla il seguente codice:

{{product.年代elected_or_first_available_variant.id}}" style="display: none;">
![Product photo liquid with code](/manual/apps/3d-warehouse/product-image-liquid-with-code.png)
  1. Clicca苏Salva.
  2. Apri il file che contiene il CSS del tema. Questo file si trova, in genere, nella cartellaRisorsee spesso ha un titolo simile a{/} theme.scss.liquid.
  3. In fondo al file, incolla il seguente codice:
.ar-quicklook-overlay{position:absolute;width:100%;height:100%;top:0;z-index:2;}
  1. Clicca苏Salva.

Per testare il tuo modello 3D, apri il negozio online su un dispositivo iOS 12 tramite browser Safari e vai alla pagina del prodotto. Tocca il badge AR nell'immagine del prodotto per visualizzarlo in 3D.

Sei pronto per iniziare a vendere con Shopify?

Provalo, è gratis