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.
Step 3: Aggiungere il prodotto
Ok adesso potete procedere e aggiungere il prodotto e linkarlo con il relativo prodotto associato.
Step 4: Aggiungere il codice
Adesso non vi resta che aggiungere questi codi nel vostro tema Shopify.
- Cliccate su “Online Store”
- Modifica codice
- Cercate theme.liquid.
- Cercate il tag
<head>e aggiungete il codice di seguito appena dopo l’apertura del tag. - Codice:
<script src="https://cdn.shopifycloud.com/ar-quicklook-js/assets/v1/shopify3d.js" crossorigin="anonymous" ></script> - Cliccate su Salva.
- Poi cercate cercate la sezione product-template.liquid. (si trova nella cartella Sezioni)
- 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>
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.
- Andate sempre nel vostro store
- Cliccate sempre su Modifica codice
- Nella cartella Sezioni aprite nuovamente product-template.liquid.
- Cerca la sezionee
featured_image:
- Trovate il primo tag
<img... >. - 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>
- Clicca su Salva.
- Aprite il file theme.scss.liquid
- Alla fin incolla il seguente file:
.ar-quicklook-overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
z-index: 2;
}- 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!