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.
- Kategori
- Ürün sayfası
- Kullanım yeri
- Ürün, Koleksiyon, Açılış sayfaları, Her sayfa
- Okuduğu veri
- Ürünler (isteğe bağlı)
- Boyut
- 29 KB, JavaScript yok
- Lisans
- MIT, müşteri işlerinde ücretsiz
Kısaca
Bu ücretsiz Shopify karşılaştırma tablosu bölümü, iki ila dört ürünü ya da paketi yan yana koyar. Her sütun bir ürün alabilir (görseli, adı, fiyatı ve bağlantısı üründen gelir) ya da kendi görselinizi, başlığınızı ve fiyat metninizi kullanabilir; her satırda bir özellik ve her sütun için bir değer vardır, evet, hayır ve tire simgeye dönüşür. Gerçek bir HTML tablosudur, küçük ekranlarda özellik sütunu sabit kalır, JavaScript gerektirmez ve Online Store 2.0 temalarında uygulama olmadan çalışır.
Ne zaman kullanılır
- Bir koleksiyon ya da açılış sayfasında müşterinin ürün boyutları, paketler ya da setler arasında seçim yapmasına yardım etmek
- Abonelik ya da hizmet paketlerini kendi fiyat metninizle karşılaştırmak
- Bir ürün sayfasında premium sürümün standart sürüme ne eklediğini göstermek
Tema düzenleyicide
- Başlık, başlık etiketi ve boyutu, giriş metni
- En fazla 4 sütun bloğu: ürün ya da özel görsel, başlık ve fiyat metni, kendi etiketinizle öne çıkarma, stilli ve yeni sekmede açılabilen düğme
- Satır blokları: özellik, kısa not ve her sütun için bir değer; evet, hayır ve tire simgeye dönüşür
- Satır grubu başlığı blokları
- Görselleri ve fiyatları gösterme ya da gizleme, görsel şekli, özellik sütunu başlığı
- Tablo, simgeler ve fiyatlar için ekran okuyucu metinleri ve "From" ön eki
- Cihaza göre başlık hizalaması, sayfa ya da tam genişlik
- Arka plan rengi ya da gradyanı; metin, vurgu, tablo, çizgi, öne çıkan sütun, evet ve hayır renkleri
- Cihaza göre üst ve alt boşluk, yalnızca masaüstünde/mobilde göster, çapa kimliği (anchor ID), kaydırınca satırların belirmesi
Dosyalar
sections/lib-comparison-table.liquidsnippets/lib-button.liquidKodu görün
Sade Liquid ve CSS ile, JavaScript olmadan 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
- Satırları nasıl doldururum?
- Her ürün ya da paket için bir Column bloğu, sonra her özellik için bir Row bloğu ekleyin. Bir satırda her sütun için bir değeri aynı sırayla, dikey çizgiyle (|) ayırarak yazın; örneğin "yes | yes | no" ya da "2 | 4 | 6". yes, no ve tire (-) onay, çarpı ve tire simgesine dönüşür; diğer her şey yazdığınız gibi görünür. Row group heading blokları tabloyu başlıklı gruplara ayırır.
- Fiyatları ürünlerimden okur mu?
- Evet. Bir sütunda ürün seçin; bölüm ürünün öne çıkan görselini, adını ve fiyatını gösterir. Ürün indirimdeyse karşılaştırma fiyatı üstü çizili görünür, varyant fiyatları farklıysa fiyatın önüne "From" eklenir. Başka bir bağlantı girmezseniz düğme ürüne gider. Sütundaki fiyat metni ürün fiyatının yerini alır; paketler için kullanışlıdır.
- Mobilde nasıl çalışır?
- Tablo satırlarını ve sütunlarını korur ve kendi alanı içinde yana kayar; bu alan ekran okuyucular için etiketlidir ve klavyeyle ulaşılabilir. Ürünler kayarken özellik sütunu solda sabit kalır, sayfanın kendisi ise hiç yana kaymaz.
- Erişilebilir mi?
- Sütun ve satır başlıkları olan gerçek bir tablodur; ekran okuyucular her hücre için ürünü ve özelliği okur. Onay, çarpı ve tire simgelerinin sizin belirlediğiniz ekran okuyucu metinleri vardır (örneğin Dahil ve Dahil değil); indirimli ve normal fiyatlar da etiketlidir.
- Bir sütunu öne çıkarabilir miyim?
- Evet. Highlight this column ayarını açın ve kendi etiketinizi ekleyin, örneğin "Bizim seçimimiz". Sütunun arka planı renklenir, etiket sütunun üstünde durur ve çerçeveli düğme dolu düğmeye dönüşür. Etiket sizin kendi sözlerinizdir; bölüm hiçbir zaman puan ya da popülerlik iddiası eklemez.
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.
Diğer bölümler
Ürün sayfası
Ö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.
Ü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.
