Kaç adım ekleyebilirim?

En çok altı; her adım bir bloktur. Yan yana düzende adımlar genişliği eşit paylaşır; adım başına daha fazla ayrıntı vermek istiyorsanız sütun düzenini kullanın.

Numara yerine simge kullanabilir miyim?

Evet. İşaret türünü Simge olarak değiştirin: her adım için on bir çizgi simgeden birini ya da kendi görselinizi seçebilirsiniz; "2. adım" gibi isteğe bağlı bir etiket, sıranın yine de anlaşılmasını sağlar.

Adımların yerini değiştirince numaralar güncelleniyor mu?

Evet. Numaralar liste sırasından gelir ve adımlar HTML’de sıralı bir listedir; bu sayede ekran okuyucular da adım sayısını ve sırasını bildirir.

Harekete geçirici bir düğme ekleyebilir miyim?

Evet. Son adımın ardından dolu, çerçeveli ya da metin stilinde, isteğe bağlı olarak yeni sekmede açılan bir düğme ekleyebilirsiniz; örneğin "Siparişinizi başlatın".

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.

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

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

Kısaca

Nasıl çalışır, bir süreci numaralı adımlarla anlatan ücretsiz bir Shopify bölümüdür. Her adımda bir numara ya da simge, bir başlık ve kısa bir metin bulunur; adımlar bir çizgiyle birbirine bağlanır, masaüstünde yan yana (ya da sütun halinde), mobilde alt alta dizilir. Numaralar blokların sırasını izler; adımların yerini değiştirdiğinizde numaralar da kendiliğinden güncellenir. Son adımın ardından isteğe bağlı bir düğme müşteriyi bir sonraki adıma yönlendirir. Abonelikler, siparişe özel ve kişiselleştirilmiş ürünler, hizmetler ve iadeler için uygundur. Online Store 2.0 temaları için düz Liquid ve CSS ile yazılmış, uygulama gerektirmeyen sıralı bir listedir.

Örnek içerikli demo

Ne zaman kullanılır

Aboneliğin işleyişi: seçin, teslim alın, duraklatın ya da atlayın
Siparişe özel ya da kişiselleştirilmiş ürünlerin nasıl hazırlanıp teslim edildiği
Bir yardım ya da politika sayfasında iade veya onarım sürecinin adımları

Tema düzenleyicide

Başlık (H1–H3 ya da paragraf etiketi, üç boyut), giriş metni, stil ve yeni sekme seçenekli düğme
Adım blokları (en çok 6): hazır simge ya da özel simge görseli, başlık, metin
Masaüstünde yan yana ya da sütun düzeni, numara ya da simge işaretleri, adım etiketi, düz ya da kart görünümlü adımlar, adımları birleştiren çizgi
Sayfa ya da tam genişlik, cihaza göre hizalama
Arka plan rengi ya da gradyanı, metin, işaret, işaret üzerindeki metin, kart ve çizgi 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-how-it-works.liquid

İndir

Kodu görün

lib-how-it-works.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 altı; her adım bir bloktur. Yan yana düzende adımlar genişliği eşit paylaşır; adım başına daha fazla ayrıntı vermek istiyorsanız sütun düzenini kullanın.
Numara yerine simge kullanabilir miyim?: Evet. İşaret türünü Simge olarak değiştirin: her adım için on bir çizgi simgeden birini ya da kendi görselinizi seçebilirsiniz; "2. adım" gibi isteğe bağlı bir etiket, sıranın yine de anlaşılmasını sağlar.
Adımların yerini değiştirince numaralar güncelleniyor mu?: Evet. Numaralar liste sırasından gelir ve adımlar HTML’de sıralı bir listedir; bu sayede ekran okuyucular da adım sayısını ve sırasını bildirir.
Harekete geçirici bir düğme ekleyebilir miyim?: Evet. Son adımın ardından dolu, çerçeveli ya da metin stilinde, isteğe bağlı olarak yeni sekmede açılan bir düğme ekleyebilirsiniz; örneğin "Siparişinizi başlatın".

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ı
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.
İçerik ve hikâye anlatımı
Görsel ve metin
Başlık, metin, en fazla dört ikonlu madde ve iki düğmenin yanında görsel. Görselin genişliği, yönü ve şekli ayarlanır; metin görselle örtüşen kartta durabilir.