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

Passaggio 1: installa l'app 3D Warehouse

Puoi installare l'app 3D Warehouse utilizzando la pagina di iscrizione.

Procedura:

  1. Apri la pagina di iscrizione.
  2. Inserisci il dominio del negozio myshopify.com.
  3. Clicca su Installa.
  4. Verifica i dettagli e clicca su Installa app.

Puoi accedere all'app 3D Warehouse dalla pagina App del pannello di controllo Shopify.

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 richiedere modelli 3D dei tuoi prodotti tramite il Programma Partner di Shopify.

Procedura:

  1. Nel pannello di controllo Shopify clicca sul menu del tuo account e quindi su Contatta un Esperto Shopify:

    Contatta un Esperto Shopify

  2. Clicca per espandere la sezione Nuova funzionalità.

  3. Clicca su Crea modelli 3D dei tuoi prodotti per la realtà aumentata (a partire da 100 USD).

  4. Rispondi alle domande richieste. Se vuoi fornire subito foto del prodotto e dimensioni del prodotto, segui il link alle linee guida.

  5. Clicca su Invia lavoro.

Quando invii una richiesta di collaborazione per un esperto di Shopify, lo fai senza impegno. In questa fase invii solo una descrizione del tuo progetto agli esperti disponibili, che procedono a esaminare la tua richiesta. Se un esperto decide di collaborare con te, ti contatterà per fornirti ulteriori informazioni sulle tariffe e su come avviare il processo.

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:

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, 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:

Vaso

Installa l'app 3D Warehouse e con Services Marketplace cerca 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 70mm.

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 misure delle 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 e poniti le seguenti domande:

  • 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?

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.

Procedura:

  1. Nel pannello di controllo Shopify, clicca su App.
  2. Clicca su 3D Warehouse.
  3. Clicca su Aggiungi modello 3D.
  4. Nel campo Titolo, inserisci un titolo per il modello 3D.
  5. Nel campo Prodotto collegato, seleziona il prodotto e la variante a cui questo modello 3D è associato e clicca su Seleziona prodotto.
  6. Clicca su Carica File e seleziona il file .usdz fornito dall'esperto Shopify.
  7. 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.

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 su varie piattaforme e funzionalità. Per esempio, per consentire ai clienti di visualizzare prodotti in 3D su dispositivi iOS 12 e 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. Nel pannello di controllo Shopify, clicca su Negozio online.
  2. Accanto al tema corrente, clicca su Azioni > Modifica codice:
  3. Nella cartella Layout, clicca su {/} theme.liquid.
  4. Individua il tag <head>, che dovrebbe trovarsi nella parte superiore del file.
  5. Nella riga successiva, incolla il seguente codice:
<script
  src="https://cdn.shopifycloud.com/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>

Libreria Quicklook aggiunta al template di prodotto

  1. Clicca su Salva.

Se utilizzi più di un template 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. Nel pannello di controllo Shopify, clicca su Negozio online.
  2. Accanto al tema corrente, clicca su Azioni > Modifica codice:
  3. Nella cartella Sezioni, clicca su {/} product-template.liquid.
  4. Individua la sezione del template associata alla foto del prodotto. Cerca parole chiave come ProductPhoto o featured_image:
    Liquid della foto del prodotto
  5. Nella sezione delle foto del prodotto, individua il primo tag <img... >.
  6. 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>

Liquid della foto del prodotto con codice

  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.

Sei pronto/a per iniziare a vendere con Shopify?

Provalo, è gratis