3D Warehouse tarafından desteklenen Shopify AR

Dikkat

3D Warehouse uygulaması kullanımdan kaldırılıyor ve yüklenemeyecek. 3B modelleri doğrudan Ürünler sayfasından yükleyebilirsiniz. Ürün medyası hakkında daha fazla bilgi edinin.

Shopify AR, iOS 12 cihazlarındaki Safari tarayıcısını kullanan müşterilere, ürünlerinizin gerçekçi ve interaktif sürümlerini artırılmış gerçeklik (AR) olarak görüntülemeyi sağlar. AR ile müşterilerinize ürünlerinizin boyutunu, ölçeği ve ayrıntısına ilişkin daha iyi bir fikir sunabilir. 3D Warehouse uygulaması, 3B modelleri yükleyip mağazanızdaki ürünlere bağlayabilmenizi sağlayarak AR deneyimlerini etkinleştirir.

Müşterilerin AR'da ürünlerinizi görüntülemesini sağlamak için 3D Warehouse uygulamasını yükleyin, ürünlerinizin 3B modellerini edinin, 3B modelleri uygulamaya ekleyin, ar Quick Look'u etkinleştirmek için temanızı düzenleyin ve ardından 3B ürünlerinize AR rozeti ekleyin.

1. Adım: 3D Warehouse uygulamasını yükleme

Not

3D Warehouse uygulaması kullanımdan kaldırılıyor ve yüklenemeyecek. 3B modelleri doğrudan Ürünler sayfasından yükleyebilirsiniz. Ürünlerinize medya ekleme hakkında daha fazla bilgi için Ürün medyası bölümüne bakın.

2. Adım: Ürünlerinizin 3B modellerini alma

Müşteriler AR'da ürünlerinizi görüntülemeden önce ürünlerinizin 3B modellerine ihtiyaç duyabilirsiniz. 3B modeller, bir nesnenin veya yüzeyin üç boyutta sanal temsilleridir. Nesneyi herhangi bir açıdan görüntülemenize izin verir.

Ürünlerinizin 3B modellerinizi oluşturmanıza yardımcı olması için bir Shopify uzmanıyla çalışabilirsiniz. Shopify Expert Marketplace'te, 3B model oluşturma hizmetini sunan uzmanlara göz atın, bir uzmanı seçin ve kendisiyle iletişime geçin.

Uzman ile iletişime geçme formunu kullanarak projenizle ilgili ayrıntıları verin. Artık ürün fotoğrafları ve ürün boyutları sağlamak istiyorsanız bağlantılı yönergeleri izlediğinizden emin olun.

Uzmanla iletişime geçtiğinizde bir Shopify uzmanıyla çalışmayı taahhüt etmiş olmazsınız. Bu adımda yalnızca talep gönderirsiniz ve uzman talebinizi inceleyebilir. Bir uzman sizinle çalışmaya karar verirse ücret ve birlikte çalışmaya nasıl başlayabileceğiniz hakkında daha fazla bilgi için sizinle iletişime geçecektir.

Ürün fotoğraflarını ve ürün boyutlarını halihazırdaki iş talebinizin bir parçası olarak sunmadıysanız uzman, sizden bunları talep eder. Fotoğraf çekerken ve ölçüm yaparken aşağıdaki yönergeleri izleyin.

Ürün fotoğrafları

3B modeller, fotoğraflar kullanılarak oluşturulur. 3B modeli oluşturmak için Shopify Expert, ürünlerinizin birden fazla açıdan çekilmiş fotoğraflarına ihtiyaç duyar:

Ürününüzün fotoğraflarını çekerken şu yönergeleri izleyin:

• Ürününüzün iyi aydınlatıldığından emin olun.
• Ürününüzün tamamının odaklanmış olduğundan emin olun.
• Mümkünse cep telefonu kamerası kullanmayın. Mobilya gibi büyük ürünler için 50 mm mercekli bir kamera kullanın. Küçük ve orta ölçekli ürünler için 70 mm veya 100 mm mercek kullanın.
• Benzersiz ayrıntıların veya dokuların ek olarak fotoğraflarını çekin.
• Fotoğraf dosyalarına blue vase - top veya blue vase - left gibi anlaşılır isimler verin ve bunları etiketi açıkça belirtilen bir klasörde saklayın.

Ürün boyutları

Doğru 3B modeller oluşturmak için Shopify Expert, ürününüzün ayrıntılı ölçümlerine ihtiyaç duyar. Ölçümleri sağlarken şu yönergeleri izleyin:

• Ürününüzün her bir boyutunu açık ve basit terimlerle açıklayın.
• Ölçümleri mm cinsinden sağlayın.
• Ölçümlerin hangi boyutlara karşılık geldiğini göstermek için bir diyagram ekleyin.
• Ürününüzle ilişkili teknik çizimleriniz veya CAD dosyalarınız varsa bunları da ekleyin.

