Bu sayfada
Squarespace asla açık bir e-ticaret platformu olarak tasarlanmadı — genişletilebilirliği cilalı bir deneyim için değiştirir ve işte sanal denemeyi eklemenin Shopify'dakinden farklı bir yaklaşım gerektirmesinin nedeni tam olarak budur. Bunu yanlış yapan mağazalar, ana sayfada yüklenen ancak asla gerektiği gibi olması gereken ürün sayfasına hiçbir zaman ulaşmayan bir widget'la karşı karşıya kalırlar. Bunu doğru yapmak, tek bir satır kod yazmadan önce Squarespace'in kod enjeksiyonu modelini anlamak anlamına gelir.
Squarespace Bunu Göründüğünden Neden Daha Zor Yapıyor
Squarespace, Shopify'nin yaptığı şekilde yerel bir uygulama ekosistemi sunmuyor. Sanal deneme aracının temaya kurulduğu, sepete bağlandığı ve ürün varyasyonlarını otomatik olarak okuduğu Shopify App Store'a eşdeğer bir şey yoktur. Bunun yerine Squarespace, site sahiplerine Kod Enjeksiyonu veriyor — site başlığına, altbilgisine veya bireysel sayfa bölümlerine özel HTML, CSS ve JavaScript yerleştirebileceğiniz bir ayarlar paneli.
Bu ayrım önemlidir. Squarespace'te bir uygulama yüklemiyor; bir betik etiketi manuel olarak yerleştiriyor ve ona, sayfa sayfa, nerede render edileceğini söylüyorsunuz. Ticaret (Squarespace'in yerleşik mağaza sistemi) ayrıca üçüncü taraf kodu ürün verileriyle ne kadar derinden etkileşime girebileceğini sınırlıyor — Shopify'nin Liquid şablonlarının product.variants'ı ortaya çıkardığı şekilde istemci tarafı betiklere açık bir ürün API'si yoktur. Herhangi bir entegrasyon, DOM'da görünen veya manuel olarak sağlanan ürün tanımlayıcılarını eşleştirerek bunu aşmak zorundadır.
Kod Enjeksiyonu Aslında Nerede Yaşıyor
Squarespace'de kod enjeksiyonun üç seviyesi vardır ve doğru olanı seçmek, sanal deneme düğmesinin her yerde mi yoksa hiçbir yerde mi görüneceğini belirler.
| Enjeksiyon noktası | Geçerli olduğu yer | En iyi kullanım |
|---|---|---|
| Site genelinde başlık/altbilgi | Sitenin her sayfası | Temel widget betiğini bir kez yüklemek |
| Sayfaya özel kod | Tek bir sayfanın ayarları | Kullanıma sunmadan önce bir ürünü test etmek |
| Ürün sayfası açıklaması bloku | Bireysel ürün listesi | Gerçek sanal deneme düğmesi/Harekete Geçir'i gömmek |
Güvenilir şekilde çalışan desen şöyledir: YourSizer widget betiğini site genelinde altbilgi enjeksiyonunda yükleyin (Ayarlar → Gelişmiş → Kod Enjeksiyonu), ardından küçük bir gömme parçacığı — ürün tanımlayıcısı içeren bir <div> — bireysel ürün açıklamasına veya o sayfadaki bir Kod Bloğu'na yerleştirin. Bu, ağır betiği site ziyareti başına bir kez yükler, ürün sayfası başına değil, ki bu Squarespace'in zaten JavaScript'le yoğun şablonlarındaki sayfa hızı için önemlidir.
Ticaret'in Ürün Sayfası Yapısı İçinde Çalışmak
Squarespace ürün sayfaları sabit içerik bloklarından oluşturulur ve Ticaret (Temel veya Gelişmiş planlar) onları ne kadar yeniden düzenleyebileceğinizi sınırlar. Genelde bir Kod Bloğu kullanmadan "Sepete Ekle" düğmesi alanına doğrudan betik enjekte edemezsiniz — Squarespace bunu işlevsel değil içerik öğesi olarak kullanır.
Pratik çözüm, ürün sayfasının içerik düzenleyicisinde "Sepete Ekle" düğmesinin hemen üstüne veya altına bir Kod Bloğu eklemek, ardından o bloğun widget'ı bir modal veya yan panel içinde açan bir "Deneyin" düğmesi render etmesini sağlamaktır. Squarespace ürün şablonları değişken olduğundan (Standart, Modern ve eski sürümlerin hepsi farklıdır), tüm katalog genelinde tutarlı şekilde render edileceğini varsaymadan önce bu yerleşimi en az iki ürün türünde test edin — bir şablonda "Sepete Ekle" altında düzgün oturan blok, başka bir şablonda incelemeler bölümünün altında sonlanabilir.
Ürün API'si Olmadan Ürünleri Eşleştirmek
Squarespace varsayılan olarak istemci tarafından erişilebilir bir ürün beslemesi ortaya çıkarmadığından, sanal deneme widget'ını doğru ürün görüntüsü ve beden tablosuna eşleştirmek, otomatik algılamaya güvenmek yerine tanımlayıcıları açıkça iletmek gerektirir. Uygulamada bu, ürün SKU'sunun veya Squarespace tarafından üretilen ürün ID'sinin gömme <div>'inde veri özniteliği olarak kullanılması anlamına gelir, böylece widget sayfayı kazıyı gücüne düşünmeden hangi kıyafet ve ölçü verilerini yükleyeceğini bilir.
Bu, platform tarafından yapılandırılmış ürün JSON'ını otomatik olarak teslim ettiği Shopify entegrasyonundan daha ağır bir işdir. Geniş kataloglara sahip mağaza sahipleri, bir ürünü tek tek el ile gömmek yerine bunu toplu işlemde beklemeli — Ticaret'ten ürün SKU'larını dışarı aktarıp widget'ın ürün kayıtlarıyla eşlemek.
Entegrasyonu Canlıya Çıkmadan Önce Test Etmek
İlk başarılı render'ı bitmişken olarak kabul etmeyin. Squarespace'in canlı editörü ve yayınlanan sitesi farklı şekilde davranabilir ve Squarespace şablonlarındaki mobil render, enjekte edilmiş kod için sık kaynak olan düzen kırılmalarıdır.
Başlatmadan önce çoğu sorunu yakalayan kısa bir kontrol listesi:
- Yayınlanan sayfayı (editör önizlemesini değil) hem masaüstünde hem de gerçek bir mobil cihazda yükleyin — enjekte edilmiş betikler bazen önizleme modunda sessizce başarısız olur.
- Sanal deneme düğmesinin yalnızca ilk test ettiğiniz şablonda değil, her ilgili ürün şablonunda görünmesini onaylayın.
- Modal veya panelin Squarespace'in yapışkan başlığı veya duyuru çubuğu tarafından kesilmediğini kontrol edin.
- Squarespace şablon veya Ticaret planı değişikliğinden sonra widget'ın yine yüklenmesini doğrulayın, çünkü enjekte edilmiş kod ana site güncellemeleri sırasında sıfırlanabilir.
Giyim ve ayakkabılarda önceden iade oranları diğer perakende kategorilerinin çok üzerine taşınır — ayakkabılar özellikle zirveye yakın — mobil'de sessizce başarısız olan sanal deneme widget'ı gerçek bir maliyet, kozmetik bir hata değildir.
YourSizer Nereye Uyar
YourSizer'ın widget'ı tam bu tür el ile enjeksiyonla gömülmek üzere inşa edilmiştir, bu onu Squarespace'in kısıtlamaları için uygun bir çözüm yapar. Temel betik site genelinde bir kez yüklenir ve bireysel ürün gömmeler — canlı bir ürün API'sine bağlı olmayan — ürün ID'sine başvuran hafif parçacıkları referans alır, Squarespace Ticaret'in verileri aslında nasıl ortaya çıkardığına uyarlanırsa.
Shopify yerine veya başsuz bir kurulum yerine Squarespace çalıştıran mağaza sahipleri için bu, kurulum işinin çoğunlukla yerleşim (Kod Bloğu'nu şablon başına doğru konumlandırma) ve ürün eşlemesi (SKU'ları beden ve uyum verileriyle ilişkilendirme) hakkında olduğu, özel geliştirme hakkında değil, anlamına gelir. Takas, devam eden katalog değişiklikleri şablon güncellemelerinden sonra yerleşimi yeniden kontrol etmeyi gerektirmesidir, bu Squarespace'e özel bir bakım adımı bütçelemeye değerdir. Sanal denemeyi veya daha basit bir beden önerisi akışının katalogunuza daha iyi uyup uymadığını tartıyorsanız, tam bir gömme yapmaya karar vermeden önce sanal deneme ve beden önerisiyi nasıl karşılaştırıldığını okumak değerlidir.
Sıkça Sorulan Sorular
Squarespace'e geliştirici olmadan sanal denemeyi ekleyebilir miyim?
Küçük bir katalog veya az sayıda ürün için, evet — kod enjeksiyonu yalnızca Gelişmiş Ayarlar paneline betik yapıştırmayı ve her ürün sayfasına bir Kod Bloğu eklemesini gerektirir, çoğu mağaza sahibi bunu özel geliştirme olmadan yapabilir. Daha geniş kataloglar, geliştirici yardımından başlıca ürün ID eşlemesi adımı için fayda sağlar, çünkü onlarca veya yüzlerce SKU'yu manuel olarak etiketlemek, her bireysel adım basit olsa da yorucudur.
Squarespace Ticaret doğal olarak üçüncü taraf deneme uygulamalarını destekliyor mu?
Hayır. Shopify'den farklı olarak, Squarespace'in deneme araçlarını doğrudan ürün sayfalarına yükleyen bir uygulama pazarı yoktur. Her şey Kod Enjeksiyonu ve Kod Blokları aracılığıyla çalışır, bu da entegrasyonun bir uygulama yüklemesinden daha bir el ile gömmeye benzer olduğu ve Squarespace her şablon güncellemesi yaptığında yeniden doğrulanması gereken anlamına gelir.
Squarespace siteme sanal deneme widget'ı eklenmesi sitemi yavaşlatır mı?
Betik her sayfada yüklenmek yerine aslında kullanıldığı ürün sayfalarına ertelenmişse yapabilir. Temel betiği site genelinde altbilgi enjeksiyonunda bir kez yüklemek ve ürüne özel gömmeler hafif tutmak performans etkisini sınırlandırır, ancak Google PageSpeed Insights veya Squarespace'in kendi analitikleri gibi bir araç kullanarak eklenmeden önce ve sonra sayfa hızını kontrol etmeye değer.
Kod enjeksiyonu ve ürün sayfası gömmesi arasındaki fark nedir?
Kod enjeksiyonu mekanizmadır — betik etiketlerini yapıştırdığınız Squarespace ayarları paneli — bir ürün sayfası gömmesi ise bireysel ürün listesine yerleştirilmiş ve sanal deneme düğmesini render eden ve onu o ürünün verileriyle bağlayan belirli parçacıktır. Tipik olarak temel betiği yüklemek için kod enjeksiyonunu site genelinde bir kez kullanır ve ardından düğmenin görünmesini istediğiniz her ürün sayfasına küçük bir gömme eklersiniz.
Sonuç
Squarespace'in yerel uygulama ekosisteminin olmaması, sanal denemeyi tek tıklamayla kurulumdan daha ziyade el ile bir yapı yapar, ancak altında yatan mekanikler — kod enjeksiyonu, ürün düzeyi gömmeler ve dikkatli şablon test etme — çoğu mağaza sahibi için iyi ulaşılabilir mesafededir. Ön taraf kurulum zamanı sonunda widget canlı olması ve şablonlar arasında doğrulanması sonra beden ile ilgili iade sayısında azalış kaybeder, bu Squarespace'in gerektirdiği dikkatli, sayfa sayfa yaklaşımı değerlidir.