# Özellik kartları: ücretsiz Shopify bölümü

> İkon, başlık ve metinli iki ile dört sütun kart. Masaüstünde imleci yumuşak bir ışıltı izler; dokunmatik ekranlarda kartlar ışıltısız görünür.

Özellik kartları, değer önerileri için ücretsiz bir Shopify bölümüdür: her birinde bir ikon ya da simge, başlık, metin ve isteğe bağlı bağlantı olan iki ile dört sütun kart. Masaüstünde isteğe bağlı bir ışıltı imleci izler; dokunmatik ekranlarda kartlar ışıltısız görünür.

- **Kategori:** İçerik ve hikâye anlatımı
- **Kullanıldığı yerler:** Ana sayfa, Ürün, Her sayfa
- **Okuduğu veri:** Yalnızca içerik
- **Boyut:** 1 dosyada 14 KB, küçük bir betikle
- **Lisans:** MIT, © 2026 Lintel
- **Sayfa:** https://lintelagency.com/tr/kaynaklar/shopify-bolumleri/ozellik-kartlari
- **Canlı demo:** https://lintelagency.com/resources/shopify-sections/demo/lib-feature-cards.html
- **Eklenme tarihi:** 2026-10-02

## Ne işe yarar

- Ana sayfada satın alma nedenleri: kargo, iade, malzeme, garantiler
- Ürün sayfasında satın alma alanının altında faydalar
- Neyin dahil olduğunu listeleyen hizmet, toptan satış ya da B2B sayfaları

## Tema düzenleyici ayarları

Bölüm tema düzenleyicide “Lib · Feature cards” 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 | Why customers come back |  |
| `heading_tag` | `select` | Heading tag | h2 | `h1`, `h2`, `h3`, `p` |
| `heading_size` | `select` | Heading size | medium | `small`, `medium`, `large` |
| `text` | `richtext` | Intro | `<p>Three or four short reasons, each backed by something real.</p>` |  |

### Layout

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `columns` | `range` | Columns on desktop | `3` | 2–4, step 1 |
| `columns_mobile` | `select` | Columns on mobile | 1 | `1`, `2` |
| `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` |
| `card_alignment` | `select` | Card content alignment | left | `left`, `center` |
| `card_radius` | `range` | Card corner radius | `16` | 0–32 px, step 2 |

### Colors

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `color_bg` | `color` | Background | #0C0A09 |  |
| `color_bg_gradient` | `color_background` | Background gradient | – |  |
| `color_card` | `color` | Card | #1C1917 |  |
| `color_text` | `color` | Text | #FAFAF9 |  |
| `color_accent` | `color` | Accent and glow | #F59E0B |  |

### Spacing and visibility

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `padding_top` | `range` | Top padding on desktop | `96` | 0–200 px, step 4 |
| `padding_bottom` | `range` | Bottom padding on desktop | `96` | 0–200 px, step 4 |
| `padding_top_mobile` | `range` | Top padding on mobile | `56` | 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 |
| --- | --- | --- | --- | --- |
| `glow` | `checkbox` | Glow follows the pointer on desktop | `true` |  |

## Bloklar

Toplamda en fazla 8 blok.

### Card (`card`)

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `icon` | `image_picker` | Icon image | – |  |
| `emoji` | `text` | Or a symbol / emoji | ✦ |  |
| `title` | `text` | Title | Card title |  |
| `text` | `richtext` | Text | `<p>One or two sentences.</p>` |  |
| `link` | `url` | Link | – |  |
| `link_label` | `text` | Link label | – |  |
| `new_tab` | `checkbox` | Open link in a new tab | `false` |  |

