Rakamlar nereden gelir?

Her istatistik bloğuna onları siz yazarsınız; bölüm mağazanızdan veri çekmez. Demodaki ve hazır ayardaki rakamlar kurgusal bir mağazaya ait örnek içeriktir; bunları arkasında durabileceğiniz rakamlarla değiştirin.

Hangi sayı biçimlerini sayarak artırabilir?

Metindeki ilk sayı sayarak artar, öncesi ve sonrası yazıldığı gibi kalır; böylece 12,000+, 98%, $2.5M, 4.8/5 ve 9 yrs gibi değerlerin hepsi çalışır. Binlik ayırıcılar (virgül, nokta, boşluk ya da kesme işareti) ve ondalıklar korunur. Sayı içermeyen metin olduğu gibi gösterilir.

Son rakam Google’a ve JavaScript olmadan görünür mü?

Evet. HTML, değeri tam yazdığınız gibi içerir. Küçük bir custom element onu yalnızca tarayıcıda sıfıra çeker, istatistiklerin en az %30’u ekrana girince requestAnimationFrame ile sayarak artırır ve sizin özgün metninizle bitirir.

Azaltılmış hareket tercih eden ziyaretçiler ne görür?

Cihaz azaltılmış hareket istediğinde script hiçbir şey yapmaz ve son rakamlar hemen görünür. Sayarak artmayı kapatabilir ya da süresini 1 ile 4 saniye arasında ayarlayabilirsiniz.

Rakamlar sayarken düzen zıplar mı?

Hayır. Her rakam sayarken son değerinin genişliğini korur ve hanelerde tablo rakamları (tabular figures) kullanılır. Rakamlar dar sütunlarda küçülür; böylece 12,000+ gibi bir değer tek satırda kalır.

İstatistik sayacı

Görünüme girince sayarak artan, etiket, açıklama ve ikonlu en fazla 6 rakam. Ayırıcılı satır, kartlar ya da başlığın yanında büyük rakamlar.

Kategori: Sosyal kanıt ve güven
Kullanım yeri: Ana sayfa, Hakkımızda, Açılış sayfaları
Okuduğu veri: Yalnızca içerik
Boyut: 19 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

İstatistik sayacı, üretilen parça sayısı ya da faaliyet yılı gibi en fazla altı rakamı, her biri bir etiket, isteğe bağlı açıklama ve ikonla gösteren ücretsiz bir Shopify bölümüdür. Bölüm görünüme girince rakamlar sıfırdan sayarak artar; son değer ise arama motorları ve JavaScript’i olmayan ziyaretçiler için HTML’de kalır. Online Store 2.0 temalarında uygulama olmadan çalışır.

Örnek içerikli demo

Ne zaman kullanılır

Hakkımızda sayfasında bilgiler: faaliyet yılı, üretilen ürün, ekip büyüklüğü
Hero’nun altında yorum puanı ve gönderilen siparişlerle ana sayfa güven satırı
Satış noktaları, gönderim yapılan ülkeler ya da teslim süreleriyle toptan satış veya B2B açılış sayfası

Tema düzenleyicide

Başlık, başlık etiketi ve boyutu, metin
En fazla 6 istatistik: sayı (herhangi bir ön ek ya da son ekle), etiket, isteğe bağlı açıklama ve ikon
Düzen: ayırıcılı satır, kartlar ya da başlığın yanında büyük rakamlar
Rakam boyutu (küçükten çok büyüğe), sütunlar: masaüstünde 2–6, mobilde 1–2
Cihaza göre hizalama, sayfa ya da tam genişlik, kart köşe yuvarlaklığı
Arka plan rengi ya da gradyan, metin, rakam ve kart renkleri
Cihaza göre üst ve alt boşluk, yalnızca masaüstünde/mobilde göster, çapa kimliği
Görünüme girince sayarak artır, sayma süresi

Dosyalar

sections/lib-stats-counter.liquid

İndir

Kodu görün

lib-stats-counter.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

Rakamlar nereden gelir?: Her istatistik bloğuna onları siz yazarsınız; bölüm mağazanızdan veri çekmez. Demodaki ve hazır ayardaki rakamlar kurgusal bir mağazaya ait örnek içeriktir; bunları arkasında durabileceğiniz rakamlarla değiştirin.
Hangi sayı biçimlerini sayarak artırabilir?: Metindeki ilk sayı sayarak artar, öncesi ve sonrası yazıldığı gibi kalır; böylece 12,000+, 98%, $2.5M, 4.8/5 ve 9 yrs gibi değerlerin hepsi çalışır. Binlik ayırıcılar (virgül, nokta, boşluk ya da kesme işareti) ve ondalıklar korunur. Sayı içermeyen metin olduğu gibi gösterilir.
Son rakam Google’a ve JavaScript olmadan görünür mü?: Evet. HTML, değeri tam yazdığınız gibi içerir. Küçük bir custom element onu yalnızca tarayıcıda sıfıra çeker, istatistiklerin en az %30’u ekrana girince requestAnimationFrame ile sayarak artırır ve sizin özgün metninizle bitirir.
Azaltılmış hareket tercih eden ziyaretçiler ne görür?: Cihaz azaltılmış hareket istediğinde script hiçbir şey yapmaz ve son rakamlar hemen görünür. Sayarak artmayı kapatabilir ya da süresini 1 ile 4 saniye arasında ayarlayabilirsiniz.
Rakamlar sayarken düzen zıplar mı?: Hayır. Her rakam sayarken son değerinin genişliğini korur ve hanelerde tablo rakamları (tabular figures) kullanılır. Rakamlar dar sütunlarda küçülür; böylece 12,000+ gibi bir değer tek satırda kalır.

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.

Sosyal kanıt ve güven
Logo bulutu
Basın, iş ortağı ya da satış noktası logolarından sabit ızgara veya satır; üzerine gelince griden renge, ayırıcı çizgi ya da kart, cihaza göre logo boyu.
Sosyal kanıt ve güven
Basın alıntıları
Yayın logolarıyla "Basında biz" alıntıları: alıntı kartları ya da logo sekmeleriyle değişen bir alıntı döngüsü. Duraklatma düğmesi var, sahte logo yok.
Sosyal kanıt ve güven
Değerlendirme özeti
Yorum uygulamanızın doldurduğu reviews.rating metafieldlarından yıldız puanı ve yorum sayısı, yorumlara bağlantıyla. Puanı olmayan üründe görünmez.