# Koleksiyon kartları: ücretsiz Shopify bölümü

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

Koleksiyon kartları, en fazla sekiz koleksiyonu başlık, isteğe bağlı etiket ve ürün sayısıyla görsel kartlar olarak gösteren ücretsiz bir Shopify bölümüdür. Her kart özel bir görsel ve başlık alabilir; mobil düzen tek sütun, iki sütun ya da kaydırılabilir bir satır olabilir ve Online Store 2.0 temalarında uygulama olmadan çalışır.

- **Kategori:** Ürün ve koleksiyon keşfi
- **Kullanıldığı yerler:** Ana sayfa, Koleksiyon, Açılış sayfaları
- **Okuduğu veri:** Koleksiyonlar
- **Boyut:** 3 dosyada 28 KB, JavaScript yok
- **Lisans:** MIT, © 2026 Lintel
- **Sayfa:** https://lintelagency.com/tr/kaynaklar/shopify-bolumleri/koleksiyon-kartlari
- **Canlı demo:** https://lintelagency.com/resources/shopify-sections/demo/lib-collection-cards.html
- **Eklenme tarihi:** 2026-10-02

## Ne işe yarar

- Hero’nun altında ana sayfada "kategoriye göre alışveriş" satırı
- Tüm koleksiyonlar sayfasının ya da sezonluk bir açılış sayfasının üst kısmı
- Her kartta Yeni ya da Hediye gibi bir etiketle seçilmiş koleksiyonlara yönlendiren hediye rehberi

## Tema düzenleyici ayarları

Bölüm tema düzenleyicide “Lib · Collection 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 | `Shop by <em>room and ritual</em>` |  |
| `heading_tag` | `select` | Heading tag | h2 | `h1`, `h2`, `h3`, `p` |
| `heading_size` | `select` | Heading size | medium | `small`, `medium`, `large`, `xlarge` |
| `text` | `richtext` | Text | `<p>Handmade pieces for the table, the sofa and the evening.</p>` |  |

### Button

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `button_label` | `text` | Button label | View all collections |  |
| `button_url` | `url` | Button link | – |  |
| `button_style` | `select` | Button style | text | `primary`, `outline`, `text` |
| `button_new_tab` | `checkbox` | Open link in a new tab | `false` |  |

### Cards

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `card_style` | `select` | Card style | overlay | `overlay`, `below` |
| `image_ratio` | `select` | Image shape | portrait | `square`, `portrait`, `tall`, `landscape` |
| `card_text_alignment` | `select` | Card text alignment | left | `left`, `center` |
| `show_count` | `checkbox` | Show product count | `true` |  |
| `count_label` | `text` | Product count word | products |  |
| `count_label_one` | `text` | Product count word for one product | product |  |
| `card_radius` | `range` | Corner radius | `14` | 0–32 px, step 2 |

