Ai un model 3D al produsului. Acum vrei ca un client să-l poată roti pe pagina de produs și, de pe telefon, să-l vadă în camera lui prin realitate augmentată. Modul în care faci asta depinde de platforma magazinului. Mai jos găsești pașii pentru Shopify, WooCommerce și pentru un site HTML obișnuit.

Înainte de toate: ai nevoie de un model bun

Pentru web, formatul de bază este GLB, iar pentru AR pe iPhone ajută și un fișier USDZ (diferențele sunt explicate în ghidul despre formatele GLB, USDZ și OBJ). Ai două variante pe 3DView.ai:

Shopify: suport nativ pentru modele 3D

Shopify acceptă modele 3D ca media de produs, la fel ca fotografiile și videoclipurile. Temele moderne compatibile cu Online Store 2.0 le afișează cu un vizualizator 3D și, pe telefoanele compatibile, cu butonul de AR „View in your space”.

Varianta 1: încărcare GLB direct în produs

  1. În panoul de administrare, deschide Products și alege produsul.
  2. În secțiunea Media, încarcă fișierul GLB, exact cum ai încărca o fotografie.
  3. Așază modelul în galerie, de obicei după prima fotografie.
  4. Salvează și deschide pagina produsului pe calculator și pe telefon.

Limitele de dimensiune a fișierului și modul exact de afișare depind de temă și se pot schimba, așa că verifică documentația actuală Shopify și pe cea a temei tale. Dacă tema ta nu afișează modelul, este posibil să fie o temă mai veche, fără suport pentru media 3D.

Varianta 2: cod de integrare într-o secțiune personalizată

Dacă vrei vizualizatorul 3DView.ai (cu modelul găzduit, AR și același aspect pe toate canalele), copiezi codul de integrare și îl lipești într-o secțiune de tip Custom Liquid sau bloc HTML personalizat din editorul temei. Numele exacte ale secțiunilor diferă de la o temă la alta.

WooCommerce: fără vizualizator 3D nativ

WooCommerce nu are un vizualizator 3D inclus. Ai două căi:

  • Cod de integrare (iframe sau script): îl lipești în descrierea produsului, folosind un bloc Custom HTML în editorul de blocuri, sau în tab-ul Text al editorului clasic. Nu necesită niciun plugin.
  • Plugin 3D/AR: există mai multe plugin-uri care adaugă modele 3D în galeria produsului. Verifică compatibilitatea cu versiunea ta de WordPress și WooCommerce, data ultimei actualizări și ce formate acceptă.

Varianta cu cod de integrare este cea mai simplă dacă modelul este deja găzduit: nu adaugi încă un plugin de întreținut, iar modelul îl actualizezi dintr-un singur loc.

Codul de integrare de la 3DView.ai

Pe pagina e-commerce găsești codul gata de copiat pentru Shopify, WooCommerce și HTML. Fluxul este:

  1. Creezi modelul prin scanare sau AI.
  2. Din panoul tău, alegi modelul și copiezi codul iframe sau fragmentul de script.
  3. Îl lipești în pagina produsului, în locul descris mai sus pentru platforma ta.
  4. Verifici pe telefon că modelul se încarcă și că butonul de AR funcționează.

Un exemplu complet de pagină de produs cu vizualizator integrat vezi la demo-ul de pagină de produs.

Site HTML obișnuit

Pe un site construit manual sau cu alt CMS, ai aceleași două opțiuni: un iframe copiat din panou sau componenta open-source <model-viewer>, dacă găzduiești singur fișierele. Un exemplu minimal cu model-viewer arată așa:

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<model-viewer src="produs.glb" ios-src="produs.usdz" poster="produs.webp"
  alt="Model 3D al produsului" camera-controls ar loading="lazy"></model-viewer>

Atributul ios-src indică fișierul USDZ folosit pentru AR pe iPhone, iar poster este imaginea afișată până se încarcă modelul.

Sfaturi care contează

  • Imagine poster: afișează o fotografie sau o captură a modelului până la încărcare, ca pagina să nu pară goală.
  • Încărcare întârziată (lazy loading): modelul nu trebuie să încetinească afișarea textului și a prețului. Încarcă-l când devine vizibil sau la interacțiune.
  • Păstrează galeria foto: modelul 3D completează fotografiile, nu le înlocuiește. Clienții, motoarele de căutare și platformele de reclame au în continuare nevoie de imagini.
  • Performanță pe mobil: testează pe un telefon mediu, pe date mobile. Dacă modelul e greu, redu texturile și poligoanele.
  • Dimensiune reală: pentru AR, modelul trebuie să aibă scara corectă, altfel clientul vede produsul mai mare sau mai mic decât este.

Greșeli frecvente

  • Iframe fără dimensiuni: fără o înălțime setată, vizualizatorul poate apărea ca o bandă subțire. Dă-i o înălțime clară și lățime de 100%.
  • Cod lipit în editorul vizual: unele editoare transformă codul în text. Folosește blocul HTML personalizat sau modul de editare a codului.
  • Doar GLB, fără USDZ: pe iPhone, AR-ul are nevoie de USDZ sau de un vizualizator care îl oferă automat.
  • Netestat după actualizarea temei: după o actualizare de temă sau plugin, verifică din nou pagina de produs.

Mai multe idei despre unde aduce valoare 3D-ul găsești în articolul despre vizualizarea 3D a produselor în magazinul online, iar despre AR în ghidul de realitate augmentată. Găzduirea este inclusă în prețul modelului; detalii pe pagina Prețuri.