# Ürün sekmeleri: ücretsiz Shopify bölümü > Kendi metninizden, ürün açıklamasından, bir sayfadan ya da metafield’dan (meta alan) en fazla 6 ürün bilgisi sekmesi. Masaüstünde sekmeler, mobilde akordeon. Ürün sekmeleri, açıklama, bakım, kargo ve ölçüler gibi ürün bilgilerini en fazla altı sekmede toplayan ücretsiz bir Shopify bölümüdür; her sekme yazdığınız metinden, ürün açıklamasından, bir sayfadan ya da bir ürün metafield’ından doldurulur. Masaüstünde erişilebilir sekmeler, mobilde akordeon gösterir, her sekmenin içeriğini HTML’de tutar ve Online Store 2.0 temalarında uygulama olmadan çalışır. - **Kategori:** Ürün sayfası - **Kullanıldığı yerler:** Ürün, Açılış sayfaları, Her sayfa - **Okuduğu veri:** Ürünler - **Boyut:** 1 dosyada 28 KB, küçük bir betikle - **Lisans:** MIT, © 2026 Lintel - **Sayfa:** https://lintelagency.com/tr/kaynaklar/shopify-bolumleri/urun-sekmeleri - **Canlı demo:** https://lintelagency.com/resources/shopify-sections/demo/lib-product-tabs.html - **Eklenme tarihi:** 2026-10-02 ## Ne işe yarar - Ürün sayfasında satın alma alanının altında: açıklama, malzeme ve bakım, kargo ve iade, ölçüler - Her ürün sayfasında bir sekmede gösterilen ortak bir beden rehberi ya da kargo politikası sayfası - Her ürün sayfasını düzenlemeden, bir metafield’da tutulan ürüne özel bakım ya da içerik bilgileri ## Tema düzenleyici ayarları Bölüm tema düzenleyicide “Lib · Product tabs” adıyla görünür. Kimlikler, türler, etiketler ve varsayılan değerler bölümün şemasından gelir. Etiketler tema düzenleyicide göründüğü gibi İngilizcedir. ### Content | Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık | | --- | --- | --- | --- | --- | | `heading` | `inline_richtext` | Heading | The details | | | `heading_tag` | `select` | Heading tag | h2 | `h1`, `h2`, `h3`, `p` | | `heading_size` | `select` | Heading size | medium | `small`, `medium`, `large`, `xlarge` | | `text` | `richtext` | Intro text | – | | | `product` | `product` | Product | – | | ### Layout | Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık | | --- | --- | --- | --- | --- | | `layout` | `select` | Layout | tabs | `tabs`, `accordion` | | `tab_style` | `select` | Tab style | underline | `underline`, `pills`, `boxed` | | `tab_alignment` | `select` | Tab alignment | left | `left`, `center` | | `open_first` | `checkbox` | Open the first item | `true` | | | `section_width` | `select` | Width | page | `page`, `full` | | `max_width` | `range` | Content max width | `960` | 600–1400 px, step 20 | | `text_alignment` | `text_alignment` | Heading alignment on desktop | left | | | `text_alignment_mobile` | `select` | Heading alignment on mobile | left | `left`, `center`, `right` | ### Colors | Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık | | --- | --- | --- | --- | --- | | `color_bg` | `color` | Background | #FFFFFF | | | `color_bg_gradient` | `color_background` | Background gradient | – | | | `color_text` | `color` | Text | #1C1917 | | | `color_accent` | `color` | Accent (active tab, focus ring) | #1C1917 | | | `color_accent_text` | `color` | Text on accent (pill tabs) | #FFFFFF | | | `color_border` | `color` | Lines and borders | #E7E5E4 | | ### Spacing and visibility | Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık | | --- | --- | --- | --- | --- | | `padding_top` | `range` | Top padding on desktop | `64` | 0–200 px, step 4 | | `padding_bottom` | `range` | Bottom padding on desktop | `64` | 0–200 px, step 4 | | `padding_top_mobile` | `range` | Top padding on mobile | `40` | 0–160 px, step 4 | | `padding_bottom_mobile` | `range` | Bottom padding on mobile | `40` | 0–160 px, step 4 | | `show_on` | `select` | Show on | all | `all`, `desktop`, `mobile` | | `anchor_id` | `text` | Anchor ID | – | | ### Motion | Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık | | --- | --- | --- | --- | --- | | `animate` | `checkbox` | Fade in the opened tab | `true` | | ## Bloklar Toplamda en fazla 6 blok. ### Tab (`tab`, en fazla 6) | Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık | | --- | --- | --- | --- | --- | | `title` | `text` | Title | Details | | | `icon` | `select` | Icon | none | `none`, `info`, `leaf`, `droplet`, `ruler`, `truck`, `return`, `star` | | `source` | `select` | Content | text | `text`, `description`, `page`, `metafield` | | `content` | `richtext` | Text | `

Add details about the product, care or delivery here.