3B model yaptırma örneği

Naomi bu mavi vazoyu satıyor:

3D Warehouse uygulamasını yüklüyor. Ardından, vazonun 3B modeli oluşturmak üzere Shopify uzmanı ile çalışmak için Experts Marketplace'i kullanıyor. Naomi, Uzmana 70 mm merceğe sahip bir kamera ile çekilmiş altı adet yüksek kaliteli fotoğraf gönderiyor:

Naomi, uzmana milimetre cinsinden ürün boyutlarına karşılık gelen bir ölçüm diyagramı veriyor:

• Vazo yüksekliği (1) ____mm
• Vazonun üstünden boynunun altına kadar olan mesafe (2) ____mm
• Vazonun boynunun altından dibine kadar olan mesafe (3) ____mm
• Vazonun ağzının çapı (4) ____mm
• Ağız açıklığının genişliği (5) ____mm
• Boyun altının çapı (6) ____mm
• Vazonun altıgen şeklinde 8 yüzü var
• Altıgen şeklindeki yüzlerin yüksekliği (8) ____mm
• Altıgen şeklindeki yüzlerin genişliği (9) ____mm
• Vazonun en geniş kısmının çapı (10) ____mm
• Vazo altının çapı (11) ____mm
• Köpük ayakların çapı ____mm

Shopify uzmanı, mavi vazonun 3B modelini oluşturmak için bu fotoğrafları ve boyutları kullanır. Uzman, Naomi'ye 3D Warehouse uygulamasına eklemesi için bir .glb ve .usdz dosyası gönderir.

3. Adım: Modelin kalitesini kontrol etme

Shopify uzmanı size 3B model sunduğunda kalitesinden memnun olup olmadığınızı kontrol etmeniz gerekir. Uzman, modelin önizlemesini görüntülemek için size talimat sağlar.

Modeli tüm açılardan kontrol edin. 3B modellerinizi önizlemek için glTF Viewer'ı kullanabilirsiniz. Modelinizi incelerken aşağıdaki soruları göz önünde bulundurun:

• Modelin şekli, uzmana verdiğiniz ürün referans fotoğraflarıyla eşleşiyor mu?
• Modelin tüm parçaları geri kalan kısımları ile orantılı mı?
• Modelin artırılmış gerçeklikte önizlemesini görüntüleyebiliyorsanız sahnenin geri kalanıyla karşılaştırıldığında modelin ölçeği doğru görünüyor mü?
• Model, ürün ile aynı malzemelerden yapılmış gibi görünüyor mu?
• Modelin malzemeleri gerilmiş, bulanık veya bozuk görünüyor mu?
• Modelin malzemelerinin daha gerçekçi görünmesini sağlamak için çizikler veya kazınmalar gibi ayrıntılar var mı?
• Ürünün parçaları saydam, yansıtıcı ise veya ışık yayıyorsa bu parçalar doğru görünüyor mü?
• Kenarları gerçekçi görünüyor mü? Kenarlardan herhangi biri çok keskin ve yumuşatılması gerekiyor mu?
• Logo veya metin gibi dekoratif detaylar varsa bunları görmek kolay mı?
• Olmaması gereken bir boşluk ya da delik var mı?
• 3B model, Shopify platformu için teknik gereklilikleri karşılıyor mu?
  • 3B modelin bir GLB dosyası olması gerekir.
  • GLB dosyası yaklaşık 4 MB olmalıdır.
  • GLB dosyası 15 MB'yi aşmamalıdır.

Shopify uzmanı, 3B modelini belirli standartlara göre oluşturmalıdır. Modeli daha iyi incelemeniz adına 3B model standartları hakkında daha fazla bilgi edinmek için Satıcılar için 3B modeller oluşturma sayfasına bakabilirsiniz.

Modelin kalitesinin yeterince iyi olmadığını düşünüyorsanız Shopify uzmanıyla iletişime geçerek sorunun ne olduğunu açıklayın.

4. Adım: 3D Warehouse uygulamasına 3B model ekleme

3B Ambar uygulamasını yüklediyseniz ve bir 3B modele sahip olduğunuzda modeli 3D Warehouse uygulamasına eklemeniz gerekir.

Not

3D Warehouse uygulamasına ekledikten sonra AR görselini göremiyorsanız Apple Destek ekibi ile iletişime geçin.

Adımlar:

1. Shopify yöneticinizden Ayarlar > Uygulamalar ve satış kanalları'na tıklayın.

2. Uygulamalar ve satış kanalları sayfasından 3D Warehouse seçeneğine tıklayın.

3. Uygulamayı aç'a tıklayın.

4. Add 3D Model (3B Model Ekle) seçeneğine tıklayın.

5. Başlık alanına 3B model için bir başlık girin.

6. Bağlantılı Ürün alanında, bu 3B modelin ilişkilendirildiği ürünü ve varyasyonu seçin ve ardından Ürünü seç'e tıklayın.

