Fare olmadan kullanılabilir mi?

Evet. Ayırıcı yerel bir range input ile çalışır; Tab ona odaklanır, ok, Home ve End tuşları onu hareket ettirir. Ekran okuyucular etiket adlarını ve her görselin ne kadarının göründüğünü duyar. Fare ve dokunmatik sürükleme görselin her yerinde çalışır.

İki fotoğrafın şekli farklıysa ne olur?

İki görsel de aynı çerçeveyi doldurur ve ona göre kırpılır; böylece boyutları hep örtüşür. Masaüstü ve mobil için ayrı ayrı kare, dikey, yatay, geniş ya da uyum (sonra görselinin şeklini alır) seçin. Aynı noktadan çekilmiş fotoğraflar en temiz karşılaştırmayı verir.

JavaScript kapalıysa müşteriler ne görür?

Yalnızca sonra görselini, tam olarak. Önce görseli, ayırıcı ve tutamaç küçük yerleşik script çalışınca görünür.

Mobilde farklı görseller kullanabilir miyim?

Evet. Bir mobil önce ve bir mobil sonra görseli belirleyin; 750px altında, her biri kendi odak noktasıyla gösterilir. Çiftin yine eşleşmesi için ikisini birden belirleyin ya da hiçbirini belirlemeyin.

Sayfayı yavaşlatır mı?

Script, kütüphane içermeyen 100 satırdan kısa vanilla JavaScript’tir. Bölüm sayfadaki ilk iki bölümden biriyse görselleri hemen yüklenir; daha aşağıdaysa lazy-load ile yüklenir.

Önce / sonra kaydırıcısı

Sürüklenebilir ayırıcıyla tek çerçevede iki fotoğraf; müşteriler önceyi ve sonrayı karşılaştırır. Klavye ve ekran okuyucu dostu, ayrı mobil görselli.

Kategori: Ürün sayfası
Kullanım yeri: Ürün, Ana sayfa, Açılış sayfaları
Okuduğu veri: Yalnızca içerik
Boyut: 33 KB, küçük bir betik içerir
Lisans: MIT, müşteri işlerinde ücretsiz

Markdown olarak görüntüle ChatGPT’de aç Claude’da aç

Kısaca

Önce / sonra kaydırıcısı, iki fotoğrafı tek çerçevede üst üste koyan ve müşterilerin karşılaştırmak için bir ayırıcıyı fare, dokunma ya da klavyeyle sürüklemesini sağlayan ücretsiz bir Shopify bölümüdür. Ayrı mobil görseller, yatay ya da dikey bölme ve metin ile düğmeli bir başlık sunar; Online Store 2.0 temalarında uygulama olmadan çalışır.

Örnek içerikli demo

Ne zaman kullanılır

Temizlik, bakım ya da onarım ürünlerinin ürün sayfasında, bir ürünün işlem öncesi ve sonrası
Tamir, yenileme ya da ileri dönüşüm hizmeti için açılış sayfası
Bir odanın mağazanın ürünleriyle düzenlenmeden önceki ve sonraki hâlini karşılaştıran ana sayfa bloğu

Tema düzenleyicide

Başlık, başlık etiketi ve boyutu, metin, tek düğme (dolu, çerçeveli ya da metin bağlantısı)
Her biri isteğe bağlı mobil sürümü ve kendi odak noktası olan önce ve sonra görseli
Cihaza göre görsel şekli (uyum, kare, dikey, yatay, geniş) ve köşe yuvarlaklığı
Soldan sağa ya da yukarıdan aşağı ayırıcı, başlangıç konumu, tutamaç stili (daire, oklar ya da çizgi)
Önce ve sonra etiketleri: metin, göster ya da gizle, üstte ya da altta
Düzen: tam genişlik görselin üstünde metin ya da metnin yanında görsel (solda ya da sağda); mobilde sıra
Cihaza göre metin hizalaması, sayfa ya da tam genişlik
Arka plan rengi ya da gradyan, metin, vurgu, tutamaç ve etiket renkleri
Cihaza göre üst ve alt boşluk, yalnızca masaüstünde/mobilde göster, çapa kimliği