` | | | `page` | `page` | Page | – | | | `metafield` | `text` | Metafield | custom.care | | ## Kurulum ### Shopify yönetim panelinde 1. Canlı temanızda değil, bir kopyasında çalışın: Shopify yönetim panelinde **Online Mağaza > Temalar** sayfasına gidin, mevcut temanızın **…** menüsünü açın ve **Kopya oluştur**’u seçin. 2. Kopyada **…** menüsünü açın ve **Kodu düzenle**’yi seçin. 3. `sections` klasörüne `lib-product-tabs.liquid` adında yeni bir dosya ekleyin, aşağıdaki kaynak koddan `sections/lib-product-tabs.liquid` içeriğini yapıştırıp kaydedin. 4. Kopyada **Özelleştir**’i açın, **Bölüm ekle**’yi seçin ve **Lib · Product tabs** bölümünü ekleyin. Örnek içeriği kendi içeriğinizle değiştirin, renkleri ayarlayın. 5. Kopyayı önizleyin, her şey doğru göründüğünde yayınlayın. ### Shopify CLI ile Yerel tema klasörünüzde dosyaları indirin ve yalnızca bunları yayında olmayan bir temaya gönderin (temanın kimliğini `shopify theme list` gösterir): ```sh curl -fsSL -o sections/lib-product-tabs.liquid https://lintelagency.com/resources/shopify-sections/files/lib-product-tabs.liquid shopify theme push --theme --only sections/lib-product-tabs.liquid ``` Canlı temaya asla göndermeyin: her zaman yayında olmayan bir temanın kimliğini verin, `--live` ya da `--allow-live` kullanmayın. Ardından bölümü yukarıdaki gibi tema düzenleyicide ekleyin. ## Dosyalar - [sections/lib-product-tabs.liquid](https://lintelagency.com/resources/shopify-sections/files/lib-product-tabs.liquid): `sections/` klasörüne ## Sık sorulan sorular ### Bir sekmenin içeriği nereden gelebilir? Her sekme bloğu tek bir kaynak seçer: blokta girilen metin, ürün açıklaması, bir sayfanın içeriği ya da namespace.key biçiminde yazılmış bir ürün metafield’ı, örneğin custom.care. Tek satırlı ve çok satırlı metin metafield’ları satır sonları korunarak metin olarak yazdırılır; zengin metin gibi diğer türler Shopify’ın metafield_tag filtresiyle işlenir. ### Bir üründe bir sekme için içerik yoksa ne olur? O sekme o ürün için gösterilmez; örneğin metafield doldurulmamışsa ya da açıklama boşsa. Böylece müşteriler hiç boş sekme görmez. Tema düzenleyicide gösterecek bir şeyi olmayan bir metafield ya da sayfa sekmesi veya ürünü olmayan bir açıklama sekmesi, nedenini görebilmeniz için kısa bir not gösterir. ### Gizli sekme içeriği arama motorlarınca dizine eklenir mi? Tüm sekme içeriği sayfanın HTML’indedir. Sekmeler yalnızca hangi panelin gösterileceğini değiştirir; hiçbir şey sonradan JavaScript ile yüklenmez. ### Mobilde ve klavyeyle nasıl çalışır? 750px altında her sekme, yerel details ve summary öğeleriyle kurulmuş bir akordeon öğesine dönüşür. 750px’ten itibaren varsayılan düzen ARIA tab kalıbını izleyen bir sekme listesi gösterir: ok tuşları sekmeler arasında geçer ve başa döner, Home ve End ilk ve son sekmeye atlar. Her ekran boyutunda akordeon da seçebilirsiniz. ### JavaScript gerekir mi? Akordeon yalnızca tarayıcıyla açılıp kapanır. Masaüstünde sekme değiştirmek küçük bir script kullanır; script çalışmadan önce ilk sekme gösterilir, böylece düzen zıplamaz. ### Hangi ürünü kullanır? Bölüm ayarlarında bir ürün seçildiyse onu, seçilmediyse bulunduğu ürün sayfasının ürününü. İkisi de yoksa ürüne dayalı sekmeler gösterilmez; metin ve sayfa sekmeleri yine görünür. ## Kaynak kod ### sections/lib-product-tabs.liquid ```liquid {%- comment -%} MIT License · (c) 2026 Lintel · https://lintelagency.com/resources/shopify-sections {%- endcomment -%} {%- comment -%} Product tabs: up to 6 tabs of product information. Each tab shows text entered in the block, the product description, a page, or a product metafield. Tabs on desktop (ARIA tablist with arrow keys, Home and End), an accordion on mobile, or an accordion everywhere. Every tab's content is in the HTML; tabs only change which one is shown. Uses the product picked in the settings, or the product of the product template. Tabs whose source is empty for a product (no description, metafield not set) are left out. No snippets needed. {%- endcomment -%} {%- liquid assign s = section.settings assign p = s.product if p == blank assign p = product endif assign heading_tag = s.heading_tag | default: 'h2' assign uid = 'lib-ptabs-' | append: section.id assign list_label = s.heading | strip_html | strip if list_label == blank assign list_label = p.title | default: 'Product details' endif assign tabs_html = '' assign items_html = '' assign n = 0 -%} {%- for block in section.blocks -%} {%- liquid assign b = block.settings assign body = '' -%} {%- capture body -%} {%- case b.source -%} {%- when 'description' -%} {%- if p != blank -%} {{- p.description -}} {%- elsif request.design_mode -%}

The product description appears here. Pick a product in the section settings to preview it.

{%- endif -%} {%- when 'page' -%} {%- if b.page != blank -%} {{- b.page.content -}} {%- elsif request.design_mode -%}

Pick a page in this tab's settings to show its content here.

{%- endif -%} {%- when 'metafield' -%} {%- liquid assign mf = blank assign key_parts = b.metafield | strip | split: '.' if p != blank and key_parts.size == 2 assign mf_namespace = key_parts.first assign mf_key = key_parts.last assign mf = p.metafields[mf_namespace][mf_key] endif -%} {%- if mf != blank -%} {%- case mf.type -%} {%- when 'multi_line_text_field' -%}

{{ mf.value | escape | newline_to_br }}

{%- when 'single_line_text_field' -%}

{{ mf.value | escape }}

{%- else -%} {{- mf | metafield_tag -}} {%- endcase -%} {%- elsif request.design_mode -%}

The metafield {{ b.metafield | escape }} is empty or not set for this product.

{%- endif -%} {%- else -%} {{- b.content -}} {%- endcase -%} {%- endcapture -%} {%- liquid assign body_check = body | strip_html | strip assign has_media = false if body contains '