Shopify'da öncesi ve sonrası kaydırıcısı nasıl eklenir?

Bir diş beyazlatma kiti, bir araç detaylandırma hizmeti ya da bir dizi Lightroom hazır ayarı sattığınızı düşünün. Potansiyel bir müşteriyi satın almaya ne ikna eder? Bu tür ürünlerde insanlar vaatlerinizden fazlasını ister. Sonuçları görmek isterler.

Bir öncesi-sonrası kaydırıcısı, alışveriş yapanların tam olarak ne için ödeme yaptıklarını gözlerinde canlandırmalarını sağlar. Tutamacı sürükleyin, dönüşümü izleyin ve değer kendini satsın. Bu, güven oluşturmanın ve ürününüzü kalabalık bir pazarda öne çıkarmanın en hızlı yollarından biridir.

Shopify’da satış yapıyorsanız şöyle bir sorun var: Varsayılan temaları hazır bir öncesi-sonrası bloğu içermez. Bir tane eklemek için üç seçeneğiniz vardır: Shopify App Store’dan bir uygulama yüklemek, ücretsiz ve kod gerektirmeyen bir widget gömmek ya da tema dosyalarınıza özel kodla bir kaydırıcı eklemek. Bu rehber, tarayıcıları alıcıya dönüştürmeye başlayabilmeniz için bu üç yöntemin de nasıl uygulanacağını adım adım anlatıyor.

Seçenek 1: Bir Shopify App Store eklentisi yükleyin

Çoğu satıcının ilk içgüdüsü, Shopify App Store’u açıp “öncesi-sonrası kaydırıcısı” aramak olur. Pek çok seçenek bulursunuz ve bunların çoğu yerel bir uygulama bloğu olarak yüklenir. Uygulamayı ekledikten sonra kaydırıcı, tema düzenleyicinizin içinde bir ürün sayfasına bırakabileceğiniz bir bölüm veya blok olarak doğrudan görünür. İşte bu kolaylık onu cazip kılan şeydir.

Ancak bu iki maliyetle birlikte gelir.

Birincisi, mağaza sahiplerinin “uygulama vergisi” dediği şeydir. Neredeyse her özel kaydırıcı uygulaması aylık abonelikle çalışır — tek bir etkileşimli özellik için genellikle ayda 1 ila 10 dolar arasında. Burada bir kaydırıcı, orada bir geri sayım sayacı derken, bir yıl sonra eskiden tek seferlik eklenti olan özellikler için ciddi para ödüyorsunuzdur. 

İkinci maliyet ise hızdır. Ön yüz görsel uygulamaları genellikle dokundukları her sayfaya kendi üçüncü taraf JavaScript’lerini enjekte eder. Bunlardan birkaçını yükleyin ve ürün sayfalarınız, sayfa hızını düşürebilecek bir sürü harici betik taşımaya başlar — bu da hem dönüşüm oranınızı hem de SEO’nuzu doğrudan etkiler.

Bu artıları ve eksileri tartıp yine de yerel uygulama yolunu tercih ediyorsanız, kurulum şöyle:

1. Shopify hesabınızda oturum açmış olduğunuzdan emin olarak Shopify App Store’a gidin. “Öncesi-sonrası kaydırıcısı” araması yapın.

2. Bir uygulama seçin ve mağazanıza eklemek için Yükle düğmesine tıklayın.

3. Uygulamayı kurmak için uygulamanın talimatlarını izleyin. Çoğu uygulama, kullanmadan önce ödeme ayarlamanızı gerektirir; bu nedenle bunları temanıza eklemeden önce bu adımı tamamlamanız gerekir.

Seçenek 2: Ücretsiz, kod gerektirmeyen bir kaydırıcı widget’ı kullanın (önerilen)

Aylık abonelik olmadan özelleştirilebilir ve duyarlı bir karşılaştırma kaydırıcısı istiyorsanız, en iyi yol ücretsiz bir gömülü widget’tır. Jotform Öncesi ve Sonrası Kaydırıcısı tam da bunun için tasarlanmıştır. Onu görsel olarak yapılandırır, tek bir gömme kodunu kopyalar ve Shopify sayfanıza bırakırsınız. Yüklenecek bir uygulama ve tekrarlayan bir ücret yoktur.

Widget, temanıza betik enjekte etmek yerine Jotform’un sunucularından yüklendiğinden, mağazanızın kodunu sade tutar ve bu da sayfa hızını korumaya yardımcı olur. Yatay veya dikey açılma ayarlayabilir; sürükleme, tıklama ya da fareyle üzerine gelme etkileşimini seçebilir; etiketler ve altyazılar ekleyebilir; hatta üç karşılaştırma çiftine kadar olanı kompakt bir karusel içinde üst üste dizebilirsiniz.

İşte nasıl ekleyeceğiniz:

