Kaç kart ekleyebilirim?

En fazla sekiz kart bloğu. Masaüstünde iki ile dört, mobilde bir ya da iki sütun seçin.

Işıltı efekti JavaScript gerektirir mi?

Yaklaşık 1 KB’lık küçük bir custom element ışıltıyı hareket ettirir. Dokunmatik ekranlarda ya da ışıltı ayarı kapalıyken çalışmaz; kartlar onsuz da çalışır.

Bir kart bir sayfaya bağlanabilir mi?

Evet. Bir bağlantı ekleyin; kartın tamamı tıklanabilir olur, altta isteğe bağlı bir etiket ve yeni sekmede açma seçeneğiyle.

Ö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.

Kategori: İçerik ve hikâye anlatımı
Kullanım yeri: Ana sayfa, Ürün, Her sayfa
Okuduğu veri: Yalnızca içerik
Boyut: 14 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

Özellik kartları, değer önerileri için ücretsiz bir Shopify bölümüdür: her birinde bir ikon ya da simge, başlık, metin ve isteğe bağlı bağlantı olan iki ile dört sütun kart. Masaüstünde isteğe bağlı bir ışıltı imleci izler; dokunmatik ekranlarda kartlar ışıltısız görünür.

Örnek içerikli demo

Ne zaman kullanılır

Ana sayfada satın alma nedenleri: kargo, iade, malzeme, garantiler
Ürün sayfasında satın alma alanının altında faydalar
Neyin dahil olduğunu listeleyen hizmet, toptan satış ya da B2B sayfaları

Tema düzenleyicide

Başlık, başlık etiketi ve boyutu, giriş
En fazla 8 kart: ikon görseli ya da simge, başlık, metin, etiketli isteğe bağlı bağlantı
Sütunlar: masaüstünde 2–4, mobilde 1–2
Cihaza göre başlık hizalaması, kart hizalaması, köşe yuvarlaklığı, sayfa ya da tam genişlik
Arka plan rengi ya da gradyan, kart, metin ve ışıltı renkleri
Cihaza göre üst ve alt boşluk, yalnızca masaüstünde/mobilde göster, çapa kimliği
İmleç ışıltısını açma/kapama

Dosyalar

sections/lib-feature-cards.liquid

İndir

Kodu görün

lib-feature-cards.liquid dosyasını açın

Uiverse.io cards kalıbından uyarlandı; sade Liquid ve CSS ile yeniden yazıldı.

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ç kart ekleyebilirim?: En fazla sekiz kart bloğu. Masaüstünde iki ile dört, mobilde bir ya da iki sütun seçin.
Işıltı efekti JavaScript gerektirir mi?: Yaklaşık 1 KB’lık küçük bir custom element ışıltıyı hareket ettirir. Dokunmatik ekranlarda ya da ışıltı ayarı kapalıyken çalışmaz; kartlar onsuz da çalışır.
Bir kart bir sayfaya bağlanabilir mi?: Evet. Bir bağlantı ekleyin; kartın tamamı tıklanabilir olur, altta isteğe bağlı bir etiket ve yeni sekmede açma seçeneğiyle.

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ı
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.
İç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.