Modelele 3D interactive le permit cumpărătorilor să rotească produsul, să facă zoom și, pe telefoanele compatibile, să îl plaseze în camera lor prin AR. Iată cum le adaugi în Shopify și WooCommerce fără să încetinești magazinul.

🛒 Ce aduce 3D pe pagina de produs

  • ✅ Rotire: produsul văzut din toate unghiurile
  • ✅ Zoom pe texturi, cusături și finisaje
  • ✅ AR: produsul plasat în spațiul clientului (mobilă, decorațiuni)
  • ✅ Mai puține surprize legate de dimensiune și formă înainte de cumpărare

📦 Shopify: suport inclus

Shopify acceptă modele 3D ca media de produs (GLB, plus USDZ pentru iOS). Pașii:

  1. Obține modelul: generează-l pe 3DView.ai din text sau fotografie ori cumpără-l din magazin.
  2. Descarcă fișierul GLB și verifică-i dimensiunea (vezi secțiunea despre performanță).
  3. Încarcă-l în Shopify Admin: deschide produsul și adaugă fișierul în secțiunea Media.
  4. Verifică pagina produsului: temele care suportă media 3D afișează modelul în galerie și, pe telefoanele compatibile, un buton pentru vizualizare în spațiul tău. Dacă tema ta nu o face, consultă documentația temei.

🔌 WooCommerce: plugin sau câteva linii de HTML

WooCommerce nu are vizualizator 3D inclus. Poți instala un plugin din directorul WordPress care afișează fișiere GLB (multe sunt construite pe model-viewer de la Google; verifică recenziile și compatibilitatea cu tema) sau poți adăuga singur vizualizatorul:

<model-viewer
  src="https://your-cdn.com/model.glb"
  alt="Nume Produs"
  ar
  ar-modes="webxr scene-viewer quick-look"
  camera-controls
  auto-rotate
  style="width: 100%; height: 500px;"
></model-viewer>

<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.3.0/model-viewer.min.js"></script>

Un model găzduit pe 3DView.ai poate fi inserat și cu un iframe. Ghidul de instalare arată codul pentru Shopify, WordPress și Wix.

⚡ Performanță

  • 📊 Dimensiune fișier: țintește câțiva megabytes per produs.
  • 🔺 Poligoane: redu modelele AI dense în Blender (modificatorul Decimate).
  • 🖼️ Texturi: redimensionează-le și salvează-le ca JPEG sau WebP.
  • ⚙️ Compresie: Draco poate micșora mult geometria; verifică dacă vizualizatorul tău o suportă.

Detalii pas cu pas găsești în ghidul de optimizare pentru web.

📱 Testează pe dispozitive reale

  • 📱 iPhone/iPad: Safari, AR Quick Look
  • 🤖 Android: Chrome, butonul AR deschide Scene Viewer de la Google
  • 💻 Desktop: verifică dacă rotirea cu mouse-ul merge fluid

🚀 Începe acum

Găsește modele 3D pentru produsele tale → · Sau generează modele custom cu AI →

📚 Resurse