Dosyalar

sections/lib-before-after.liquid

İndir

Kodu görün

lib-before-after.liquid dosyasını açın

snippets/lib-image.liquid

İndir

Kodu görün

lib-image.liquid dosyasını açın

snippets/lib-button.liquid

İndir

Kodu görün

lib-button.liquid dosyasını açın

Sade Liquid, CSS ve küçük bir betikle yazıldı. Uygulama da bağımlılık da yok.

Temanıza nasıl eklenir

Bölüm dosyasını temanızın sections klasörüne, listelediği snippet’leri de snippets klasörüne kopyalayın.
Tema düzenleyicide Add section’ı (Bölüm ekle) seçin ve adı “Lib ·” ile başlayan bölümü ekleyin.
Örnek metni mağazanızın kendi metniyle değiştirin, renkleri markanıza göre ayarlayın.

Sık sorulan sorular

Fare olmadan kullanılabilir mi?: Evet. Ayırıcı yerel bir range input ile çalışır; Tab ona odaklanır, ok, Home ve End tuşları onu hareket ettirir. Ekran okuyucular etiket adlarını ve her görselin ne kadarının göründüğünü duyar. Fare ve dokunmatik sürükleme görselin her yerinde çalışır.
İki fotoğrafın şekli farklıysa ne olur?: İki görsel de aynı çerçeveyi doldurur ve ona göre kırpılır; böylece boyutları hep örtüşür. Masaüstü ve mobil için ayrı ayrı kare, dikey, yatay, geniş ya da uyum (sonra görselinin şeklini alır) seçin. Aynı noktadan çekilmiş fotoğraflar en temiz karşılaştırmayı verir.
JavaScript kapalıysa müşteriler ne görür?: Yalnızca sonra görselini, tam olarak. Önce görseli, ayırıcı ve tutamaç küçük yerleşik script çalışınca görünür.
Mobilde farklı görseller kullanabilir miyim?: Evet. Bir mobil önce ve bir mobil sonra görseli belirleyin; 750px altında, her biri kendi odak noktasıyla gösterilir. Çiftin yine eşleşmesi için ikisini birden belirleyin ya da hiçbirini belirlemeyin.
Sayfayı yavaşlatır mı?: Script, kütüphane içermeyen 100 satırdan kısa vanilla JavaScript’tir. Bölüm sayfadaki ilk iki bölümden biriyse görselleri hemen yüklenir; daha aşağıdaysa lazy-load ile yüklenir.

Yayınlamadan önce

Demolardaki metinler örnek içeriktir. Yayımlamadan önce kendi mağazanızın bilgileriyle değiştirin.
Hareketin azaltılmasını isteyen ziyaretçilerde animasyonlar kapalıdır.
Her dosya burada yayımlanmadan önce Shopify Theme Check ile kontrol edilir.

Temanıza uyarlanmış bir sürüme ya da burada olmayan bir bölüme mi ihtiyacınız var? Şu sayfaya bakın: Shopify tema geliştirme.

Ürün sayfası
Karşılaştırma tablosu
2 ila 4 ürünü ya da paketi özellik satırlarıyla karşılaştırın: onay, çarpı ve metin hücreleri, öne çıkan bir sütun ve mobilde sabit özellik sütunu.
Ürün sayfası
Ürün paketi
Birlikte alınan iki ya da üç ürün: varyant menüleri, anlık toplam ve Cart AJAX API ile hepsini tek tıkla sepete ekleyen bir düğme.
Ürün sayfası
Ürün öne çıkanları
Satın alma alanının altında malzeme, bakım, menşe, ölçü ya da garanti için simgeli maddeler; kendiniz yazın ya da ürün metafieldlarına bağlayın.