Akordeon JavaScript olmadan çalışır mı?

Evet. Her soru yerel bir details ve summary öğesidir; yalnızca tarayıcıyla açılıp kapanır ve klavyeyle çalışır. JavaScript yalnızca, onsuz gizli kalan arama kutusu için ve tek cevap açık modunu yerel olarak desteklemeyen tarayıcılarda bu mod için kullanılır.

Kaç soru ekleyebilirim, gruplayabilir miyim?

En fazla 30 soru bloğu. Sorulara bir grup etiketi verin ve gruplamayı açın: aynı etiketli sorular, etiketlerin ilk göründüğü sırayla, o etiketin başlığı altında birlikte listelenir. Etiketsiz sorular önce listelenir.

SSS yapılandırılmış verisi ekler mi?

Yalnızca varsayılan olarak kapalı olan "Output FAQPage structured data" seçeneğini işaretlerseniz. Bölüm bu durumda sorulardan, cevaplardaki HTML temizlenerek oluşturulmuş schema.org FAQPage JSON-LD üretir. Sayfa başına tek bir SSS’de kullanın; temanız ya da bir uygulama zaten SSS işaretlemesi üretiyorsa kullanmayın. Yapılandırılmış veri aramada zengin sonucu garanti etmez.

Arama kutusu nasıl çalışır?

Ziyaretçi yazarken, sorusu ya da cevabı bu kelimeleri içermeyen sorular gizlenir, boş kalan gruplar da gizlenir ve hiçbir şey eşleşmezse belirlediğiniz mesaj gösterilir. Escape aramayı temizler. Zaten sayfada olan soruları filtreler ve hiç ağ isteği yapmaz.

Cevap açılırken animasyon olur mu?

details içeriğini canlandırabilen tarayıcılarda hareket ayarı açıkken cevaplar kayarak açılır. Diğerlerinde anında açılır; ziyaretçi azaltılmış hareket tercih ettiğinde animasyon her zaman kapalıdır.

SSS akordeonu

Yerel details öğeleriyle SSS akordeonu: en fazla 30 soru, isteğe bağlı gruplar, arama filtresi, tek açık mod ve isteğe bağlı FAQPage yapılandırılmış verisi.

Kategori: Navigasyon ve yardımcı bölümler
Kullanım yeri: Ana sayfa, Ürün, SSS sayfası, Her sayfa
Okuduğu veri: Yalnızca içerik
Boyut: 33 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

SSS akordeonu, yerel HTML ile açılıp kapanan en fazla 30 soru ve cevabı listeleyen ücretsiz bir Shopify bölümüdür; bu yüzden JavaScript olmadan çalışır. İsteğe bağlı ekler bir arama filtresi, aynı anda tek açık cevap, grup başlıkları ve FAQPage JSON-LD ekler; Online Store 2.0 temalarında uygulama olmadan çalışır.

Örnek içerikli demo

Ne zaman kullanılır

Siparişler, iadeler ve ürün bakımına göre gruplanmış ayrı bir SSS ya da yardım sayfası
Satın alma alanının altında beden, malzeme ya da bakımla ilgili ürün sayfası soruları
Ana sayfanın ya da sepet sayfasının alt kısmına yakın kargo ve iade cevapları

Tema düzenleyicide

Başlık, başlık etiketi ve boyutu, giriş metni
En fazla 30 soru: soru, zengin metin cevap, isteğe bağlı grup etiketi
Etikete göre grupla, ilk soruyu açık başlat, aynı anda yalnızca bir cevap açık
Etiketi, yer tutucusu ve sonuç yok mesajıyla arama kutusu
Artı, ok ya da ikon yok; ayırıcı çizgiler ya da kartlar; köşe yuvarlaklığı
Düzen: tek sütun, masaüstünde iki sütun ya da solda başlık ve sağda sorular; cihaza göre başlık hizalaması
Metin ve düğmeli iletişim kutusu; arka plan, metin, vurgu, kart ve ayırıcı renkleri
Cihaza göre üst ve alt boşluk, yalnızca masaüstünde/mobilde göster, çapa kimliği, açılma animasyonu açma/kapama
İsteğe bağlı FAQPage yapılandırılmış verisi (varsayılan olarak kapalı)

Dosyalar

sections/lib-faq.liquid

İndir

Kodu görün

lib-faq.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

Akordeon JavaScript olmadan çalışır mı?: Evet. Her soru yerel bir details ve summary öğesidir; yalnızca tarayıcıyla açılıp kapanır ve klavyeyle çalışır. JavaScript yalnızca, onsuz gizli kalan arama kutusu için ve tek cevap açık modunu yerel olarak desteklemeyen tarayıcılarda bu mod için kullanılır.
Kaç soru ekleyebilirim, gruplayabilir miyim?: En fazla 30 soru bloğu. Sorulara bir grup etiketi verin ve gruplamayı açın: aynı etiketli sorular, etiketlerin ilk göründüğü sırayla, o etiketin başlığı altında birlikte listelenir. Etiketsiz sorular önce listelenir.
SSS yapılandırılmış verisi ekler mi?: Yalnızca varsayılan olarak kapalı olan "Output FAQPage structured data" seçeneğini işaretlerseniz. Bölüm bu durumda sorulardan, cevaplardaki HTML temizlenerek oluşturulmuş schema.org FAQPage JSON-LD üretir. Sayfa başına tek bir SSS’de kullanın; temanız ya da bir uygulama zaten SSS işaretlemesi üretiyorsa kullanmayın. Yapılandırılmış veri aramada zengin sonucu garanti etmez.
Arama kutusu nasıl çalışır?: Ziyaretçi yazarken, sorusu ya da cevabı bu kelimeleri içermeyen sorular gizlenir, boş kalan gruplar da gizlenir ve hiçbir şey eşleşmezse belirlediğiniz mesaj gösterilir. Escape aramayı temizler. Zaten sayfada olan soruları filtreler ve hiç ağ isteği yapmaz.
Cevap açılırken animasyon olur mu?: details içeriğini canlandırabilen tarayıcılarda hareket ayarı açıkken cevaplar kayarak açılır. Diğerlerinde anında açılır; ziyaretçi azaltılmış hareket tercih ettiğinde animasyon her zaman kapalıdır.

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.

Navigasyon ve yardımcı bölümler
Mağaza bulucu
Adres, çalışma saatleri, telefon ve Google Haritalar, Apple Haritalar ya da OpenStreetMap yol tarifi bağlantısıyla mağaza kartları ve şehir filtresi. API yok.
Hero ve bannerlar
Koleksiyon bannerı
Koleksiyon sayfaları için başlık, açıklama, görsel ve ürün sayısı. Metin görselin üzerinde ya da yanında durur; içerik yolu (breadcrumb) isteğe bağlıdır.
Hero ve bannerlar
Hero banner
Üzerinde üst başlık, başlık, metin ve iki düğme olan tam genişlik görsel banner; ayrı mobil görsel, katman, dokuz içerik konumu ve cihaza göre yükseklik.