Her ürün için farklı maddeleri nasıl gösteririm?

Ayarlar > Özel veriler altında ürün metafieldları (örneğin Malzeme ya da Bakım) oluşturup her ürün için doldurun. Ardından tema düzenleyicide maddenin başlığını ya da metnini dinamik kaynak düğmesiyle bu metafielda bağlayın. Başlığı ve metni o ürün için boş olan maddeler görünmez.

Kendi simgelerimi kullanabilir miyim?

Evet. Her madde için on iki hazır çizgi simgeden (doğal, el yapımı, kumaş, su, yıkama, ısı, güneş, geri dönüştürülmüş, menşe, ölçü, garanti, onay) birini seçebilir, maddeyi simgesiz bırakabilir ya da küçük bir görsel yükleyebilirsiniz. Simge boyutu bölüm genelinde tek bir ayardır.

Ürün sayfasında nereye yerleştirmeliyim?

Genellikle ana ürün bölümünün hemen altına, liste düzeninde ve çizgiyle ayrılmış ya da kart görünümlü maddelerle; böylece satın alma alanının bir parçası gibi durur. Izgara düzeni ise sayfanın aşağısında tam genişlikte bir sıraya ya da bir açılış sayfasına daha iyi uyar.

Evet. Maddeler, metin başlıkları olan gerçek bir listedir; simgeler yalnızca süs amaçlıdır ve ekran okuyuculardan gizlenir, böylece hiçbir bilgi iki kez okunmaz.

Ürün öne çıkanları

Satın alma alanının altında malzeme, bakım, menşe, ölçü ya da garanti için simgeli maddeler; kendiniz yazın ya da ürün metafieldlarına bağlayın.

Kategori: Ürün sayfası
Kullanım yeri: Ürün
Okuduğu veri: Yalnızca içerik ya da ürün metafieldları
Boyut: 16 KB, JavaScript yok
Lisans: MIT, müşteri işlerinde ücretsiz

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

Kısaca

Ürün öne çıkanları, bir ürünün temel bilgilerini satın alma alanının altında kısa, simgeli maddelerle sıralayan ücretsiz bir Shopify bölümüdür: malzeme, bakım, menşe, ölçü, garanti. Her madde bir bloktur; başlığını ve metnini kendiniz yazabilir ya da tema düzenleyicide bir ürün metafieldına bağlayabilirsiniz. Böylece tek bir ürün şablonu her ürünün kendi bilgisini gösterir; bir üründe boş kalan madde ise hiç görünmez. On iki hazır çizgi simge ya da kendi simge görselleriniz, liste ya da ızgara düzeni ve düz, kart ya da çizgiyle ayrılmış stiller arasından seçim yapabilirsiniz. Online Store 2.0 temaları için yazılmış, uygulama gerektirmeyen düz Liquid ve CSS’tir.

Örnek içerikli demo

Ne zaman kullanılır

Sepete ekle düğmesinin altında malzeme, bakım ve menşe bilgisi
Mobilya ya da mutfak ürünlerinde metafieldlardan gelen ölçü ve hacim bilgisi
Açılış sayfasında marka vaatlerinden oluşan bir sıra (el yapımı, geri dönüştürülmüş ambalaj, iki yıl garanti)

Tema düzenleyicide

Başlık (H1–H3 ya da paragraf etiketi, üç boyut)
Madde blokları (en çok 12): hazır simge ya da özel görsel, metafielda bağlanabilen başlık ve metin
Liste ya da ızgara (masaüstünde 2–4, mobilde 1–2 sütun), düz, kart ya da çizgiyle ayrılmış maddeler, simge boyutu
Sayfa ya da tam genişlik, cihaza göre hizalama
Arka plan rengi ya da gradyanı, metin, simge, kart ve ayırıcı ç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-product-highlights.liquid

İndir

Kodu görün

lib-product-highlights.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

Her ürün için farklı maddeleri nasıl gösteririm?: Ayarlar > Özel veriler altında ürün metafieldları (örneğin Malzeme ya da Bakım) oluşturup her ürün için doldurun. Ardından tema düzenleyicide maddenin başlığını ya da metnini dinamik kaynak düğmesiyle bu metafielda bağlayın. Başlığı ve metni o ürün için boş olan maddeler görünmez.
Kendi simgelerimi kullanabilir miyim?: Evet. Her madde için on iki hazır çizgi simgeden (doğal, el yapımı, kumaş, su, yıkama, ısı, güneş, geri dönüştürülmüş, menşe, ölçü, garanti, onay) birini seçebilir, maddeyi simgesiz bırakabilir ya da küçük bir görsel yükleyebilirsiniz. Simge boyutu bölüm genelinde tek bir ayardır.
Ürün sayfasında nereye yerleştirmeliyim?: Genellikle ana ürün bölümünün hemen altına, liste düzeninde ve çizgiyle ayrılmış ya da kart görünümlü maddelerle; böylece satın alma alanının bir parçası gibi durur. Izgara düzeni ise sayfanın aşağısında tam genişlikte bir sıraya ya da bir açılış sayfasına daha iyi uyar.
Erişilebilir mi?: Evet. Maddeler, metin başlıkları olan gerçek bir listedir; simgeler yalnızca süs amaçlıdır ve ekran okuyuculardan gizlenir, böylece hiçbir bilgi iki kez okunmaz.

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.

Ürün sayfası
Önce / sonra kaydırıcısı
Sürüklenebilir ayırıcıyla tek çerçevede iki fotoğraf; müşteriler önceyi ve sonrayı karşılaştırır. Klavye ve ekran okuyucu dostu, ayrı mobil görselli.
Ürün sayfası
Karşılaştırma tablosu
2 ila 4 ürünü ya da paketi özellik satırlarıyla karşılaştırın: onay, çarpı ve metin hücreleri, öne çıkan bir sütun ve mobilde sabit özellik sütunu.
Ürün sayfası
Ürün paketi
Birlikte alınan iki ya da üç ürün: varyant menüleri, anlık toplam ve Cart AJAX API ile hepsini tek tıkla sepete ekleyen bir düğme.