## 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-feature-cards.liquid` adında yeni bir dosya ekleyin, aşağıdaki kaynak koddan `sections/lib-feature-cards.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 · Feature cards** 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-feature-cards.liquid https://lintelagency.com/resources/shopify-sections/files/lib-feature-cards.liquid
shopify theme push --theme <unpublished-theme-id> --only sections/lib-feature-cards.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-feature-cards.liquid](https://lintelagency.com/resources/shopify-sections/files/lib-feature-cards.liquid): `sections/` klasörüne

## Sık sorulan sorular

### Kaç kart ekleyebilirim?

En fazla sekiz kart bloğu. Masaüstünde iki ile dört, mobilde bir ya da iki sütun seçin.

### Işıltı efekti JavaScript gerektirir mi?

Yaklaşık 1 KB’lık küçük bir custom element ışıltıyı hareket ettirir. Dokunmatik ekranlarda ya da ışıltı ayarı kapalıyken çalışmaz; kartlar onsuz da çalışır.

### Bir kart bir sayfaya bağlanabilir mi?

Evet. Bir bağlantı ekleyin; kartın tamamı tıklanabilir olur, altta isteğe bağlı bir etiket ve yeni sekmede açma seçeneğiyle.

## Kaynak kod

### sections/lib-feature-cards.liquid

```liquid
{%- comment -%}
  MIT License · (c) 2026 Lintel · https://lintelagency.com/resources/shopify-sections
{%- endcomment -%}
{%- comment -%}
  Feature / value-prop cards with an optional glow that follows the pointer.
  Effect adapted from Uiverse.io "spotlight card" patterns; rewritten in plain CSS + a tiny custom element.
  Without JS the cards still render, just without the moving glow.
{%- endcomment -%}

{%- liquid
  assign s = section.settings
  assign heading_tag = s.heading_tag | default: 'h2'
  assign card_tag = 'h3'
  if heading_tag == 'h3' or heading_tag == 'p'
    assign card_tag = 'h4'
  endif
-%}

<div
  class="lib-cards lib-cards--{{ s.section_width }}"
  {% if s.anchor_id != blank %}
    id="{{ s.anchor_id | handleize }}"
  {% endif %}
  data-show="{{ s.show_on }}"
  data-card-align="{{ s.card_alignment }}"
  {% if s.glow %}
    data-glow
  {% endif %}
  style="
    --lib-bg: {{ s.color_bg }};
    {% if s.color_bg_gradient != blank %}--lib-bg-image: {{ s.color_bg_gradient }};{% endif %}
    --lib-card: {{ s.color_card }};
    --lib-text: {{ s.color_text }};
    --lib-accent: {{ s.color_accent }};
    --lib-cols: {{ s.columns }};
    --lib-cols-m: {{ s.columns_mobile }};
    --lib-radius: {{ s.card_radius }}px;
    --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-cards__inner">
    {%- if s.heading != blank or s.text != blank -%}
      <header class="lib-cards__header" data-align="{{ s.text_alignment }}" data-align-m="{{ s.text_alignment_mobile }}">
        {%- if s.heading != blank -%}
          <{{ heading_tag }} class="lib-cards__heading lib-cards__heading--{{ s.heading_size }}">
            {{- s.heading -}}
          </{{ heading_tag }}>
        {%- endif -%}
        {%- if s.text != blank -%}
          <div class="lib-cards__intro">{{ s.text }}</div>
        {%- endif -%}
      </header>
    {%- endif -%}

    <lib-spotlight class="lib-cards__grid">
      {%- for block in section.blocks -%}
        {%- liquid
          assign b = block.settings
          assign tag = 'div'
          if b.link != blank
            assign tag = 'a'
          endif
        -%}
        <{{ tag }}
          class="lib-card"
          {% if tag == 'a' %}
            href="{{ b.link }}"
            {% if b.new_tab %}
              target="_blank" rel="noopener"
            {% endif %}
          {% endif %}
          {{ block.shopify_attributes }}
        >
          {%- if b.icon != blank -%}
            {{ b.icon | image_url: width: 192 | image_tag: class: 'lib-card__icon', loading: 'lazy', alt: '' }}
          {%- elsif b.emoji != blank -%}
            <span class="lib-card__icon lib-card__icon--glyph" aria-hidden="true">{{ b.emoji | escape }}</span>
          {%- endif -%}
          <{{ card_tag }} class="lib-card__title">{{ b.title | escape }}</{{ card_tag }}>
          {%- if b.text != blank -%}
            <div class="lib-card__text">{{ b.text }}</div>
          {%- endif -%}
          {%- if tag == 'a' and b.link_label != blank -%}
            <span class="lib-card__more">{{ b.link_label | escape }} <span aria-hidden="true">→</span></span>
          {%- endif -%}
        </{{ tag }}>
      {%- endfor -%}
    </lib-spotlight>
  </div>
</div>

{% stylesheet %}
  .lib-cards {
    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-cards__inner { max-width: 1200px; margin: 0 auto; }
  .lib-cards--full .lib-cards__inner { max-width: none; }
  @media (max-width: 749px) {
    .lib-cards { padding-top: var(--lib-pt-m); padding-bottom: var(--lib-pb-m); }
    .lib-cards[data-show='desktop'] { display: none; }
  }
  @media (min-width: 750px) {
    .lib-cards[data-show='mobile'] { display: none; }
  }

  .lib-cards__header { max-width: 40rem; margin: 0 auto 3rem; text-align: center; }
  .lib-cards__header[data-align='left'] { margin-left: 0; text-align: left; }
  .lib-cards__header[data-align='right'] { margin-right: 0; text-align: right; }
  @media (max-width: 749px) {
    .lib-cards__header[data-align-m='left'] { margin-left: 0; margin-right: auto; text-align: left; }
    .lib-cards__header[data-align-m='center'] { margin-inline: auto; text-align: center; }
    .lib-cards__header[data-align-m='right'] { margin-right: 0; margin-left: auto; text-align: right; }
  }
  .lib-cards__heading {
    margin: 0;
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  .lib-cards__heading--small { font-size: clamp(1.4rem, 2.5vw, 2rem); }
  .lib-cards__heading--large { font-size: clamp(2rem, 4.5vw, 3.5rem); }
  .lib-cards__intro { margin-top: 1rem; font-size: 1.05rem; line-height: 1.6; opacity: 0.7; }
  .lib-cards__intro > * { margin: 0; }

  .lib-cards__grid { display: grid; gap: 1rem; grid-template-columns: repeat(var(--lib-cols-m), minmax(0, 1fr)); }
  @media (min-width: 750px) {
    .lib-cards__grid { grid-template-columns: repeat(min(var(--lib-cols), 2), minmax(0, 1fr)); }
  }
  @media (min-width: 990px) {
    .lib-cards__grid { grid-template-columns: repeat(var(--lib-cols), minmax(0, 1fr)); }
  }

  .lib-card {
    --x: 50%;
    --y: 50%;
    --glow: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.75rem;
    border-radius: var(--lib-radius);
    background: var(--lib-card);
    color: inherit;
    text-decoration: none;
    isolation: isolate;
    overflow: hidden;
    transition: transform 0.25s ease;
  }
  .lib-cards[data-card-align='center'] .lib-card { align-items: center; text-align: center; }
  /* Border: a 1px ring; with the glow on, a radial gradient follows the pointer around it. */
  .lib-card::before,
  .lib-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
  }
  .lib-card::before {
    padding: 1px;
    background: color-mix(in srgb, var(--lib-text) 12%, transparent);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
  .lib-cards[data-glow] .lib-card::before {
    background:
      radial-gradient(240px circle at var(--x) var(--y), var(--lib-accent), transparent 70%),
      color-mix(in srgb, var(--lib-text) 12%, transparent);
  }
  .lib-card::after {
    z-index: -1;
    background: radial-gradient(360px circle at var(--x) var(--y), color-mix(in srgb, var(--lib-accent) 14%, transparent), transparent 70%);
    opacity: var(--glow);
    transition: opacity 0.3s ease;
  }
  a.lib-card:hover { transform: translateY(-3px); }
  a.lib-card:focus-visible { outline: 2px solid var(--lib-accent); outline-offset: 3px; }
  .lib-card__icon { display: block; width: 2.75rem; height: 2.75rem; object-fit: contain; margin-bottom: 1.25rem; }
  .lib-card__icon--glyph {
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--lib-accent) 14%, transparent);
  }
  .lib-card__title { margin: 0; font-size: 1.15rem; line-height: 1.3; }
  .lib-card__text { margin-top: 0.5rem; line-height: 1.6; opacity: 0.7; }
  .lib-card__text > * { margin: 0; }
  .lib-card__more { margin-top: auto; padding-top: 1.25rem; font-weight: 600; color: var(--lib-accent); }
  @media (prefers-reduced-motion: reduce) {
    .lib-card, .lib-card::after { transition: none; }
    a.lib-card:hover { transform: none; }
  }
{% endstylesheet %}

{% javascript %}
  if (!customElements.get('lib-spotlight')) {
    customElements.define(
      'lib-spotlight',
      class extends HTMLElement {
        connectedCallback() {
          if (!this.closest('[data-glow]') || matchMedia('(hover: none)').matches) return;
          this.addEventListener('pointermove', (e) => {
            for (const card of this.querySelectorAll('.lib-card')) {
              const r = card.getBoundingClientRect();
              card.style.setProperty('--x', `${e.clientX - r.left}px`);
              card.style.setProperty('--y', `${e.clientY - r.top}px`);
            }
          });
          this.addEventListener('pointerover', (e) => {
            const card = e.target.closest('.lib-card');
            if (card) card.style.setProperty('--glow', '1');
          });
          this.addEventListener('pointerout', (e) => {
            const card = e.target.closest('.lib-card');
            if (card && !card.contains(e.relatedTarget)) card.style.setProperty('--glow', '0');
          });
        }
      }
    );
  }
{% endjavascript %}

{% schema %}
{
  "name": "Lib · Feature cards",
  "tag": "section",
  "class": "lib-section",
  "max_blocks": 8,
  "settings": [
    { "type": "header", "content": "Content" },
    { "type": "inline_richtext", "id": "heading", "label": "Heading", "default": "Why customers come back" },
    {
      "type": "select",
      "id": "heading_tag",
      "label": "Heading tag",
      "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" }
      ],
      "default": "medium"
    },
    { "type": "richtext", "id": "text", "label": "Intro", "default": "<p>Three or four short reasons, each backed by something real.</p>" },

    { "type": "header", "content": "Layout" },
    { "type": "range", "id": "columns", "label": "Columns on desktop", "min": 2, "max": 4, "step": 1, "default": 3 },
    {
      "type": "select",
      "id": "columns_mobile",
      "label": "Columns on mobile",
      "options": [
        { "value": "1", "label": "1" },
        { "value": "2", "label": "2" }
      ],
      "default": "1"
    },
    {
      "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": "select",
      "id": "card_alignment",
      "label": "Card content alignment",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" }
      ],
      "default": "left"
    },
    { "type": "range", "id": "card_radius", "label": "Card corner radius", "min": 0, "max": 32, "step": 2, "unit": "px", "default": 16 },

    { "type": "header", "content": "Colors" },
    { "type": "color", "id": "color_bg", "label": "Background", "default": "#0C0A09" },
    { "type": "color_background", "id": "color_bg_gradient", "label": "Background gradient", "info": "Optional. Covers the background color." },
    { "type": "color", "id": "color_card", "label": "Card", "default": "#1C1917" },
    { "type": "color", "id": "color_text", "label": "Text", "default": "#FAFAF9" },
    { "type": "color", "id": "color_accent", "label": "Accent and glow", "default": "#F59E0B" },

    { "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": 96 },
    { "type": "range", "id": "padding_bottom", "label": "Bottom padding on desktop", "min": 0, "max": 200, "step": 4, "unit": "px", "default": 96 },
    { "type": "range", "id": "padding_top_mobile", "label": "Top padding on mobile", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 56 },
    { "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": "glow", "label": "Glow follows the pointer on desktop", "default": true }
  ],
  "blocks": [
    {
      "type": "card",
      "name": "Card",
      "settings": [
        { "type": "image_picker", "id": "icon", "label": "Icon image" },
        { "type": "text", "id": "emoji", "label": "Or a symbol / emoji", "default": "✦" },
        { "type": "text", "id": "title", "label": "Title", "default": "Card title" },
        { "type": "richtext", "id": "text", "label": "Text", "default": "<p>One or two sentences.</p>" },
        { "type": "url", "id": "link", "label": "Link" },
        { "type": "text", "id": "link_label", "label": "Link label", "info": "Shown at the bottom of the card.", "visible_if": "{{ block.settings.link != blank }}" },
        { "type": "checkbox", "id": "new_tab", "label": "Open link in a new tab", "default": false, "visible_if": "{{ block.settings.link != blank }}" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Lib · Feature cards",
      "blocks": [
        { "type": "card", "settings": { "emoji": "✦", "title": "Handmade", "text": "<p>Every piece is finished by hand in our studio.</p>" } },
        { "type": "card", "settings": { "emoji": "↺", "title": "30-day returns", "text": "<p>Not right? Send it back, no questions.</p>" } },
        { "type": "card", "settings": { "emoji": "◎", "title": "Lifetime care", "text": "<p>Free cleaning and repairs for as long as you own it.</p>" } }
      ]
    }
  ]
}
{% endschema %}
```

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