# Karşılaştırma tablosu: ücretsiz Shopify bölümü

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

Bu ücretsiz Shopify karşılaştırma tablosu bölümü, iki ila dört ürünü ya da paketi yan yana koyar. Her sütun bir ürün alabilir (görseli, adı, fiyatı ve bağlantısı üründen gelir) ya da kendi görselinizi, başlığınızı ve fiyat metninizi kullanabilir; her satırda bir özellik ve her sütun için bir değer vardır, evet, hayır ve tire simgeye dönüşür. Gerçek bir HTML tablosudur, küçük ekranlarda özellik sütunu sabit kalır, JavaScript gerektirmez ve Online Store 2.0 temalarında uygulama olmadan çalışır.

- **Kategori:** Ürün sayfası
- **Kullanıldığı yerler:** Ürün, Koleksiyon, Açılış sayfaları, Her sayfa
- **Okuduğu veri:** Ürünler (isteğe bağlı)
- **Boyut:** 2 dosyada 29 KB, JavaScript yok
- **Lisans:** MIT, © 2026 Lintel
- **Sayfa:** https://lintelagency.com/tr/kaynaklar/shopify-bolumleri/karsilastirma-tablosu
- **Canlı demo:** https://lintelagency.com/resources/shopify-sections/demo/lib-comparison-table.html
- **Eklenme tarihi:** 2026-11-02

## Ne işe yarar

- Bir koleksiyon ya da açılış sayfasında müşterinin ürün boyutları, paketler ya da setler arasında seçim yapmasına yardım etmek
- Abonelik ya da hizmet paketlerini kendi fiyat metninizle karşılaştırmak
- Bir ürün sayfasında premium sürümün standart sürüme ne eklediğini göstermek

## Tema düzenleyici ayarları

Bölüm tema düzenleyicide “Lib · Comparison table” 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 | Which set is right for you? |  |
| `heading_tag` | `select` | Heading tag | h2 | `h1`, `h2`, `h3`, `p` |
| `heading_size` | `select` | Heading size | medium | `small`, `medium`, `large`, `xlarge` |
| `text` | `richtext` | Text | – |  |

### Table

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `show_images` | `checkbox` | Show column images | `true` |  |
| `image_ratio` | `select` | Image shape | square | `square`, `portrait`, `landscape` |
| `show_prices` | `checkbox` | Show prices | `true` |  |
| `corner_label` | `text` | Feature column heading | – |  |
| `caption` | `text` | Table name (screen readers) | – |  |
| `scroll_label` | `text` | Table area name (screen readers) | Comparison table, scrolls sideways on small screens |  |
| `yes_label` | `text` | Yes icon text (screen readers) | Included |  |
| `no_label` | `text` | No icon text (screen readers) | Not included |  |
| `none_label` | `text` | Dash text (screen readers) | Not applicable |  |
| `from_label` | `text` | Price prefix when variants differ | From |  |
| `sale_label` | `text` | Sale price (screen readers) | Sale price |  |
| `regular_label` | `text` | Regular price (screen readers) | Regular price |  |