### Layout

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `columns` | `range` | Columns on desktop | `4` | 2–5, step 1 |
| `mobile_layout` | `select` | Layout on mobile | scroll | `1`, `2`, `scroll` |
| `gap` | `range` | Space between cards | `20` | 8–40 px, step 4 |
| `section_width` | `select` | Width | page | `page`, `full` |
| `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 | #FAF8F4 |  |
| `color_bg_gradient` | `color_background` | Background gradient | – |  |
| `color_text` | `color` | Text | #1C1917 |  |
| `color_accent` | `color` | Accent (label, solid button) | #1C1917 |  |
| `color_accent_text` | `color` | Text on accent | #FAF8F4 |  |
| `color_card` | `color` | Card background | #FFFFFF |  |
| `color_card_text` | `color` | Card text | #1C1917 |  |
| `color_overlay` | `color` | Overlay | #000000 |  |
| `overlay_opacity` | `range` | Overlay opacity | `60` | 0–100 %, step 5 |
| `color_overlay_text` | `color` | Text on image | #FFFFFF |  |

### Spacing and visibility

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `padding_top` | `range` | Top padding on desktop | `80` | 0–200 px, step 4 |
| `padding_bottom` | `range` | Bottom padding on desktop | `80` | 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 | `48` | 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 |
| --- | --- | --- | --- | --- |
| `hover_zoom` | `checkbox` | Zoom image on hover | `true` |  |

## Bloklar

Toplamda en fazla 8 blok.

### Collection (`collection`, en fazla 8)

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `collection` | `collection` | Collection | – |  |
| `image` | `image_picker` | Custom image | – |  |
| `title` | `text` | Custom title | – |  |
| `label` | `text` | Label | – |  |

## 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-collection-cards.liquid` adında yeni bir dosya ekleyin, aşağıdaki kaynak koddan `sections/lib-collection-cards.liquid` içeriğini yapıştırıp kaydedin.
4. `lib-image.liquid` ve `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 · Collection cards** 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-collection-cards.liquid https://lintelagency.com/resources/shopify-sections/files/lib-collection-cards.liquid
curl -fsSL -o snippets/lib-image.liquid https://lintelagency.com/resources/shopify-sections/files/lib-image.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-collection-cards.liquid --only snippets/lib-image.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-collection-cards.liquid](https://lintelagency.com/resources/shopify-sections/files/lib-collection-cards.liquid): `sections/` klasörüne
- [snippets/lib-image.liquid](https://lintelagency.com/resources/shopify-sections/files/lib-image.liquid): `snippets/` 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

### Bir kart hangi görseli ve başlığı kullanır?

Kartta özel bir görsel ya da başlık belirlemediyseniz koleksiyonun öne çıkan görselini ve başlığını; belirlediyseniz bunlar önceliklidir. Ürün sayısı koleksiyondan gelir ve kapatılabilir.

### Mobilde nasıl görünür?

Tek sütun, iki sütun ya da kaydırılabilir bir satır seçersiniz. Satır, bölümün içinde yakalama noktalarıyla yana kayar; sayfanın kendisi yatay kaymaz. 750px ile 989px arasında ızgara en fazla üç sütun gösterir.

### JavaScript gerekir mi?

Hayır. Bölüm yalnızca HTML ve CSS’ten oluşur. Üzerine gelince yakınlaştırma bir CSS geçişidir ve azaltılmış hareket tercih eden ziyaretçilerde kapanır.

### Bir kartta koleksiyon seçilmemişse ne olur?

Tema düzenleyicide örnek bir başlıkla yer tutucu bir görsel gösterir. Canlı mağazada koleksiyonu, görseli ve başlığı olmayan bir kart gösterilmez; yalnızca özel başlığı ya da görseli olan bir kart bağlantısız gösterilir.

### Görseller sayfayı yavaşlatır mı?

Bölüm sayfadaki ilk iki bölümden biriyse ilk satır hariç görseller lazy-load ile yüklenir. Her kart sabit bir görsel şekliyle yerini önceden ayırır; böylece görseller yüklenirken düzen kaymaz.

## Kaynak kod

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

```liquid
{%- comment -%}
  MIT License · (c) 2026 Lintel · https://lintelagency.com/resources/shopify-sections
{%- endcomment -%}
{%- comment -%}
  Collection cards: up to eight collection tiles with image, title, optional label and product count.
  Text over the image on a gradient, or below the image. Two to five columns on desktop; one or two
  columns, or a swipeable row, on mobile. Each card can override the collection image and title.
  Depends on: snippets/lib-image.liquid, snippets/lib-button.liquid
{%- 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
  assign cols = s.columns | plus: 0
  assign img_vw = 100 | divided_by: cols
  assign img_sizes = '(min-width: 990px) ' | append: img_vw | append: 'vw, (min-width: 750px) 33vw, '
  case s.mobile_layout
    when '2'
      assign img_sizes = img_sizes | append: '50vw'
    when 'scroll'
      assign img_sizes = img_sizes | append: '75vw'
    else
      assign img_sizes = img_sizes | append: '100vw'
  endcase
-%}

