Shopify AR con tecnologia 3D Warehouse

Attenzione

L'app 3D Warehouse è deprecata e non sarà disponibile per l'installazione. Puoi caricare modelli 3D direttamente dalla pagina Prodotti. Maggiori informazioni sui Media prodotto.

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.

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 Look e aggiungi il badge AR ai tuoi prodotti 3D.

Passaggio 1: installa l'app 3D Warehouse

Nota

L'app 3D Warehouse è deprecata e non sarà disponibile per l'installazione. Puoi caricare modelli 3D direttamente dalla pagina Prodotti. Per saperne di più sull'aggiunta di contenuti multimediali ai tuoi prodotti, consulta Media prodotto.

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 di creazione di modelli 3D, selezionane uno e contattalo.

All'interno del modulo per contattare un Esperto, fornisci dettagli sul tuo progetto. Se vuoi fornire subito foto dei prodotti e dimensioni 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 le foto del prodotto e le dimensioni 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:

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, come blue vase - top o blue 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 in mm.
• 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:

Installa l'app 3D Warehouse e utilizza Experts Marketplace per contattare un esperto Shopify per 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:

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

• 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 .glb e .usdz da aggiungere 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 il Visualizzatore glTF per 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, consulta Creare 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.

Nota

Se non riesci a visualizzare l'immagine in AR dopo averla aggiunta all'app 3D Warehouse, contatta il servizio di assistenza Apple.

Procedura:

1. Dal pannello di controllo Shopify clicca su Impostazioni > App e canali di vendita.

2. Dalla pagina App e canali di vendita clicca su 3D Warehouse.

3. Clicca su Apri app.

4. Clicca su Aggiungi modello 3D.

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

6. Nel campo Prodotto collegato, seleziona il prodotto e la variante a cui questo modello 3D è associato e clicca su Seleziona prodotto.

7. Clicca su Carica File e seleziona il file .usdz fornito dall'esperto Shopify.

8. Clicca su Salva.

Ripeti la procedura di caricamento per il file .gltf o .glb fornito 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.

Nota

Caricando un file .gltf, ti verrà richiesto di aggiungere ulteriori file nella sezione File collegati. Clicca su Carica file per caricare le risorse texture collegate fornite dall'Esperto.

Tipi di file accettati

Per ogni modello 3D, gli esperti Shopify forniscono due diversi tipi di file, un file .usdz e un file .gltf o .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 è caricare entrambi i 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 su Impostazioni > App e canali di vendita.

2. Dalla pagina App e canali di vendita clicca su Online store.

3. Clicca su Apri canale di vendita.

4. Accanto al tema in uso, clicca sul pulsante ... > Modifica codice.

5. Nella cartella Layout, clicca su {/} theme.liquid.

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

7. Nella riga successiva, incolla il seguente codice:

<script
  src="https://cdn.shopify.com/shopifycloud/ar-quicklook-js/assets/v1/shopify3d.js"
  crossorigin="anonymous"
></script>

1. Clicca su Salva.
2. Nella cartella Sezioni, clicca su {/} product-template.liquid.
3. Incolla il seguente codice nella parte superiore del file:

<script>
  (function(s3d) {
    if (!s3d) {
      console.warn('"window.Shopify3d" does not exist. Please ensure you\'ve added the <script> to your theme');
      return;
    }
    {% for variant in product.variants %}
      s3d.mapMetafieldAssets('{{ variant.id }}', '{{ variant.metafields.shopify3d['assets'] }}');
    {% endfor %}
  })(window.Shopify3d);
</script>

![Quicklook library added to product template](/manual/apps/3d-warehouse/quicklook-product-template.png)

1. Clicca su 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:

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

Procedura:

1. Dal pannello di controllo Shopify clicca su Impostazioni > App e canali di vendita.

2. Dalla pagina App e canali di vendita clicca su Online store.

3. Clicca su Apri canale di vendita.

4. Accanto al tema in uso, clicca sul pulsante ... > Modifica codice.

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

6. Individua la sezione del modello associata alla foto del prodotto. Cerca parole chiave come ProductPhoto o featured_image:

   

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

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

<div class="ar-quicklook-overlay" data-shopify-3d-variant-id="{{ product.selected_or_first_available_variant.id }}" style="display: none;"></div>

![Product photo liquid with code](/manual/apps/3d-warehouse/product-image-liquid-with-code.png)

1. Clicca su Salva.
2. Apri il file che contiene il CSS del tema. Questo file si trova, in genere, nella cartella Risorse e 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 su 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.