Come utilizzare modelli 3D e in realtá aumentata nelle tue pagine prodotto Shopify?

Ultimamente molto comune e lanciato recentemente nello Shopify Unite del 2019 l’integrazione nativa per mostrare prodotti in 3D e realtá aumentata nel vostro ecommerce Shopify. Questo nuovo modo di presentare i prodotti potrebbe aprire le porte a nuove professioni, i fotografi cominciano giá a prepararsi e fare foto 3D di default, negozi come Apple giá hanno questa feature disponibile nel loro store.

Step 1: avere un modello 3D

Potete porendere alcuni esempi giusto per provare dal sito Free3D e poi lo potete convertire online per fare delle prove. Ma se giá avete  un modello 3D del vostro prodotto assicuratevi che sia nei seguenti formati: .usdz e .gltf.

Step 2: Aggiungere l’integrazione

Una volta che avete il vostro modello 3d collegate l’integrazione 3D con il vostro store attraverso questo link.

1.png

Step 3: Aggiungere il prodotto

Ok adesso potete procedere e aggiungere il prodotto e linkarlo con il relativo prodotto associato.

2.png 222.png 22.png

Step 4: Aggiungere il codice

Adesso non vi resta che aggiungere questi codi nel vostro tema Shopify.

  1. Cliccate su “Online Store”
  2. Modifica codice
  3. Cercate theme.liquid.
  4. Cercate il tag <head> e aggiungete il codice di seguito appena dopo l’apertura del tag.
  5. Codice:
    <script
      src="https://cdn.shopifycloud.com/ar-quicklook-js/assets/v1/shopify3d.js"
      crossorigin="anonymous"
    ></script>
  6. Cliccate su Salva.
  7. Poi cercate cercate la sezione product-template.liquid. (si trova nella cartella Sezioni)
  8. Incollate il codice seguente sopra a tutto
    <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>

5.png 4.png

Step 5: Aggiungere il badge

Ora non vi resta che aggiungere il pulsante/badge sul prodotto cosi che un utente possa cliccare e vedere il 3D.

  1. Andate sempre nel vostro store
  2. Cliccate sempre su Modifica codice
  3. Nella cartella Sezioni aprite nuovamente product-template.liquid.
  4. Cerca la sezionee featured_image:
    Product photo liquid
  5. Trovate il primo tag <img... >.
  6. Sulla riga appena sopra incollate il codice seguente:
      <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
  7. Clicca su Salva.
  8. Aprite il file theme.scss.liquid
  9. Alla fin incolla il seguente file:
    .ar-quicklook-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 2;
  }
  1. Clicca su salva

Step 6: Preview

Prova Shopify 14 giorni for free!

Vuoi creare il tuo ecommerce da zero? Shopify ti offre 14 giorni di prova gratuita! Provalo subito! É gratis!

Leave a Reply