<div
  class="lib-collection-cards lib-collection-cards--{{ s.section_width }}"
  {% if s.anchor_id != blank %}
    id="{{ s.anchor_id | handleize }}"
  {% endif %}
  data-show="{{ s.show_on }}"
  data-style="{{ s.card_style }}"
  data-mobile="{{ s.mobile_layout }}"
  data-card-align="{{ s.card_text_alignment }}"
  {% if s.hover_zoom %}
    data-zoom
  {% 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-card: {{ s.color_card }};
    --lib-card-text: {{ s.color_card_text }};
    --lib-overlay: {{ s.color_overlay }};
    --lib-overlay-o: {{ s.overlay_opacity }}%;
    --lib-overlay-text: {{ s.color_overlay_text }};
    --lib-cols: {{ cols }};
    --lib-gap: {{ s.gap }}px;
    --lib-radius-card: {{ 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-collection-cards__inner">
    {%- if s.heading != blank or s.text != blank or s.button_label != blank -%}
      <header class="lib-collection-cards__header" data-align="{{ s.text_alignment }}" data-align-m="{{ s.text_alignment_mobile }}">
        <div class="lib-collection-cards__copy">
          {%- if s.heading != blank -%}
            <{{ heading_tag }} class="lib-collection-cards__heading lib-collection-cards__heading--{{ s.heading_size }}">
              {{- s.heading -}}
            </{{ heading_tag }}>
          {%- endif -%}
          {%- if s.text != blank -%}
            <div class="lib-collection-cards__text">{{ s.text }}</div>
          {%- endif -%}
        </div>
        {%- if s.button_label != blank -%}
          <div class="lib-collection-cards__actions">
            {%- render 'lib-button',
              label: s.button_label,
              url: s.button_url,
              style: s.button_style,
              new_tab: s.button_new_tab
            -%}
          </div>
        {%- endif -%}
      </header>
    {%- endif -%}

    <ul class="lib-collection-cards__grid" role="list">
      {%- for block in section.blocks -%}
        {%- liquid
          assign b = block.settings
          assign c = b.collection
          if c == blank and b.image == blank and b.title == blank and request.design_mode == false
            continue
          endif
          assign title = b.title | default: c.title | default: 'Collection title'
          assign img = b.image | default: c.featured_image
          assign count = 12
          if c != blank
            assign count = c.products_count
          endif
          assign count_word = s.count_label
          if count == 1
            assign count_word = s.count_label_one
          endif
          assign tag = 'div'
          if c != blank
            assign tag = 'a'
          endif
          assign eager = false
          if section.index <= 2 and forloop.index <= cols
            assign eager = true
          endif
        -%}
        <li class="lib-collection-cards__item" {{ block.shopify_attributes }}>
          <{{ tag }} class="lib-collection-cards__card" {% if tag == 'a' %}href="{{ c.url }}"{% endif %}>
            <div class="lib-collection-cards__media" data-ratio="{{ s.image_ratio }}">
              {%- render 'lib-image',
                image: img,
                class: 'lib-collection-cards__img',
                sizes: img_sizes,
                eager: eager,
                placeholder: 'collection-1'
              -%}
              {%- if b.label != blank -%}
                <span class="lib-collection-cards__label">{{ b.label | escape }}</span>
              {%- endif -%}
            </div>
            <div class="lib-collection-cards__body">
              <{{ card_tag }} class="lib-collection-cards__title">
                <span>{{ title | escape }}</span>
                <svg class="lib-collection-cards__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>
              </{{ card_tag }}>
              {%- if s.show_count -%}
                <p class="lib-collection-cards__count">{{ count }} {{ count_word | escape }}</p>
              {%- endif -%}
            </div>
          </{{ tag }}>
        </li>
      {%- endfor -%}
    </ul>
  </div>
</div>

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

  /* Header: copy and optional button; alignment per device. */
  .lib-collection-cards__header {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
    align-items: flex-start;
    text-align: left;
  }
  .lib-collection-cards__header[data-align='center'] { align-items: center; text-align: center; }
  .lib-collection-cards__header[data-align='right'] { align-items: flex-end; text-align: right; }
  @media (min-width: 750px) {
    .lib-collection-cards__header[data-align='left'] { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  }
  @media (max-width: 749px) {
    .lib-collection-cards__header[data-align-m='left'] { align-items: flex-start; text-align: left; }
    .lib-collection-cards__header[data-align-m='center'] { align-items: center; text-align: center; }
    .lib-collection-cards__header[data-align-m='right'] { align-items: flex-end; text-align: right; }
  }
  .lib-collection-cards__copy { max-width: 40rem; }
  .lib-collection-cards__heading {
    margin: 0;
    font-size: clamp(1.75rem, 3.4vw, 2.75rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  .lib-collection-cards__heading--small { font-size: clamp(1.5rem, 2.4vw, 2rem); }
  .lib-collection-cards__heading--large { font-size: clamp(2rem, 4.4vw, 3.5rem); }
  .lib-collection-cards__heading--xlarge { font-size: clamp(2.5rem, 6vw, 4.5rem); }
  .lib-collection-cards__text { margin-top: 0.75rem; font-size: 1.0625rem; line-height: 1.6; opacity: 0.75; }
  .lib-collection-cards__text > :first-child { margin-top: 0; }
  .lib-collection-cards__text > :last-child { margin-bottom: 0; }
  .lib-collection-cards__actions { flex: none; }

  /* Grid: columns per device, or a swipeable row on mobile. */
  .lib-collection-cards__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--lib-gap);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .lib-collection-cards[data-mobile='2'] .lib-collection-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (max-width: 749px) {
    .lib-collection-cards[data-mobile='scroll'] .lib-collection-cards__grid {
      display: flex;
      overflow-x: auto;
      margin-inline: -1rem;
      padding: 0 1rem 0.5rem;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: 1rem;
      scrollbar-width: thin;
      overscroll-behavior-x: contain;
    }
    .lib-collection-cards[data-mobile='scroll'] .lib-collection-cards__item {
      flex: 0 0 76%;
      scroll-snap-align: start;
    }
  }
  @media (min-width: 750px) {
    .lib-collection-cards .lib-collection-cards__grid,
    .lib-collection-cards[data-mobile='2'] .lib-collection-cards__grid {
      grid-template-columns: repeat(min(var(--lib-cols), 3), minmax(0, 1fr));
    }
  }
  @media (min-width: 990px) {
    .lib-collection-cards .lib-collection-cards__grid,
    .lib-collection-cards[data-mobile='2'] .lib-collection-cards__grid {
      grid-template-columns: repeat(var(--lib-cols), minmax(0, 1fr));
    }
  }

  /* Card */
  .lib-collection-cards__item { display: flex; min-width: 0; }
  .lib-collection-cards__card {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    border-radius: var(--lib-radius-card);
    color: inherit;
    text-decoration: none;
    isolation: isolate;
  }
  .lib-collection-cards__card:focus-visible { outline: 2px solid var(--lib-accent); outline-offset: 3px; }
  .lib-collection-cards__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    border-radius: var(--lib-radius-card);
    background: color-mix(in srgb, var(--lib-text) 7%, transparent);
  }
  .lib-collection-cards__media[data-ratio='square'] { aspect-ratio: 1; }
  .lib-collection-cards__media[data-ratio='landscape'] { aspect-ratio: 4 / 3; }
  .lib-collection-cards__media[data-ratio='tall'] { aspect-ratio: 2 / 3; }
  .lib-collection-cards__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  svg.lib-collection-cards__img { fill: color-mix(in srgb, var(--lib-text) 22%, transparent); }
  .lib-collection-cards[data-zoom] .lib-collection-cards__card:hover .lib-collection-cards__img,
  .lib-collection-cards[data-zoom] .lib-collection-cards__card:focus-visible .lib-collection-cards__img { transform: scale(1.06); }

  .lib-collection-cards__label {
    position: absolute;
    z-index: 2;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: var(--lib-accent);
    color: var(--lib-accent-text);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1.2;
  }

  .lib-collection-cards__body { display: flex; flex-direction: column; gap: 0.2rem; padding-top: 0.9rem; }
  .lib-collection-cards[data-card-align='center'] .lib-collection-cards__body { align-items: center; text-align: center; }
  .lib-collection-cards__title {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.25;
  }
  .lib-collection-cards__arrow { flex: none; transition: transform 0.2s ease; }
  .lib-collection-cards__card:hover .lib-collection-cards__arrow { transform: translateX(3px); }
  .lib-collection-cards__count { margin: 0; font-size: 0.875rem; opacity: 0.65; }

  /* Style: text below on a card surface. */
  .lib-collection-cards[data-style='below'] .lib-collection-cards__card {
    background: var(--lib-card);
    color: var(--lib-card-text);
  }
  .lib-collection-cards[data-style='below'] .lib-collection-cards__media { border-end-start-radius: 0; border-end-end-radius: 0; }
  .lib-collection-cards[data-style='below'] .lib-collection-cards__body { padding: 0.9rem 1rem 1rem; }

  /* Style: text over the image on a gradient. */
  .lib-collection-cards[data-style='overlay'] .lib-collection-cards__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, color-mix(in srgb, var(--lib-overlay) var(--lib-overlay-o), transparent) 0%, transparent 60%);
    pointer-events: none;
  }
  .lib-collection-cards[data-style='overlay'] .lib-collection-cards__body {
    position: absolute;
    z-index: 1;
    inset: auto 0 0;
    padding: 1.25rem;
    color: var(--lib-overlay-text);
  }
  .lib-collection-cards[data-style='overlay'] .lib-collection-cards__title { font-size: 1.25rem; }
  .lib-collection-cards[data-style='overlay'] .lib-collection-cards__count { opacity: 0.85; }

  @media (prefers-reduced-motion: reduce) {
    .lib-collection-cards__img,
    .lib-collection-cards__arrow { transition: none; }
    .lib-collection-cards[data-zoom] .lib-collection-cards__card:hover .lib-collection-cards__img,
    .lib-collection-cards[data-zoom] .lib-collection-cards__card:focus-visible .lib-collection-cards__img,
    .lib-collection-cards__card:hover .lib-collection-cards__arrow { transform: none; }
  }
{% endstylesheet %}

{% schema %}
{
  "name": "Lib · Collection cards",
  "tag": "section",
  "class": "lib-section",
  "max_blocks": 8,
  "settings": [
    { "type": "header", "content": "Content" },
    { "type": "inline_richtext", "id": "heading", "label": "Heading", "default": "Shop by <em>room and ritual</em>" },
    {
      "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", "default": "<p>Handmade pieces for the table, the sofa and the evening.</p>" },

    { "type": "header", "content": "Button" },
    { "type": "text", "id": "button_label", "label": "Button label", "info": "Optional. Shown beside or under the heading.", "default": "View all collections" },
    { "type": "url", "id": "button_url", "label": "Button link" },
    {
      "type": "select",
      "id": "button_style",
      "label": "Button style",
      "options": [
        { "value": "primary", "label": "Solid" },
        { "value": "outline", "label": "Outline" },
        { "value": "text", "label": "Text link" }
      ],
      "default": "text"
    },
    { "type": "checkbox", "id": "button_new_tab", "label": "Open link in a new tab", "default": false },

    { "type": "header", "content": "Cards" },
    {
      "type": "select",
      "id": "card_style",
      "label": "Card style",
      "options": [
        { "value": "overlay", "label": "Text over image" },
        { "value": "below", "label": "Text below image" }
      ],
      "default": "overlay"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "label": "Image shape",
      "options": [
        { "value": "square", "label": "Square" },
        { "value": "portrait", "label": "Portrait (4:5)" },
        { "value": "tall", "label": "Tall (2:3)" },
        { "value": "landscape", "label": "Landscape (4:3)" }
      ],
      "default": "portrait"
    },
    {
      "type": "select",
      "id": "card_text_alignment",
      "label": "Card text alignment",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" }
      ],
      "default": "left"
    },
    { "type": "checkbox", "id": "show_count", "label": "Show product count", "default": true },
    { "type": "text", "id": "count_label", "label": "Product count word", "default": "products", "visible_if": "{{ section.settings.show_count }}" },
    { "type": "text", "id": "count_label_one", "label": "Product count word for one product", "default": "product", "visible_if": "{{ section.settings.show_count }}" },
    { "type": "range", "id": "card_radius", "label": "Corner radius", "min": 0, "max": 32, "step": 2, "unit": "px", "default": 14 },

    { "type": "header", "content": "Layout" },
    { "type": "range", "id": "columns", "label": "Columns on desktop", "min": 2, "max": 5, "step": 1, "default": 4 },
    {
      "type": "select",
      "id": "mobile_layout",
      "label": "Layout on mobile",
      "options": [
        { "value": "1", "label": "1 column" },
        { "value": "2", "label": "2 columns" },
        { "value": "scroll", "label": "Swipeable row" }
      ],
      "default": "scroll"
    },
    { "type": "range", "id": "gap", "label": "Space between cards", "min": 8, "max": 40, "step": 4, "unit": "px", "default": 20 },
    {
      "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": "left" },
    {
      "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": "#FAF8F4" },
    { "type": "color_background", "id": "color_bg_gradient", "label": "Background gradient", "info": "Optional. Covers the background color." },
    { "type": "color", "id": "color_text", "label": "Text", "default": "#1C1917" },
    { "type": "color", "id": "color_accent", "label": "Accent (label, solid button)", "default": "#1C1917" },
    { "type": "color", "id": "color_accent_text", "label": "Text on accent", "default": "#FAF8F4" },
    { "type": "color", "id": "color_card", "label": "Card background", "default": "#FFFFFF", "visible_if": "{{ section.settings.card_style == 'below' }}" },
    { "type": "color", "id": "color_card_text", "label": "Card text", "default": "#1C1917", "visible_if": "{{ section.settings.card_style == 'below' }}" },
    { "type": "color", "id": "color_overlay", "label": "Overlay", "default": "#000000", "visible_if": "{{ section.settings.card_style == 'overlay' }}" },
    {
      "type": "range",
      "id": "overlay_opacity",
      "label": "Overlay opacity",
      "min": 0,
      "max": 100,
      "step": 5,
      "unit": "%",
      "default": 60,
      "visible_if": "{{ section.settings.card_style == 'overlay' }}"
    },
    { "type": "color", "id": "color_overlay_text", "label": "Text on image", "default": "#FFFFFF", "visible_if": "{{ section.settings.card_style == 'overlay' }}" },

    { "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": 80 },
    { "type": "range", "id": "padding_bottom", "label": "Bottom padding on desktop", "min": 0, "max": 200, "step": 4, "unit": "px", "default": 80 },
    { "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": 48 },
    {
      "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": "hover_zoom", "label": "Zoom image on hover", "default": true }
  ],
  "blocks": [
    {
      "type": "collection",
      "name": "Collection",
      "limit": 8,
      "settings": [
        { "type": "collection", "id": "collection", "label": "Collection" },
        { "type": "image_picker", "id": "image", "label": "Custom image", "info": "Optional. Replaces the collection image." },
        { "type": "text", "id": "title", "label": "Custom title", "info": "Optional. Replaces the collection title." },
        { "type": "text", "id": "label", "label": "Label", "info": "Optional. A small tag on the image, e.g. New." }
      ]
    }
  ],
  "presets": [
    {
      "name": "Lib · Collection cards",
      "blocks": [
        { "type": "collection", "settings": { "title": "Ceramics" } },
        { "type": "collection", "settings": { "title": "Linen and wool", "label": "New" } },
        { "type": "collection", "settings": { "title": "Lighting" } },
        { "type": "collection", "settings": { "title": "Candles" } }
      ]
    }
  ]
}
{% endschema %}
```

### snippets/lib-image.liquid

```liquid
{%- comment -%}
  MIT License · (c) 2026 Lintel · https://lintelagency.com/resources/shopify-sections
{%- endcomment -%}
{% doc %}
  Responsive image with optional art direction: a separate mobile image (below 750px),
  each honouring its own focal point from the theme editor. Falls back to a placeholder.

  @param {image} [image] - Desktop image (also used on mobile when no mobile image is set)
  @param {image} [image_mobile] - Mobile image, below 750px
  @param {string} [class] - Class for the img element
  @param {string} [sizes] - sizes attribute for the desktop image (default 100vw)
  @param {boolean} [eager] - Load immediately with high fetch priority (use for the first sections on a page)
  @param {string} [placeholder] - placeholder_svg_tag name when no image is set (default 'lifestyle-1')

  @example
  {% render 'lib-image', image: section.settings.image, image_mobile: section.settings.image_mobile, class: 'lib-hero__img', sizes: '(min-width: 990px) 50vw, 100vw', eager: true %}
{% enddoc %}

{%- liquid
  assign desktop = image
  if desktop == blank
    assign desktop = image_mobile
  endif
  assign img_sizes = sizes | default: '100vw'
  assign img_loading = 'lazy'
  assign img_priority = 'auto'
  if eager
    assign img_loading = 'eager'
    assign img_priority = 'high'
  endif
  assign art = false
  if image != blank and image_mobile != blank
    assign art = true
  endif
-%}

{%- if desktop != blank -%}
  <picture
    class="lib-picture{% if art %} lib-picture--art{% endif %}"
    {% if art %}
      style="--lib-pos-m: {{ image_mobile.presentation.focal_point | default: '50% 50%' }};"
    {% endif %}
  >
    {%- if art -%}
      <source
        media="(max-width: 749px)"
        srcset="
          {{ image_mobile | image_url: width: 375 }} 375w,
          {{ image_mobile | image_url: width: 750 }} 750w,
          {{ image_mobile | image_url: width: 1100 }} 1100w,
          {{ image_mobile | image_url: width: 1500 }} 1500w
        "
        sizes="100vw"
        width="{{ image_mobile.width }}"
        height="{{ image_mobile.height }}"
      >
    {%- endif -%}
    {{
      desktop
      | image_url: width: 2400
      | image_tag:
        class: class,
        loading: img_loading,
        fetchpriority: img_priority,
        sizes: img_sizes,
        widths: '600, 900, 1200, 1600, 2000, 2400'
    }}
  </picture>
{%- else -%}
  {{ placeholder | default: 'lifestyle-1' | placeholder_svg_tag: class }}
{%- endif -%}

{% stylesheet %}
  .lib-picture { display: contents; }
  @media (max-width: 749px) {
    /* image_tag sets the desktop focal point inline; the mobile image needs its own. */
    .lib-picture--art img { object-position: var(--lib-pos-m) !important; }
  }
{% endstylesheet %}
```

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