7. Dosya Yükle'ye tıklayın ve Shopify Uzmanı tarafından sağlanan .usdz dosyasını seçin.

8. Kaydet'e tıklayın.

Shopify uzmanınızın sağladığı .gltf veya .glb dosyası için yükleme sürecini tekrarlayın. Ürünle ilişkili 3D model dosya türlerine sahip olmanız için bu ürünü aynı ürüne bağladığınızdan emin olun.

Not

Bir .gltf dosyası yüklüyorsanız Bağlantılı Dosyalar bölümünde ek dosyalar eklemeniz istenir. Uzmanınız tarafından sağlanan bağlantılı doku kaynaklarını yüklemek için Dosya Yükle'ye tıklayın.

Kabul edilen dosya türleri

Shopify uzmanları, her bir 3D model, bir .usdz dosyası ve bir .gltf veya .glb dosyası için iki farklı dosya türü sağlar. Bu farklı dosya türleri farklı platformlar ve özellikler tarafından kullanılır. Örneğin, müşterilerin iOS 12 cihazlarda Safari tarayıcısında 3B ürünleri görüntülemesi için bir .usdz dosya yüklemeniz gerekir. Online mağazanızın gelecekteki artırılmış gerçeklik ve 3D özellikleri ile uyumlu olduğundan emin olmanın en iyi yolu her iki dosya türünü de yüklemektir.

5. Adım: AR Quick Look'u etkinleştirmek için temanızı düzenleme

iOS 12 cihazlarda Safari tarayıcısını kullanan müşterilerin 3B ürünlerinizi görüntülemesini sağlayan özellik olan AR Quick Look'u etkinleştirmek için tema kodunuzu düzenlemeniz gerekir.

Adımlar:

1. Shopify yöneticinizden Ayarlar > Uygulamalar ve satış kanalları'na tıklayın.

2. Uygulamalar ve satış kanalları sayfasından Online store seçeneğine tıklayın.

3. Satış kanalını aç'a tıklayın.

4. Geçerli temanızın yanında İşlemler > Kodu düzenle'ye tıklayın.

5. Düzen klasöründe, {/} theme.liquid'e tıklayın.

6. <head> etiketini bulun. Dosyanın üst tarafına yakın olmalıdır.

7. Bir sonraki satırda aşağıdaki kodu yapıştırın:

<script
  src="https://cdn.shopify.com/shopifycloud/ar-quicklook-js/assets/v1/shopify3d.js"
  crossorigin="anonymous"
></script>

1. Kaydet'e tıklayın.
2. Bölümler klasöründe {/} product-template.liquid'e tıklayın.
3. Aşağıdaki kodu dosyanın en üstüne yapıştırın:

<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>

![Quicklook library added to product template](/manual/apps/3d-warehouse/quicklook-product-template.png)

1. Kaydet'e tıklayın.

Birden fazla ürün şablonu kullanıyorsanız kodu bu şablon dosyalarına da ekleyin.

6. Adım: 3D ürünlerinize AR rozeti ekleme

iOS 12 cihazları kullanan müşteriler, AR rozeti yerleşimi görüntülendikleri sırada ürününüzü 3B olarak görüntüleyebileceğini biliyor:

Ürün görsellerinde AR rozetini göstermeniz için tema kodunuzu düzenlemeniz gerekir.

Adımlar:

1. Shopify yöneticinizden Ayarlar > Uygulamalar ve satış kanalları'na tıklayın.

2. Uygulamalar ve satış kanalları sayfasından Online store seçeneğine tıklayın.

3. Satış kanalını aç'a tıklayın.

4. Geçerli temanızın yanında İşlemler > Kodu düzenle'ye tıklayın.

5. Bölümler klasöründe {/} product-template.liquid'e tıklayın.

6. Şablonun ürününüzün fotoğrafıyla ilişkili bölümünü bulun. ProductPhoto veya featured_image gibi anahtar sözcükleri arayın:

   

7. Ürün fotoğrafı bölümünde ilk <img... > etiketini bulun.

8. Bu etiketin üstündeki satıra şu kodu yapıştırın:

<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](/manual/apps/3d-warehouse/product-image-liquid-with-code.png)

1. Kaydet'e tıklayın.
2. Temanızın CSS'sini içeren dosyayı açın. Bu dosya genellikle Öğeler klasöründe bulunur ve çoğu zaman {/}theme.scss.liquid gibi bir başlığı olur.
3. Dosyanın en altına aşağıdaki kodu yapıştırın:

.ar-quicklook-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 2;
}

1. Kaydet'e tıklayın.

3D modelinizi test etmek için iOS 12 çalıştıran bir cihazda Safari tarayıcısında online mağazanızı açın ve ardından ürün sayfasına gidin. 3B olarak görüntülemek için ürün görselindeki AR rozetine dokunun.