Kaç sütun ekleyebilirim, nasıl alt satıra geçerler?

En fazla on iki sütun bloğu. Masaüstünde satır başına 2–6 sütun ayarlayın; fazla sütunlar yeni bir satıra geçer. 750px ile 989px arasında ızgara en fazla üç sütun gösterir. Mobilde tek sütun, iki sütun ya da kaydırılabilir bir satır seçersiniz.

Her sütunun mobilde farklı bir görseli olabilir mi?

Evet. Her sütunun bir masaüstü görseli ve 750px altında gösterilen isteğe bağlı bir mobil görseli vardır; her biri tema düzenleyicideki kendi odak noktasına uyar. Bir sütun küçük bir ikon (48px) da gösterebilir ya da hiç medya göstermeyebilir.

Kaydırılabilir satır nasıl çalışır?

Mobilde sütunlar, bölümün içinde yakalama noktalarıyla yana kayan bir satırda durur; sayfanın kendisi yatay kaymaz. CSS scroll snapping kullanır; bölümde JavaScript yoktur.

Bir sütundaki bağlantılar nasıl çalışır?

Bir bağlantı ve etiket ekleyin; etiket metnin altında bir okla görünür. Etiketsiz bir bağlantı eklerseniz sütun başlığı bağlantı olur. İkisi de yeni sekmede açılabilir.

Görseller sayfayı yavaşlatır mı?

Bölüm sayfadaki ilk iki bölümden biriyse ilk satır hariç görseller lazy-load ile yüklenir. Sabit bir görsel şekliyle (kare, dikey, yatay ya da daire) her görsel yerini önceden ayırır; böylece görseller yüklenirken düzen kaymaz.

Çok sütunlu içerik

Görsel ya da ikon, başlık, metin ve bağlantılı en fazla 12 sütun. Masaüstünde 2–6; mobilde 1, 2 ya da kayan satır. Düz, dolu ya da çerçeveli kart.

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

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

Kısaca

Çok sütunlu içerik, her birinde bir görsel ya da küçük ikon, başlık, metin ve isteğe bağlı bağlantı olan en fazla on iki sütun dizen ücretsiz bir Shopify bölümüdür. Masaüstünde 2–6 sütun, mobilde tek sütun, iki sütun ya da kaydırılabilir bir satır ve düz, dolu ya da çerçeveli kart stili seçersiniz. Yalnızca HTML ve CSS’tir; Online Store 2.0 temalarında uygulama olmadan çalışır.

Örnek içerikli demo

Ne zaman kullanılır

Ana sayfada ya da Hakkımızda sayfasında her adım için bir sütunla "nasıl yapılıyor" satırı
Küçük ikonlarla ürün sayfasında faydalar ya da bakım talimatları
Her biri bir sütunda rehberlere, hizmetlere ya da koleksiyonlara bağlanan açılış sayfası

Tema düzenleyicide

Başlık, başlık etiketi ve boyutu, metin, sütunların altında isteğe bağlı düğme
En fazla 12 sütun: ayrı mobil görselli görsel, küçük ikon ya da medyasız; başlık, metin, etiketli bağlantı
Görsel şekli (uyum, kare, dikey, yatay, daire), tam sütun genişliği ya da küçük ve ortalanmış
Sütun stili: yok, dolu kart ya da çerçeveli kart; köşe yuvarlaklığı
Sütunlar: masaüstünde 2–6; mobilde 1, 2 ya da kaydırılabilir satır; sütunlar arası boşluk
Cihaza göre başlık ve düğme hizalaması, sütun metni hizalaması, sayfa ya da tam genişlik
Arka plan rengi ya da gradyan, metin, kart, vurgu ve vurgu üzerindeki metin renkleri
Cihaza göre üst ve alt boşluk, yalnızca masaüstünde/mobilde göster, çapa kimliği

Dosyalar

sections/lib-multicolumn.liquid

İndir

Kodu görün

lib-multicolumn.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ç sütun ekleyebilirim, nasıl alt satıra geçerler?: En fazla on iki sütun bloğu. Masaüstünde satır başına 2–6 sütun ayarlayın; fazla sütunlar yeni bir satıra geçer. 750px ile 989px arasında ızgara en fazla üç sütun gösterir. Mobilde tek sütun, iki sütun ya da kaydırılabilir bir satır seçersiniz.
Her sütunun mobilde farklı bir görseli olabilir mi?: Evet. Her sütunun bir masaüstü görseli ve 750px altında gösterilen isteğe bağlı bir mobil görseli vardır; her biri tema düzenleyicideki kendi odak noktasına uyar. Bir sütun küçük bir ikon (48px) da gösterebilir ya da hiç medya göstermeyebilir.
Kaydırılabilir satır nasıl çalışır?: Mobilde sütunlar, bölümün içinde yakalama noktalarıyla yana kayan bir satırda durur; sayfanın kendisi yatay kaymaz. CSS scroll snapping kullanır; bölümde JavaScript yoktur.
Bir sütundaki bağlantılar nasıl çalışır?: Bir bağlantı ve etiket ekleyin; etiket metnin altında bir okla görünür. Etiketsiz bir bağlantı eklerseniz sütun başlığı bağlantı olur. İkisi de yeni sekmede açılabilir.
Görseller sayfayı yavaşlatır mı?: Bölüm sayfadaki ilk iki bölümden biriyse ilk satır hariç görseller lazy-load ile yüklenir. Sabit bir görsel şekliyle (kare, dikey, yatay ya da daire) her görsel yerini önceden ayırır; böylece görseller yüklenirken düzen kaymaz.

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.