### Layout

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `section_width` | `select` | Width | page | `page`, `full` |
| `text_alignment` | `text_alignment` | Heading alignment on desktop | center |  |
| `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 | #F6F1EA |  |
| `color_bg_gradient` | `color_background` | Background gradient | – |  |
| `color_text` | `color` | Text | #231F1B |  |
| `color_accent` | `color` | Accent (solid button, group headings) | #7A5A3A |  |
| `color_accent_text` | `color` | Text on accent | #FFFFFF |  |
| `color_panel` | `color` | Table background | #FFFFFF |  |
| `color_line` | `color` | Lines | #E7E0D6 |  |
| `color_highlight` | `color` | Highlighted column | #7A5A3A |  |
| `color_highlight_text` | `color` | Highlight label text | #FFFFFF |  |
| `color_yes` | `color` | Yes icon | #3F6B45 |  |
| `color_no` | `color` | No icon | #9A3B2E |  |

### Spacing and visibility

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `padding_top` | `range` | Top padding on desktop | `88` | 0–200 px, step 4 |
| `padding_bottom` | `range` | Bottom padding on desktop | `88` | 0–200 px, step 4 |
| `padding_top_mobile` | `range` | Top padding on mobile | `48` | 0–160 px, step 4 |
| `padding_bottom_mobile` | `range` | Bottom padding on mobile | `56` | 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 rows in on scroll | `false` |  |

## Bloklar

Toplamda en fazla 40 blok.

### Column (`column`, en fazla 4)

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `product` | `product` | Product | – |  |
| `image` | `image_picker` | Image | – |  |
| `title` | `text` | Title | Product |  |
| `price_text` | `text` | Price text | – |  |
| `highlight` | `checkbox` | Highlight this column | `false` |  |
| `highlight_label` | `text` | Highlight label | – |  |
| `button_label` | `text` | Button label | View product |  |
| `button_url` | `url` | Button link | – |  |
| `button_style` | `select` | Button style | outline | `primary`, `outline`, `text` |
| `button_new_tab` | `checkbox` | Open link in a new tab | `false` |  |

### Row group heading (`group`)

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `title` | `text` | Heading | What's included |  |

### Row (`row`)

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `feature` | `text` | Feature | Feature |  |
| `note` | `text` | Note | – |  |
| `values` | `text` | Values | yes \| yes \| no |  |

## 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-comparison-table.liquid` adında yeni bir dosya ekleyin, aşağıdaki kaynak koddan `sections/lib-comparison-table.liquid` içeriğini yapıştırıp kaydedin.
4. `lib-button.liquid` dosyalarını da aynı şekilde `snippets` klasörüne ekleyin. Başka bir Lib bölümünden gelen aynı adlı bir snippet zaten varsa aynı dosyadır; tek kopya yeterli.
5. Kopyada **Özelleştir**’i açın, **Bölüm ekle**’yi seçin ve **Lib · Comparison table** bölümünü ekleyin. Örnek içeriği kendi içeriğinizle değiştirin, renkleri ayarlayın.
6. 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-comparison-table.liquid https://lintelagency.com/resources/shopify-sections/files/lib-comparison-table.liquid
curl -fsSL -o snippets/lib-button.liquid https://lintelagency.com/resources/shopify-sections/files/lib-button.liquid
shopify theme push --theme <unpublished-theme-id> --only sections/lib-comparison-table.liquid --only snippets/lib-button.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-comparison-table.liquid](https://lintelagency.com/resources/shopify-sections/files/lib-comparison-table.liquid): `sections/` klasörüne
- [snippets/lib-button.liquid](https://lintelagency.com/resources/shopify-sections/files/lib-button.liquid): `snippets/` klasörüne

## Sık sorulan sorular

### Satırları nasıl doldururum?

Her ürün ya da paket için bir Column bloğu, sonra her özellik için bir Row bloğu ekleyin. Bir satırda her sütun için bir değeri aynı sırayla, dikey çizgiyle (|) ayırarak yazın; örneğin "yes | yes | no" ya da "2 | 4 | 6". yes, no ve tire (-) onay, çarpı ve tire simgesine dönüşür; diğer her şey yazdığınız gibi görünür. Row group heading blokları tabloyu başlıklı gruplara ayırır.

### Fiyatları ürünlerimden okur mu?

Evet. Bir sütunda ürün seçin; bölüm ürünün öne çıkan görselini, adını ve fiyatını gösterir. Ürün indirimdeyse karşılaştırma fiyatı üstü çizili görünür, varyant fiyatları farklıysa fiyatın önüne "From" eklenir. Başka bir bağlantı girmezseniz düğme ürüne gider. Sütundaki fiyat metni ürün fiyatının yerini alır; paketler için kullanışlıdır.

### Mobilde nasıl çalışır?

Tablo satırlarını ve sütunlarını korur ve kendi alanı içinde yana kayar; bu alan ekran okuyucular için etiketlidir ve klavyeyle ulaşılabilir. Ürünler kayarken özellik sütunu solda sabit kalır, sayfanın kendisi ise hiç yana kaymaz.

### Erişilebilir mi?

Sütun ve satır başlıkları olan gerçek bir tablodur; ekran okuyucular her hücre için ürünü ve özelliği okur. Onay, çarpı ve tire simgelerinin sizin belirlediğiniz ekran okuyucu metinleri vardır (örneğin Dahil ve Dahil değil); indirimli ve normal fiyatlar da etiketlidir.

### Bir sütunu öne çıkarabilir miyim?

Evet. Highlight this column ayarını açın ve kendi etiketinizi ekleyin, örneğin "Bizim seçimimiz". Sütunun arka planı renklenir, etiket sütunun üstünde durur ve çerçeveli düğme dolu düğmeye dönüşür. Etiket sizin kendi sözlerinizdir; bölüm hiçbir zaman puan ya da popülerlik iddiası eklemez.

## Kaynak kod

### sections/lib-comparison-table.liquid

```liquid
{%- comment -%}
  MIT License · (c) 2026 Lintel · https://lintelagency.com/resources/shopify-sections
{%- endcomment -%}
{%- comment -%}
  Comparison table: two to four products or plans side by side. Column blocks take a product
  (image, title, price and link come from it) or a custom image, title and price; one column can
  be highlighted with the merchant's own label. Row blocks hold a feature and one value per column,
  separated by |: yes / no / dash values become icons with screen-reader text, anything else
  shows as typed. Group blocks add a heading row. A real <table>; on small screens it scrolls
  sideways inside its own region while the feature column stays put. No JavaScript.
  Depends on: snippets/lib-button.liquid
{%- endcomment -%}

{%- liquid
  assign s = section.settings
  assign heading_tag = s.heading_tag | default: 'h2'
  assign columns = section.blocks | where: 'type', 'column'
  assign column_count = columns.size
  assign eager = false
  if section.index <= 2
    assign eager = true
  endif
  assign yes_values = 'yes,y,true,✓,✔' | split: ','
  assign no_values = 'no,n,false,✗,✕,×,x' | split: ','
  assign dash_values = '-,–,—,n/a' | split: ','
  assign caption = s.caption | default: s.heading | strip_html | strip
-%}

<div
  class="lib-compare lib-compare--{{ s.section_width }}"
  {% if s.anchor_id != blank %}
    id="{{ s.anchor_id | handleize }}"
  {% endif %}
  data-show="{{ s.show_on }}"
  data-columns="{{ column_count }}"
  {% if s.animate %}
    data-animate
  {% endif %}
  style="
    --lib-bg: {{ s.color_bg }};
    {% if s.color_bg_gradient != blank %}--lib-bg-image: {{ s.color_bg_gradient }};{% endif %}
    --lib-text: {{ s.color_text }};
    --lib-accent: {{ s.color_accent }};
    --lib-accent-text: {{ s.color_accent_text }};
    --lib-panel: {{ s.color_panel }};
    --lib-line: {{ s.color_line }};
    --lib-hl: {{ s.color_highlight }};
    --lib-hl-text: {{ s.color_highlight_text }};
    --lib-yes: {{ s.color_yes }};
    --lib-no: {{ s.color_no }};
    --lib-pt: {{ s.padding_top }}px;
    --lib-pb: {{ s.padding_bottom }}px;
    --lib-pt-m: {{ s.padding_top_mobile }}px;
    --lib-pb-m: {{ s.padding_bottom_mobile }}px;
  "
>
  <div class="lib-compare__inner">
    {%- if s.heading != blank or s.text != blank -%}
      <div class="lib-compare__header" data-align="{{ s.text_alignment }}" data-align-m="{{ s.text_alignment_mobile }}">
        {%- if s.heading != blank -%}
          <{{ heading_tag }} class="lib-compare__heading lib-compare__heading--{{ s.heading_size }}">
            {{- s.heading -}}
          </{{ heading_tag }}>
        {%- endif -%}
        {%- if s.text != blank -%}
          <div class="lib-compare__text">{{ s.text }}</div>
        {%- endif -%}
      </div>
    {%- endif -%}

    {%- if column_count > 0 -%}
      <div class="lib-compare__scroll" role="region" tabindex="0" aria-label="{{ s.scroll_label | escape }}">
        <table class="lib-compare__table">
          {%- if caption != blank -%}
            <caption class="lib-compare__sr">{{ caption | escape }}</caption>
          {%- endif -%}
          <thead>
            <tr>
              <td class="lib-compare__corner">
                {%- if s.corner_label != blank -%}<span class="lib-compare__corner-label">{{ s.corner_label | escape }}</span>{%- endif -%}
              </td>
              {%- for column in columns -%}
                {%- liquid
                  assign c = column.settings
                  assign p = c.product
                  assign title = c.title
                  if title == blank and p != blank
                    assign title = p.title
                  endif
                  assign image = c.image
                  if image == blank and p != blank
                    assign image = p.featured_image
                  endif
                  assign url = c.button_url
                  if url == blank and p != blank
                    assign url = p.url
                  endif
                -%}
                <th scope="col" class="lib-compare__col" {% if c.highlight %}data-highlight{% endif %} {{ column.shopify_attributes }}>
                  <div class="lib-compare__col-inner">
                    {%- if c.highlight and c.highlight_label != blank -%}
                      <span class="lib-compare__badge">{{ c.highlight_label | escape }}</span>
                    {%- endif -%}
                    {%- if s.show_images and image != blank -%}
                      <div class="lib-compare__media" data-ratio="{{ s.image_ratio }}">
                        {%- assign img_loading = 'lazy' -%}
                        {%- if eager -%}{%- assign img_loading = 'eager' -%}{%- endif -%}
                        {{ image | image_url: width: 600 | image_tag: class: 'lib-compare__img', loading: img_loading, sizes: '(min-width: 990px) 240px, 45vw', widths: '240, 360, 480, 600', alt: '' }}
                      </div>
                    {%- endif -%}
                    <span class="lib-compare__title">{{ title | escape }}</span>
                    {%- if s.show_prices -%}
                      {%- if c.price_text != blank -%}
                        <span class="lib-compare__price">{{ c.price_text | escape }}</span>
                      {%- elsif p != blank -%}
                        <span class="lib-compare__price">
                          {%- if p.price_varies -%}{{ s.from_label | escape }} {% endif -%}
                          {%- if p.compare_at_price > p.price -%}
                            <span class="lib-compare__sr">{{ s.sale_label | escape }}</span>
                            {{- p.price | money -}}
                            <span class="lib-compare__sr">{{ s.regular_label | escape }}</span>
                            <s class="lib-compare__was">{{ p.compare_at_price | money }}</s>
                          {%- else -%}
                            {{- p.price | money -}}
                          {%- endif -%}
                        </span>
                      {%- endif -%}
                    {%- endif -%}
                    {%- if c.button_label != blank -%}
                      <span class="lib-compare__cta">
                        {%- assign btn_style = c.button_style -%}
                        {%- if c.highlight and btn_style == 'outline' -%}{%- assign btn_style = 'primary' -%}{%- endif -%}
                        {%- render 'lib-button', label: c.button_label, url: url, style: btn_style, new_tab: c.button_new_tab, arrow: false -%}
                      </span>
                    {%- endif -%}
                  </div>
                </th>
              {%- endfor -%}
            </tr>
          </thead>
          <tbody>
            {%- for block in section.blocks -%}
              {%- assign b = block.settings -%}
              {%- case block.type -%}
                {%- when 'group' -%}
                  {%- if b.title != blank -%}
                    <tr class="lib-compare__group" {{ block.shopify_attributes }}>
                      <th scope="colgroup" colspan="{{ column_count | plus: 1 }}">{{ b.title | escape }}</th>
                    </tr>
                  {%- endif -%}
                {%- when 'row' -%}
                  {%- assign values = b.values | split: '|' -%}
                  <tr class="lib-compare__row" {{ block.shopify_attributes }}>
                    <th scope="row" class="lib-compare__feature">
                      <span class="lib-compare__feature-label">{{ b.feature | escape }}</span>
                      {%- if b.note != blank -%}
                        <span class="lib-compare__note">{{ b.note | escape }}</span>
                      {%- endif -%}
                    </th>
                    {%- for column in columns -%}
                      {%- assign i = forloop.index0 -%}
                      {%- assign raw = values[i] | strip -%}
                      {%- assign key = raw | downcase -%}
                      <td {% if column.settings.highlight %}data-highlight{% endif %}>
                        {%- if yes_values contains key -%}
                          <span class="lib-compare__mark lib-compare__mark--yes">
                            <svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><path d="m5 10.5 3.2 3L15 6.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                            <span class="lib-compare__sr">{{ s.yes_label | escape }}</span>
                          </span>
                        {%- elsif no_values contains key -%}
                          <span class="lib-compare__mark lib-compare__mark--no">
                            <svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><path d="m6.5 6.5 7 7M13.5 6.5l-7 7" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
                            <span class="lib-compare__sr">{{ s.no_label | escape }}</span>
                          </span>
                        {%- elsif dash_values contains key or raw == blank -%}
                          <span class="lib-compare__mark lib-compare__mark--none">
                            <span aria-hidden="true">–</span>
                            <span class="lib-compare__sr">{{ s.none_label | escape }}</span>
                          </span>
                        {%- else -%}
                          {{ raw | escape }}
                        {%- endif -%}
                      </td>
                    {%- endfor -%}
                  </tr>
              {%- endcase -%}
            {%- endfor -%}
          </tbody>
        </table>
      </div>
    {%- endif -%}
  </div>
</div>

{% stylesheet %}
  .lib-compare {
    background-color: var(--lib-bg);
    background-image: var(--lib-bg-image, none);
    color: var(--lib-text);
    padding: var(--lib-pt) 1rem var(--lib-pb);
  }
  .lib-compare__inner { max-width: 1200px; margin: 0 auto; }
  .lib-compare--full { padding-inline: clamp(1rem, 3vw, 2.5rem); }
  .lib-compare--full .lib-compare__inner { max-width: none; }
  @media (max-width: 749px) {
    .lib-compare { padding-top: var(--lib-pt-m); padding-bottom: var(--lib-pb-m); }
    .lib-compare[data-show='desktop'] { display: none; }
  }
  @media (min-width: 750px) {
    .lib-compare[data-show='mobile'] { display: none; }
  }

  .lib-compare__header { max-width: 44rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
  .lib-compare__header[data-align='center'] { margin-inline: auto; text-align: center; }
  .lib-compare__header[data-align='right'] { margin-inline-start: auto; text-align: right; }
  @media (max-width: 749px) {
    .lib-compare__header[data-align-m='left'] { margin-inline: 0 auto; text-align: left; }
    .lib-compare__header[data-align-m='center'] { margin-inline: auto; text-align: center; }
    .lib-compare__header[data-align-m='right'] { margin-inline: auto 0; text-align: right; }
  }
  .lib-compare__heading {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }
  .lib-compare__heading--small { font-size: clamp(1.5rem, 2.5vw, 2rem); }
  .lib-compare__heading--medium { font-size: clamp(1.75rem, 3vw, 2.5rem); }
  .lib-compare__heading--xlarge { font-size: clamp(2.5rem, 6vw, 4.5rem); }
  .lib-compare__text { margin-top: 1rem; font-size: 1.0625rem; line-height: 1.65; opacity: 0.85; }
  .lib-compare__text > :first-child { margin-top: 0; }
  .lib-compare__text > :last-child { margin-bottom: 0; }

  /* Table: scrolls inside its region; the feature column stays visible while it does. */
  /* Positioned so the screen-reader-only labels inside are clipped by the scroll area, not the page. */
  .lib-compare__scroll {
    position: relative;
    max-width: 100%;
    overflow-x: auto;
    border-radius: 16px;
    background: var(--lib-panel);
    border: 1px solid var(--lib-line);
  }
  .lib-compare__scroll:focus-visible { outline: 2px solid var(--lib-accent); outline-offset: 3px; }
  .lib-compare__table {
    width: 100%;
    min-width: calc(11rem + var(--lib-col-min) * var(--lib-cols, 3));
    --lib-col-min: 10rem;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    font-size: 0.9375rem;
  }
  .lib-compare[data-columns='2'] .lib-compare__table { --lib-cols: 2; }
  .lib-compare[data-columns='4'] .lib-compare__table { --lib-cols: 4; }
  .lib-compare__table th,
  .lib-compare__table td {
    padding: 0.95rem 1rem;
    border-bottom: 1px solid var(--lib-line);
    text-align: center;
    vertical-align: middle;
  }
  .lib-compare__table tbody tr:last-child > * { border-bottom: 0; }
  .lib-compare__table tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 11rem;
    text-align: left;
    background: var(--lib-panel);
  }
  @media (min-width: 990px) {
    .lib-compare__table tr > :first-child { width: 28%; }
  }
  /* Narrow screens: a slimmer feature column so more than one product shows before scrolling. */
  @media (max-width: 749px) {
    .lib-compare__table { --lib-col-min: 8rem; min-width: calc(8.5rem + var(--lib-col-min) * var(--lib-cols, 3)); font-size: 0.875rem; }
    .lib-compare__table th,
    .lib-compare__table td { padding: 0.8rem 0.65rem; }
    .lib-compare__table tr > :first-child { width: 8.5rem; }
    .lib-compare__media { max-width: 6.5rem; }
    .lib-compare__title { font-size: 0.9375rem; }
  }
  .lib-compare__table [data-highlight] { background: color-mix(in srgb, var(--lib-hl) 9%, var(--lib-panel)); }

  .lib-compare__table .lib-compare__corner { vertical-align: bottom; }
  .lib-compare__corner-label { font-size: 0.8125rem; font-weight: 600; opacity: 0.7; }
  .lib-compare__table .lib-compare__col { position: relative; vertical-align: top; padding-top: 3rem; font-weight: 400; }
  .lib-compare__col-inner { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
  .lib-compare__badge {
    position: absolute;
    top: 0.9rem;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: var(--lib-hl);
    color: var(--lib-hl-text);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  .lib-compare__media {
    width: 100%;
    max-width: 10rem;
    border-radius: 10px;
    overflow: hidden;
    background: color-mix(in srgb, var(--lib-text) 5%, transparent);
    aspect-ratio: 1;
  }
  .lib-compare__media[data-ratio='portrait'] { aspect-ratio: 4 / 5; }
  .lib-compare__media[data-ratio='landscape'] { aspect-ratio: 4 / 3; }
  .lib-compare__img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .lib-compare__title { font-size: 1rem; font-weight: 600; line-height: 1.3; text-wrap: balance; }
  .lib-compare__price { font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
  .lib-compare__was { margin-inline-start: 0.35em; opacity: 0.6; }
  .lib-compare__cta { margin-top: 0.25rem; }
  .lib-compare__cta .lib-btn { font-size: 0.875rem; padding: 0.75em 1.2em; }

  .lib-compare__feature { font-weight: 500; }
  .lib-compare__feature-label { display: block; }
  .lib-compare__note { display: block; margin-top: 0.2rem; font-size: 0.8125rem; font-weight: 400; opacity: 0.7; }
  .lib-compare__group th {
    padding-top: 1.4rem;
    background: var(--lib-panel);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lib-accent);
    text-align: left;
  }
  .lib-compare__mark { display: inline-grid; place-items: center; }
  .lib-compare__mark--yes {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--lib-yes) 14%, transparent);
    color: var(--lib-yes);
  }
  .lib-compare__mark--no { color: var(--lib-no); }
  .lib-compare__mark--none { opacity: 0.55; }
  .lib-compare__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* Motion: rows fade in as the table scrolls into view (scroll-driven animations only). */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .lib-compare[data-animate] .lib-compare__table tbody tr {
        animation: lib-compare-in linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 70%;
      }
    }
  }
  @keyframes lib-compare-in {
    from { opacity: 0; transform: translateY(10px); }
  }
{% endstylesheet %}

{% schema %}
{
  "name": "Lib · Comparison table",
  "tag": "section",
  "class": "lib-section",
  "max_blocks": 40,
  "settings": [
    { "type": "header", "content": "Content" },
    { "type": "inline_richtext", "id": "heading", "label": "Heading", "default": "Which set is right for you?" },
    {
      "type": "select",
      "id": "heading_tag",
      "label": "Heading tag",
      "info": "Use H1 only when this is the page's main heading.",
      "options": [
        { "value": "h1", "label": "H1" },
        { "value": "h2", "label": "H2" },
        { "value": "h3", "label": "H3" },
        { "value": "p", "label": "Paragraph" }
      ],
      "default": "h2"
    },
    {
      "type": "select",
      "id": "heading_size",
      "label": "Heading size",
      "options": [
        { "value": "small", "label": "Small" },
        { "value": "medium", "label": "Medium" },
        { "value": "large", "label": "Large" },
        { "value": "xlarge", "label": "Extra large" }
      ],
      "default": "medium"
    },
    { "type": "richtext", "id": "text", "label": "Text" },

    { "type": "header", "content": "Table" },
    { "type": "paragraph", "content": "Add 2 to 4 Column blocks, then Row blocks. Type one value per column in a row, separated by |. yes, no and - become icons." },
    { "type": "checkbox", "id": "show_images", "label": "Show column images", "default": true },
    {
      "type": "select",
      "id": "image_ratio",
      "label": "Image shape",
      "options": [
        { "value": "square", "label": "Square" },
        { "value": "portrait", "label": "Portrait" },
        { "value": "landscape", "label": "Landscape" }
      ],
      "default": "square"
    },
    { "type": "checkbox", "id": "show_prices", "label": "Show prices", "default": true },
    { "type": "text", "id": "corner_label", "label": "Feature column heading", "info": "Optional. Shown above the feature names." },
    { "type": "text", "id": "caption", "label": "Table name (screen readers)", "info": "The heading is used when this is empty." },
    { "type": "text", "id": "scroll_label", "label": "Table area name (screen readers)", "default": "Comparison table, scrolls sideways on small screens" },
    { "type": "text", "id": "yes_label", "label": "Yes icon text (screen readers)", "default": "Included" },
    { "type": "text", "id": "no_label", "label": "No icon text (screen readers)", "default": "Not included" },
    { "type": "text", "id": "none_label", "label": "Dash text (screen readers)", "default": "Not applicable" },
    { "type": "text", "id": "from_label", "label": "Price prefix when variants differ", "default": "From" },
    { "type": "text", "id": "sale_label", "label": "Sale price (screen readers)", "default": "Sale price" },
    { "type": "text", "id": "regular_label", "label": "Regular price (screen readers)", "default": "Regular price" },

    { "type": "header", "content": "Layout" },
    {
      "type": "select",
      "id": "section_width",
      "label": "Width",
      "options": [
        { "value": "page", "label": "Page width" },
        { "value": "full", "label": "Full width" }
      ],
      "default": "page"
    },
    { "type": "text_alignment", "id": "text_alignment", "label": "Heading alignment on desktop", "default": "center" },
    {
      "type": "select",
      "id": "text_alignment_mobile",
      "label": "Heading alignment on mobile",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "left"
    },

    { "type": "header", "content": "Colors" },
    { "type": "color", "id": "color_bg", "label": "Background", "default": "#F6F1EA" },
    { "type": "color_background", "id": "color_bg_gradient", "label": "Background gradient", "info": "Optional. Covers the background color." },
    { "type": "color", "id": "color_text", "label": "Text", "default": "#231F1B" },
    { "type": "color", "id": "color_accent", "label": "Accent (solid button, group headings)", "default": "#7A5A3A" },
    { "type": "color", "id": "color_accent_text", "label": "Text on accent", "default": "#FFFFFF" },
    { "type": "color", "id": "color_panel", "label": "Table background", "default": "#FFFFFF" },
    { "type": "color", "id": "color_line", "label": "Lines", "default": "#E7E0D6" },
    { "type": "color", "id": "color_highlight", "label": "Highlighted column", "default": "#7A5A3A" },
    { "type": "color", "id": "color_highlight_text", "label": "Highlight label text", "default": "#FFFFFF" },
    { "type": "color", "id": "color_yes", "label": "Yes icon", "default": "#3F6B45" },
    { "type": "color", "id": "color_no", "label": "No icon", "default": "#9A3B2E" },

    { "type": "header", "content": "Spacing and visibility" },
    { "type": "range", "id": "padding_top", "label": "Top padding on desktop", "min": 0, "max": 200, "step": 4, "unit": "px", "default": 88 },
    { "type": "range", "id": "padding_bottom", "label": "Bottom padding on desktop", "min": 0, "max": 200, "step": 4, "unit": "px", "default": 88 },
    { "type": "range", "id": "padding_top_mobile", "label": "Top padding on mobile", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 48 },
    { "type": "range", "id": "padding_bottom_mobile", "label": "Bottom padding on mobile", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 56 },
    {
      "type": "select",
      "id": "show_on",
      "label": "Show on",
      "options": [
        { "value": "all", "label": "All devices" },
        { "value": "desktop", "label": "Desktop only" },
        { "value": "mobile", "label": "Mobile only" }
      ],
      "default": "all"
    },
    { "type": "text", "id": "anchor_id", "label": "Anchor ID", "info": "Optional. Link to this section with #your-id." },

    { "type": "header", "content": "Motion" },
    { "type": "checkbox", "id": "animate", "label": "Fade rows in on scroll", "info": "Only in browsers that support scroll-driven animations; never when reduced motion is on.", "default": false }
  ],
  "blocks": [
    {
      "type": "column",
      "name": "Column",
      "limit": 4,
      "settings": [
        { "type": "product", "id": "product", "label": "Product", "info": "Optional. Supplies the image, title, price and link." },
        { "type": "image_picker", "id": "image", "label": "Image", "info": "Replaces the product image." },
        { "type": "text", "id": "title", "label": "Title", "info": "Replaces the product title.", "default": "Product" },
        { "type": "text", "id": "price_text", "label": "Price text", "info": "Optional. Replaces the product price, e.g. for a plan." },
        { "type": "checkbox", "id": "highlight", "label": "Highlight this column", "default": false },
        { "type": "text", "id": "highlight_label", "label": "Highlight label", "info": "Your own words, e.g. Our pick.", "visible_if": "{{ block.settings.highlight }}" },
        { "type": "text", "id": "button_label", "label": "Button label", "default": "View product" },
        { "type": "url", "id": "button_url", "label": "Button link", "info": "The product page is used when this is empty." },
        {
          "type": "select",
          "id": "button_style",
          "label": "Button style",
          "options": [
            { "value": "primary", "label": "Solid" },
            { "value": "outline", "label": "Outline" },
            { "value": "text", "label": "Text link" }
          ],
          "default": "outline"
        },
        { "type": "checkbox", "id": "button_new_tab", "label": "Open link in a new tab", "default": false }
      ]
    },
    {
      "type": "group",
      "name": "Row group heading",
      "settings": [
        { "type": "text", "id": "title", "label": "Heading", "default": "What's included" }
      ]
    },
    {
      "type": "row",
      "name": "Row",
      "settings": [
        { "type": "text", "id": "feature", "label": "Feature", "default": "Feature" },
        { "type": "text", "id": "note", "label": "Note", "info": "Optional short line under the feature." },
        { "type": "text", "id": "values", "label": "Values", "info": "One per column, separated by |. yes, no and - become icons; anything else shows as typed.", "default": "yes | yes | no" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Lib · Comparison table",
      "blocks": [
        { "type": "column", "settings": { "title": "Essentials" } },
        { "type": "column", "settings": { "title": "Everyday", "highlight": true, "highlight_label": "Our pick" } },
        { "type": "column", "settings": { "title": "Hosting" } },
        { "type": "row", "settings": { "feature": "Place settings", "values": "2 | 4 | 6" } },
        { "type": "row", "settings": { "feature": "Dinner plates", "values": "yes | yes | yes" } },
        { "type": "row", "settings": { "feature": "Serving bowl", "values": "no | yes | yes" } },
        { "type": "row", "settings": { "feature": "Dishwasher safe", "values": "yes | yes | yes" } }
      ]
    }
  ]
}
{% endschema %}
```

### snippets/lib-button.liquid

```liquid
{%- comment -%}
  MIT License · (c) 2026 Lintel · https://lintelagency.com/resources/shopify-sections
{%- endcomment -%}
{% doc %}
  Animated call-to-action link. Light sweep on hover, arrow slides right.
  Colors come from the parent section's --lib-accent / --lib-accent-text / --lib-text vars.
  Inspired by Uiverse.io button patterns; rewritten for themes, no dependencies.

  @param {string} label - Button text
  @param {string} [url] - Link target; renders a disabled-looking span when blank
  @param {string} [style] - 'primary' (default), 'outline' or 'text'
  @param {boolean} [new_tab] - Open the link in a new tab
  @param {boolean} [arrow] - Show the trailing arrow (default true)

  @example
  {% render 'lib-button', label: section.settings.button_label, url: section.settings.button_url, style: 'outline' %}
{% enddoc %}

{%- liquid
  assign btn_style = style | default: 'primary'
  assign show_arrow = true
  if arrow == false
    assign show_arrow = false
  endif
-%}

{%- unless label == blank -%}
{%- capture inner -%}
  <span class="lib-btn__label">{{ label | escape }}</span>
  {%- if show_arrow -%}
    <svg class="lib-btn__arrow" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" focusable="false">
      <path d="M3 8h9M8.5 4.5 12 8l-3.5 3.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  {%- endif -%}
{%- endcapture -%}

{%- if url != blank -%}
  <a
    class="lib-btn lib-btn--{{ btn_style }}"
    href="{{ url }}"
    {% if new_tab %}
      target="_blank" rel="noopener"
    {% endif %}
  >
    {{- inner -}}
  </a>
{%- else -%}
  <span class="lib-btn lib-btn--{{ btn_style }}" aria-disabled="true">{{ inner }}</span>
{%- endif -%}
{%- endunless -%}

{% stylesheet %}
  .lib-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.85em 1.5em;
    border-radius: var(--lib-radius, 999px);
    font: inherit;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  }
  .lib-btn--primary {
    background: var(--lib-accent, #111);
    color: var(--lib-accent-text, #fff);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
  }
  .lib-btn--outline {
    background: transparent;
    color: var(--lib-text, #111);
    box-shadow: inset 0 0 0 1.5px currentColor;
  }
  .lib-btn--text {
    padding-inline: 0;
    background: none;
    color: var(--lib-text, #111);
    text-decoration: underline;
    text-underline-offset: 0.3em;
    overflow: visible;
  }
  .lib-btn--text::before { display: none; }
  .lib-btn--text:hover { transform: none; box-shadow: none; }
  .lib-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.35) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.6s ease;
  }
  .lib-btn--outline::before {
    background: linear-gradient(110deg, transparent 30%, rgb(127 127 127 / 0.18) 50%, transparent 70%);
  }
  .lib-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -8px rgb(0 0 0 / 0.35);
  }
  .lib-btn:hover::before { transform: translateX(120%); }
  .lib-btn__arrow { transition: transform 0.2s ease; }
  .lib-btn:hover .lib-btn__arrow { transform: translateX(3px); }
  .lib-btn:focus-visible {
    outline: 2px solid var(--lib-accent, #111);
    outline-offset: 3px;
  }
  .lib-btn[aria-disabled='true'] { pointer-events: none; }
  @media (prefers-reduced-motion: reduce) {
    .lib-btn, .lib-btn::before, .lib-btn__arrow { transition: none; }
    .lib-btn:hover { transform: none; }
  }
{% endstylesheet %}
```

## Lisans

MIT Lisansı, © 2026 Lintel. Kendi mağazanızda ya da müşteri işlerinde ücretsiz kullanabilir, değiştirebilir ve yayınlayabilirsiniz; her dosyanın başındaki lisans satırını koruyun.