Shopify, WooCommerce ve Özel Web Sitelerine Tek Satır Kodla 3D Model Ekleme Rehberi
Harici 3D tasarımcı veya karmaşık JavaScript kütüphanelerine ihtiyaç duymadan, tek bir iframe embed satırıyla tüm e-ticaret ürün detay sayfalarını interaktif 3D ve AR vitrinine dönüştürme kılavuzu.
Önemli Çıkarımlar & Teknik Bulgular
- ✓ Harici Three.js veya ağır JavaScript kütüphaneleri yüklemenize gerek yoktur.
- ✓ Shopify ve WooCommerce'te tek bir özel HTML bloğuna kodu yapıştırmak yeterlidir.
- ✓ URL parametreleri ile arka plan rengi, otomatik döndürme ve AR butonları özelleştirilebilir.
- ✓ Lazy-loading ve asenkron iframe mimarisi Google PageSpeed (Core Web Vitals) puanlarını korur.
1. Neden Harici 3D Kütüphaneler Değil de Tek Satır Iframe Tercih Edilmeli?
E-ticaret sitelerine 3D eklemek isteyen birçok işletme, sitelerine Three.js, Babylon.js veya doğrudan model-viewer kütüphanelerini eklemeye çalışır. Bu yöntem sitenin ana JavaScript paketini 500 KB - 1 MB büyüterek sayfa açılış hızını (LCP) ciddi şekilde yavaşlatır ve tema güncellemelerinde bozulmalara yol açar.
3D StoreLink tek satır iframe yaklaşımıyla bu sorunu kökten çözer. Tüm WebGL motoru, PBR gölgelendiricileri ve AR tetikleyicileri yalıtılmış yüksek performanslı bulut altyapımızda çalışır. Sitenize sıfır bağımlılık eklenir ve sitenizin ana hızı asla etkilenmez.
<iframe
src="https://view.3dstorelink.com/model-slug?autoRotate=1&enableAR=1&bgColor=111111"
width="100%"
height="500"
frameborder="0"
allow="xr-spatial-tracking"
loading="lazy"
></iframe>2. Iframe Entegrasyonunun Mimarisi ve URL Parametrelerinin Analizi
Iframe URL'sine ekleyeceğiniz basit sorgu parametreleriyle görüntüleyicinin tüm davranışlarını mağazanızın tasarımına göre özelleştirebilirsiniz.
| Parametre | Varsayılan | Açıklama |
|---|---|---|
| autoRotate | 1 | 1 ise model boşta kaldığında otomatik döner, 0 ise kullanıcı dokunana kadar sabit durur. |
| enableAR | 1 | 1 ise mobil cihazlarda "Odanda Gör (AR)" butonunu gösterir. |
| bgColor | 111111 | Hex renk kodu (Örn: FFFFFF beyaz, 050505 koyu, transparent şeffaf). |
| cameraOrbit | 0deg 75deg auto | Modelin ilk açılış kamera açısı ve yüksekliği. |
| enableDownload | 0 | Ziyaretçilerin modeli indirmesini engeller (0) veya izin verir (1). |
3. Shopify Ürün Detay Sayfalarına 30 Saniyede 3D Model Ekleme
Shopify panelinizde Ürünler > İlgili Ürün sayfasına gidin. Ürün açıklaması zengin metin editörünün sağ üst köşesindeki "<> HTML Göster" butonuna tıklayın.
3D StoreLink panelinden kopyaladığınız iframe kodunu açıklama alanının en üstüne veya en altına yapıştırıp Kaydet'e basın. Ürününüz 30 saniye içinde tüm dünyada 3D ve AR olarak yayındadır.
4. WooCommerce ve WordPress Entegrasyon Adımları
WordPress Gutenberg blok editöründe yeni bir blok ekleyin ve "Özel HTML (Custom HTML)" bloğunu seçin. Elementor kullanıyorsanız sol menüden "HTML" widget'ını ürün şablonuna sürükleyin.
Kodu yapıştırıp yayınlayın. Iframe tüm ekran genişliklerine ve mobil cihazlara %100 duyarlı (responsive) olarak otomatik uyum sağlar.
Sıkça Sorulan Sorular
Entegrasyon sitenin hız puanını (PageSpeed) düşürür mü?
Hayır. loading="lazy" parametresi sayesinde model sadece kullanıcı ekrana kaydırdığında yüklenir; ilk sayfa açılışını (LCP) bloke etmez.