1. Jotform Öncesi ve Sonrası Kaydırıcısı sayfasında, öncesi ve sonrası görsellerinizi ekleyin ve her çift için bir etiket ve altyazı yazın. Jotform görselleri URL ile çeker; bu nedenle fotoğraflarınız henüz çevrim içi değilse, önce bunları Shopify’a Ayarlar > Dosyalar altından yükleyin ve her görselin URL’sini kopyalayın. Görselleri doğrudan Jotform’a eklemeyi tercih ediyorsanız görsel yükleme seçeneğini de seçebilirsiniz.

2. Açılma yönünü, ayırıcı konumunu, renkleri ve boyutu mağazanıza uyacak şekilde özelleştirin.

3. Jotform’un oluşturduğu gömme kodunu kopyalayın. Bunu, Yayınla sekmesindeki Kodu Kopyala düğmesine tıklayarak yapabilirsiniz.

4. Shopify tema düzenleyicinizde, kaydırıcıyı istediğiniz ürün veya sayfa şablonunu açın, Bölüm ekle (veya Blok ekle) düğmesine tıklayın ve Özel Liquid seçeneğini seçin. Gömme kodunu yapıştırın ve ardından Kaydet düğmesine tıklayın.

Seçenek 3: Shopify tema kodunuzu düzenleyin

Harici bir uygulamaya ya da gömme koda hiç dokunmak istemiyorsanız, karşılaştırma kaydırıcısını doğrudan temanızda oluşturabilirsiniz. Bu, en fazla kontrolü ve en az ek yükü sunan yoldur, ama aynı zamanda en kolay bozulabilen seçenektir.

Bu yapı üç bölümden oluşur: İki görseli tutmak için HTML, bunları üst üste dizip kırpmak için CSS ve ziyaretçi sürükledikçe ayırıcıyı hareket ettirmek için JavaScript. Bunların tümünü yerleştirebileceğiniz en basit yer tek bir Özel Liquid bloğudur; böylece şablon dosyalarınızı doğrudan düzenlemek zorunda kalmazsınız.

Yapmanız gerekenler şunlar:

1. İşaretlemeyi iki görsel URL’nizle ekleyin. “Öncesi” görseli en üstte yer alır ve kırpılır; “sonrası” görseli ise altında durur.

html<div class="ba-slider" id="baSlider">  <img src="BEFORE_IMAGE_URL" alt="Before" class="ba-img ba-before" id="baBefore">  <img src="AFTER_IMAGE_URL" alt="After" class="ba-img">  <div class="ba-handle" id="baHandle"></div></div>

Önceden uyaralım: Bu, zorlu olan seçenek. Başıboş bir parantez ya da temanızın geri kalanına sızan bir stil, mobil düzeninizi bozabilir veya daha kötüsü, ödeme akışını etkileyebilir. Dokunma davranışının yalnızca masaüstü tarayıcınızda değil, gerçek cihazlar üzerinde test edilmesi gerekir ve her hatanın ve gelecekteki her düzeltmenin sorumluluğu size aittir. Bu ödünleşim bir widget’tan daha kötü görünüyorsa, 2. Seçeneği öneririz.

Shopify mağazanızı akıllı, kodsuz widget’larla geliştirin

Bir “öncesi ve sonrası” kaydırıcısı eklemeye değer, ancak nadiren bir mağazanın ihtiyaç duyduğu tek etkileşimli öğe olur. Shopify’ın en iyi e-ticaret web sitesi oluşturucuları arasında yer almasının bir nedeni, genişletilmesinin çok kolay olmasıdır ve doğru eklentiler, işlevsel bir mağazayı özenle hazırlanmış bir mağazaya dönüştürür. Tuzak ise her biri için ayrı bir aylık abonelik ödemektir, çünkü bu ücretler korumaya çalıştığınız kâr marjlarını sessizce yiyip bitirir.

Bunun yerine ücretsiz, barındırılan widget’lara yönelmenin gerekçesi de budur. Jotform Öncesi ve Sonrası Kaydırıcısı gibi araçlar kârınızı korur, sayfalarınızın hızlı yüklenmesini sağlar ve alışveriş yapanların ilgisini canlı tutar. Üstelik aynı dizin, görsel karşılaştırmalardan çok daha fazlasını kapsar.

Bir Shopify mağazası için incelemeye değer diğer birkaç Jotform widget’ı şunlardır:

• Bir flaş indirime veya ürün lansmanına aciliyet katmak için bir geri sayım sayacı
• Sık sorulan ürün sorularını doğrudan sayfada yanıtlamak için bir SSS widget’ı
• Yaş kısıtlamalı ürünler için yaş doğrulama
• Uzun ürün sayfalarında gezinmeyi kolaylaştırmak için bir başa dön düğmesi

Mağazanıza neyin uygun olduğunu görmek için Jotform web sitesi widget’ları dizinine göz atın. Ayrıca, formlarınızı ve verilerinizi doğrudan Jotform-Shopify entegrasyonu aracılığıyla bağlayabilirsiniz. İlk kodsuz widget’ınızı ücretsiz deneyin ve yalnızca birkaç dakika içinde kurulumu tamamlayın.