Bir görselde kaç ürün olabilir?

En fazla altı. Her nokta; bir ürün, isteğe bağlı bir etiket ve görselin yüzdesi cinsinden yatay ve dikey konumu olan bir bloktur.

Noktalar mobilde farklı yerlerde durabilir mi?

Evet. Ayrı bir mobil görsel yükleyebilirsiniz (750px altında kullanılır) ve her noktanın isteğe bağlı bir mobil konumu vardır; böylece mobil kırpma farklı olsa da noktalar nesnelerinin üzerinde kalır.

Biri bir noktaya dokunduğunda ne olur?

Noktanın yanında, yer olan tarafta küçük bir ürün kartı açılır ve ürün listede vurgulanır. Aynı anda yalnızca bir kart açık olur; Escape, kapat düğmesi ya da dışarıya tıklamak onu kapatır. Noktalar aria-expanded özellikli ve "Show Speckled bud vase" gibi erişilebilir bir adı olan düğmelerdir.

JavaScript olmadan çalışır mı?

Ürün listesi her ürün için bağlantı, görsel ve fiyat içeren düz HTML’dir; script çalışmasa bile müşteriler ve arama motorları her ürüne ulaşabilir. Yalnızca açılır kartlar JavaScript gerektirir; bu da kütüphane içermeyen küçük bir custom element’tir.

Bir noktada ürün seçilmemişse ne olur?

Tema düzenleyicide konumlandırabilmeniz için örnek başlık ve fiyatla yer tutucu bir kart gösterir. Canlı mağazada ürünü olmayan bir nokta gösterilmez.

Kombini satın al

En fazla altı ürün noktası olan bir yaşam tarzı görseli. Noktaya dokununca küçük bir ürün kartı açılır; görselin yanındaki ürün listesi aynı ürünleri gösterir.

Kategori: Ürün ve koleksiyon keşfi
Kullanım yeri: Ana sayfa, Koleksiyon, Açılış sayfaları, Blog yazıları
Okuduğu veri: Ürünler
Boyut: 43 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

Kombini satın al, bir yaşam tarzı görselinin üzerine tıklanabilir ürün noktaları koyan ve aynı ürünleri yanında listeleyen ücretsiz bir Shopify bölümüdür. Her nokta görsel, fiyat ve bağlantı içeren küçük bir kart açar; liste JavaScript olmadan da çalışır ve Online Store 2.0 temalarında uygulama olmadan çalışır.

Örnek içerikli demo

Ne zaman kullanılır

Fotoğraftaki her ürüne doğrudan bağlanan ana sayfa oda ya da kıyafet sahnesi
Serideki parçaların birlikte nasıl durduğunu gösteren koleksiyon sayfası bannerı
Her sahne için bir bölüm olan lookbook ya da kampanya açılış sayfası

Tema düzenleyicide

Başlık, başlık etiketi ve boyutu, metin, liste başlığı ve kart bağlantı etiketi
Ayrı masaüstü ve mobil görsel, cihaza göre görsel şekli, köşe yuvarlaklığı
Yüzde cinsinden konumu ve isteğe bağlı mobil konumu ile etiketi olan en fazla 6 ürün noktası
Nokta stili (nokta, artı ya da numara), boyutu ve renkleri; kart arka planı ve metin renkleri
Görselin yanında ya da altında ürün listesi, görsel solda ya da sağda, görsel genişliği
Listenin altında isteğe bağlı düğme: dolu, çerçeveli ya da metin bağlantısı, yeni sekme
Arka plan rengi ya da gradyan, metin, vurgu ve indirimli fiyat renkleri
Cihaza göre üst ve alt boşluk, yalnızca masaüstünde/mobilde göster, çapa kimliği
Noktalarda nabız animasyonu

Dosyalar

sections/lib-shop-the-look.liquid

İndir

Kodu görün

lib-shop-the-look.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, CSS ve küçük bir betikle 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

Bir görselde kaç ürün olabilir?: En fazla altı. Her nokta; bir ürün, isteğe bağlı bir etiket ve görselin yüzdesi cinsinden yatay ve dikey konumu olan bir bloktur.
Noktalar mobilde farklı yerlerde durabilir mi?: Evet. Ayrı bir mobil görsel yükleyebilirsiniz (750px altında kullanılır) ve her noktanın isteğe bağlı bir mobil konumu vardır; böylece mobil kırpma farklı olsa da noktalar nesnelerinin üzerinde kalır.
Biri bir noktaya dokunduğunda ne olur?: Noktanın yanında, yer olan tarafta küçük bir ürün kartı açılır ve ürün listede vurgulanır. Aynı anda yalnızca bir kart açık olur; Escape, kapat düğmesi ya da dışarıya tıklamak onu kapatır. Noktalar aria-expanded özellikli ve "Show Speckled bud vase" gibi erişilebilir bir adı olan düğmelerdir.
JavaScript olmadan çalışır mı?: Ürün listesi her ürün için bağlantı, görsel ve fiyat içeren düz HTML’dir; script çalışmasa bile müşteriler ve arama motorları her ürüne ulaşabilir. Yalnızca açılır kartlar JavaScript gerektirir; bu da kütüphane içermeyen küçük bir custom element’tir.
Bir noktada ürün seçilmemişse ne olur?: Tema düzenleyicide konumlandırabilmeniz için örnek başlık ve fiyatla yer tutucu bir kart gösterir. Canlı mağazada ürünü olmayan bir nokta gösterilmez.

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 ve koleksiyon keşfi
Koleksiyon kartları
Görsel, başlık, etiket ve ürün sayısıyla en fazla sekiz koleksiyon kartı. Metin görselin üstünde ya da altında, 2–5 sütun ya da mobilde kaydırılabilir satır.
Ürün ve koleksiyon keşfi
Sekmeli koleksiyonlar
Yeni gelenler, Çok satanlar, İndirim ya da istediğiniz koleksiyonlar tek bölümde, sekmeli ızgarada; her sekmede Tümünü gör bağlantısı. Erişilebilir sekmeler.
Ürün ve koleksiyon keşfi
Tamamlayıcı ürünler
Ürün sayfasında "Bununla iyi gider" kartları: Search & Discovery’de seçtiğiniz tamamlayıcı ürünler, hızlı sepete ekleme düğmesiyle. Ücretli uygulama gerekmez.