Kaç adım ekleyebilirim?

En çok 16; her biri tema düzenleyicide sırasını değiştirebileceğiniz bir bloktur. Tarih etiketi serbest metindir; bir yıl, bir mevsim ya da "1. adım" olabilir.

Mobilde nasıl görünüyor?

Masaüstü düzeniniz ne olursa olsun çizgi sola geçer, adımlar da sağında alt alta dizilir. Her adıma ayrı bir mobil görsel de verebilirsiniz.

Ekran okuyucular ve arama motorları okuyabiliyor mu?

Evet. Adımlar HTML’de, sizin belirlediğiniz sırayla ve gerçek başlıklarla oluşturulmuş sıralı bir listedir; çizgi ve işaretler yalnızca görsel süslemedir. JavaScript yoktur.

Adımlar kaydırınca belirebilir mi?

Evet; hareket ayarını açarsanız, kaydırmaya bağlı CSS animasyonlarını destekleyen tarayıcılarda. Ziyaretçi hareketin azaltılmasını istediğinde animasyon hiç çalışmaz; içerik animasyon olmadan da görünür.

Zaman çizelgesi

Marka hikâyeniz ya da bir süreç, çizgi üzerinde tarihli adımlarla: masaüstünde iki yanda, mobilde alt alta; görselli, bağlantılı. Yalnızca Liquid ve CSS.

Kategori: İçerik ve hikâye anlatımı
Kullanım yeri: Hakkımızda, Açılış sayfaları, Ana sayfa
Okuduğu veri: Yalnızca içerik
Boyut: 21 KB, JavaScript yok
Lisans: MIT, müşteri işlerinde ücretsiz

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

Kısaca

Zaman çizelgesi, bir markanın geçmişini ya da bir sürecin aşamalarını bir çizgi üzerinde tarihli adımlarla anlatan ücretsiz bir Shopify bölümüdür. Masaüstünde adımlar ortadaki çizginin iki yanına dönüşümlü olarak dizilir ya da tek tarafta toplanır; mobilde her zaman tek tarafta, alt alta görünür. Her adımda bir tarih etiketi (2019 ya da 2021 Baharı gibi serbest metin), başlık, metin, ayrı mobil görseli ve odak noktaları olan isteğe bağlı bir görsel ile isteğe bağlı bir bağlantı bulunur. Online Store 2.0 temaları için JavaScript kullanmadan, yalnızca Liquid ve CSS ile yazılmış sıralı bir listedir.

Örnek içerikli demo

Ne zaman kullanılır

Hakkımızda sayfasında, ilk üründen bugüne markanın hikâyesi
Siparişe özel üretilen bir ürünün siparişten teslimata kadar nasıl hazırlandığı
Bir iş birliğinin, restorasyonun ya da yenilemenin adım adım anlatımı

Tema düzenleyicide

Başlık (H1–H3 ya da paragraf etiketi, üç boyut) ve giriş metni
Adım blokları: tarih etiketi, başlık, metin, görsel ve mobil görsel, yeni sekme seçenekli bağlantı
Masaüstünde iki yanda dönüşümlü ya da tek tarafta; düz ya da kart görünümlü adımlar
Görsel biçimi (4:3, 16:9, kare), sayfa ya da tam genişlik, cihaza göre başlık hizalaması
Arka plan rengi ya da gradyanı, metin, vurgu, vurgu üzerindeki metin, çizgi ve kart 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 belirme

Dosyalar

sections/lib-timeline.liquid

İndir

Kodu görün

lib-timeline.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 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

Kaç adım ekleyebilirim?: En çok 16; her biri tema düzenleyicide sırasını değiştirebileceğiniz bir bloktur. Tarih etiketi serbest metindir; bir yıl, bir mevsim ya da "1. adım" olabilir.
Mobilde nasıl görünüyor?: Masaüstü düzeniniz ne olursa olsun çizgi sola geçer, adımlar da sağında alt alta dizilir. Her adıma ayrı bir mobil görsel de verebilirsiniz.
Ekran okuyucular ve arama motorları okuyabiliyor mu?: Evet. Adımlar HTML’de, sizin belirlediğiniz sırayla ve gerçek başlıklarla oluşturulmuş sıralı bir listedir; çizgi ve işaretler yalnızca görsel süslemedir. JavaScript yoktur.
Adımlar kaydırınca belirebilir mi?: Evet; hareket ayarını açarsanız, kaydırmaya bağlı CSS animasyonlarını destekleyen tarayıcılarda. Ziyaretçi hareketin azaltılmasını istediğinde animasyon hiç çalışmaz; içerik animasyon olmadan da görünü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.

İçerik ve hikâye anlatımı
Özellik kartları
İkon, başlık ve metinli iki ile dört sütun kart. Masaüstünde imleci yumuşak bir ışıltı izler; dokunmatik ekranlarda kartlar ışıltısız görünür.
İçerik ve hikâye anlatımı
Nasıl çalışır
Abonelik, siparişe özel üretim ya da hizmetler için bir çizgiyle bağlanan numaralı, simgeli adımlar: masaüstünde yan yana, mobilde alt alta; düğme eklenebilir.
İçerik ve hikâye anlatımı
Görsel kolaj
Başlık, metin ve düğmeli bir kartın yanında üst üste binen iki ya da üç fotoğraf; Hakkımızda sayfalarına uygun. Mobilde düzenli ızgara, Liquid ve CSS.