# Öne çıkan koleksiyon: ücretsiz Shopify bölümü

> Bir koleksiyonun ürün kartları ızgara ya da kaydırılabilir carousel olarak; üzerine gelince ikinci görsel, indirim ve tükendi rozetleri ve hızlı ekle düğmesi.

Öne çıkan koleksiyon, bir koleksiyondan en fazla 24 ürünü ızgara ya da kaydırılabilir carousel olarak gösteren ücretsiz bir Shopify bölümüdür. Kartlar üzerine gelince ikinci görseli, indirim rozetiyle karşılaştırma fiyatlarını, tükendi rozetini ve seçeneği olmayan ürünler için hızlı ekle düğmesini gösterir; Online Store 2.0 temalarında uygulama olmadan çalışır.

- **Kategori:** Ürün ve koleksiyon keşfi
- **Kullanıldığı yerler:** Ana sayfa, Ürün, Koleksiyon, Açılış sayfaları
- **Okuduğu veri:** Bir koleksiyondaki ürünler
- **Boyut:** 3 dosyada 38 KB, küçük bir betikle
- **Lisans:** MIT, © 2026 Lintel
- **Sayfa:** https://lintelagency.com/tr/kaynaklar/shopify-bolumleri/one-cikan-koleksiyon
- **Canlı demo:** https://lintelagency.com/resources/shopify-sections/demo/lib-featured-collection.html
- **Eklenme tarihi:** 2026-10-02

## Ne işe yarar

- Hero’nun altında ana sayfada "Yeni gelenler" ya da "En çok satanlar" satırı
- Ürün sayfasında uyumlu bir koleksiyona yönlendiren "Seti tamamla" carousel’i
- Seçilmiş tek bir koleksiyonun ürünlerini gösteren sezonluk ya da hediye açılış sayfası

## Tema düzenleyici ayarları

Bölüm tema düzenleyicide “Lib · Featured collection” 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 | `New in for the <em>table</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>Stoneware, linen and beeswax, made in small batches.</p>` |  |
| `collection` | `collection` | Collection | – |  |
| `products_to_show` | `range` | Products to show | `8` | 2–24, step 1 |

### Button

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `view_all_label` | `text` | "View all" label | View all |  |
| `view_all_style` | `select` | "View all" style | text | `primary`, `outline`, `text` |

### Product cards

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `image_ratio` | `select` | Image shape | portrait | `square`, `portrait`, `tall`, `landscape` |
| `card_style` | `select` | Card style | plain | `plain`, `card` |
| `show_secondary_image` | `checkbox` | Show second image on hover | `true` |  |
| `show_vendor` | `checkbox` | Show vendor | `false` |  |
| `sale_label` | `text` | Sale badge | Sale |  |
| `sold_out_label` | `text` | Sold out badge | Sold out |  |
| `show_quick_add` | `checkbox` | Show quick add button | `true` |  |
| `quick_add_label` | `text` | Quick add label | Quick add |  |
| `choose_label` | `text` | Label for products with options | Choose options |  |
| `card_radius` | `range` | Corner radius | `12` | 0–32 px, step 2 |

### Layout

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `layout` | `select` | Layout | carousel | `grid`, `carousel` |
| `columns` | `range` | Columns on desktop | `4` | 2–6, step 1 |
| `columns_mobile` | `select` | Columns on mobile | 2 | `1`, `2` |
| `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 (badges, buttons on hover) | #1C1917 |  |
| `color_accent_text` | `color` | Text on accent | #FAF8F4 |  |
| `color_card` | `color` | Card background | #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 | – |  |

## 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-featured-collection.liquid` adında yeni bir dosya ekleyin, aşağıdaki kaynak koddan `sections/lib-featured-collection.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 · Featured collection** 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-featured-collection.liquid https://lintelagency.com/resources/shopify-sections/files/lib-featured-collection.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-featured-collection.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-featured-collection.liquid](https://lintelagency.com/resources/shopify-sections/files/lib-featured-collection.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

### Hızlı ekle düğmesi nasıl çalışır?

Seçeneği olmayan bir üründe, ürünün varyantını ve 1 adedi /cart/add adresine gönderen standart bir Shopify ürün formudur; JavaScript olmadan çalışır ve Shopify ardından sepet sayfasını gösterir. Temanızın sepet çekmecesini açmaz. Seçeneği olan ürünler bunun yerine ürün sayfasına giden bir "Choose options" bağlantısı gösterir; seçeneği olmayan tükenmiş bir ürün ise tükendi ifadenizle devre dışı bir düğme gösterir.

### Carousel JavaScript gerektirir mi?

Hayır. Satır, dokunma, trackpad ve klavyeyle kendi başına kayan bir CSS scroll-snap şerididir. Küçük bir custom element 750px’ten itibaren önceki ve sonraki düğmelerini ekler; bunlar yalnızca satırda sığandan fazla ürün varken görünür. Telefonlarda satır kaydırılır ve sıradaki kart kenardan görünür.

### Üzerine gelince görünen görsel nereden gelir?

Ürünün ikinci medya öğesinden. Üzerine gelinebilen cihazlarda ve kart klavye odağındayken yumuşakça belirir. Tek görseli olan ürünler ilk görsellerini korur; azaltılmış hareket tercih eden ziyaretçilerde geçiş kapanır.

### Koleksiyon seçilmemişse ne olur?

Tema düzenleyicide bölüm, "Products to show" sayısı kadar örnek metinli yer tutucu kart gösterir. Canlı mağazada ürünleri olan bir koleksiyon seçilene kadar bölüm gösterilmez.

### Kaç ürün ve sütun gösterebilir?

2 ile 24 arasında ürün. Hem ızgarada hem carousel’de masaüstü 2–6 sütun, tabletler en fazla 3, telefonlar satır başına 1 ya da 2 gösterir.

### Ürün görselleri 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; görseller yüklenirken hiçbir şey kaymaz.

## Kaynak kod

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

```liquid
{%- comment -%}
  MIT License · (c) 2026 Lintel · https://lintelagency.com/resources/shopify-sections
{%- endcomment -%}
{%- comment -%}
  Featured collection: product cards from one collection, as a grid or a swipeable row.
  Cards show the featured image (second product image on hover), optional vendor, price with
  compare-at price, sale and sold-out badges, and a quick add button. Quick add is a plain
  Shopify product form that posts the only variant to /cart/add; products with options link to
  the product page instead. The row scrolls by touch, trackpad and keyboard on its own; a small
  custom element adds previous/next buttons. Blank collection: placeholder cards in the editor only.
  Depends on: snippets/lib-image.liquid, snippets/lib-button.liquid
{%- endcomment -%}

{%- liquid
  assign s = section.settings
  assign c = s.collection
  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 cols_m = s.columns_mobile | plus: 0
  assign limit = s.products_to_show | plus: 0
  assign track_id = 'LibFeaturedCollection-' | append: section.id

  assign img_vw = 100 | divided_by: cols
  assign img_vw_m = 100 | divided_by: cols_m
  if s.layout == 'carousel'
    assign img_vw_m = 80 | divided_by: cols_m
  endif
  assign img_sizes = '(min-width: 990px) ' | append: img_vw | append: 'vw, (min-width: 750px) 33vw, ' | append: img_vw_m | append: 'vw'

  assign show = true
  if c == blank and request.design_mode == false
    assign show = false
  endif
  if c != blank and c.products.size == 0 and request.design_mode == false
    assign show = false
  endif
-%}

{%- if show -%}
  <div
    class="lib-featured-collection lib-featured-collection--{{ s.section_width }}"
    {% if s.anchor_id != blank %}
      id="{{ s.anchor_id | handleize }}"
    {% endif %}
    data-show="{{ s.show_on }}"
    data-layout="{{ s.layout }}"
    data-card="{{ s.card_style }}"
    {% if s.show_secondary_image %}
      data-hover-image
    {% 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-cols: {{ cols }};
      --lib-cols-m: {{ cols_m }};
      --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;
    "
  >
    <lib-featured-collection-slider class="lib-featured-collection__inner">
      {%- liquid
        assign view_all_url = c.url
        assign has_nav = false
        if s.layout == 'carousel'
          assign has_nav = true
        endif
      -%}
      {%- if s.heading != blank or s.text != blank or s.view_all_label != blank or has_nav -%}
        <header class="lib-featured-collection__header" data-align="{{ s.text_alignment }}" data-align-m="{{ s.text_alignment_mobile }}">
          <div class="lib-featured-collection__copy">
            {%- if s.heading != blank -%}
              <{{ heading_tag }} class="lib-featured-collection__heading lib-featured-collection__heading--{{ s.heading_size }}">
                {{- s.heading -}}
              </{{ heading_tag }}>
            {%- endif -%}
            {%- if s.text != blank -%}
              <div class="lib-featured-collection__text">{{ s.text }}</div>
            {%- endif -%}
          </div>
          {%- if s.view_all_label != blank or has_nav -%}
            <div class="lib-featured-collection__actions">
              {%- if s.view_all_label != blank -%}
                {%- render 'lib-button', label: s.view_all_label, url: view_all_url, style: s.view_all_style -%}
              {%- endif -%}
              {%- if has_nav -%}
                <div class="lib-featured-collection__nav">
                  <button type="button" class="lib-featured-collection__arrow" data-dir="-1" aria-controls="{{ track_id }}" aria-label="Previous products">
                    <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" focusable="false"><path d="M10 3.5 5.5 8l4.5 4.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                  </button>
                  <button type="button" class="lib-featured-collection__arrow" data-dir="1" aria-controls="{{ track_id }}" aria-label="Next products">
                    <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" focusable="false"><path d="M6 3.5 10.5 8 6 12.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                  </button>
                </div>
              {%- endif -%}
            </div>
          {%- endif -%}
        </header>
      {%- endif -%}

      <ul
        class="lib-featured-collection__track"
        id="{{ track_id }}"
        role="list"
        {% if has_nav %}
          tabindex="0" aria-label="{{ s.heading | strip_html | default: c.title | default: 'Products' | escape }}" data-track
        {% endif %}
      >
        {%- if c != blank -%}
          {%- for product in c.products limit: limit -%}
            {%- liquid
              assign p = product
              assign img = p.featured_image
              assign has_img2 = false
              if s.show_secondary_image and p.media.size > 1 and p.media[1].preview_image != blank
                assign has_img2 = true
                assign img2 = p.media[1].preview_image
              endif
              assign on_sale = false
              if p.compare_at_price > p.price
                assign on_sale = true
              endif
              assign eager = false
              if section.index <= 2 and forloop.index <= cols
                assign eager = true
              endif
              assign title_id = track_id | append: '-title-' | append: forloop.index
            -%}
            <li class="lib-featured-collection__item">
              <article class="lib-featured-collection__card{% if p.available == false %} is-sold-out{% endif %}">
                <div class="lib-featured-collection__media" data-ratio="{{ s.image_ratio }}">
                  {%- render 'lib-image', image: img, class: 'lib-featured-collection__img', sizes: img_sizes, eager: eager, placeholder: 'product-1' -%}
                  {%- if has_img2 -%}
                    <div class="lib-featured-collection__img2" aria-hidden="true">
                      {%- render 'lib-image', image: img2, class: 'lib-featured-collection__img', sizes: img_sizes -%}
                    </div>
                  {%- endif -%}
                  {%- if p.available == false and s.sold_out_label != blank -%}
                    <span class="lib-featured-collection__badge lib-featured-collection__badge--sold-out">{{ s.sold_out_label | escape }}</span>
                  {%- elsif on_sale and s.sale_label != blank -%}
                    <span class="lib-featured-collection__badge">{{ s.sale_label | escape }}</span>
                  {%- endif -%}
                </div>

                <div class="lib-featured-collection__body">
                  {%- if s.show_vendor and p.vendor != blank -%}
                    <p class="lib-featured-collection__vendor">{{ p.vendor | escape }}</p>
                  {%- endif -%}
                  <{{ card_tag }} class="lib-featured-collection__title" id="{{ title_id }}">
                    <a class="lib-featured-collection__link" href="{{ p.url }}">{{ p.title | escape }}</a>
                  </{{ card_tag }}>
                  <p class="lib-featured-collection__price">
                    {%- if on_sale -%}
                      <span class="lib-featured-collection__sr">Sale price</span>
                      <span class="lib-featured-collection__price-now lib-featured-collection__price-now--sale">{{ p.price | money }}</span>
                      <span class="lib-featured-collection__sr">Regular price</span>
                      <s class="lib-featured-collection__price-was">{{ p.compare_at_price | money }}</s>
                    {%- else -%}
                      <span class="lib-featured-collection__price-now">{{ p.price | money }}</span>
                    {%- endif -%}
                  </p>

                  {%- if s.show_quick_add -%}
                    <div class="lib-featured-collection__cta">
                      {%- if p.has_only_default_variant -%}
                        {%- form 'product', p, class: 'lib-featured-collection__form' -%}
                          <input type="hidden" name="id" value="{{ p.selected_or_first_available_variant.id }}">
                          <input type="hidden" name="quantity" value="1">
                          <button
                            type="submit"
                            name="add"
                            class="lib-featured-collection__add"
                            aria-describedby="{{ title_id }}"
                            {% if p.available == false %}
                              disabled
                            {% endif %}
                          >
                            {%- if p.available -%}
                              {{- s.quick_add_label | escape -}}
                            {%- else -%}
                              {{- s.sold_out_label | default: s.quick_add_label | escape -}}
                            {%- endif -%}
                          </button>
                        {%- endform -%}
                      {%- else -%}
                        <a class="lib-featured-collection__add" href="{{ p.url }}" aria-describedby="{{ title_id }}">
                          {{- s.choose_label | escape -}}
                        </a>
                      {%- endif -%}
                    </div>
                  {%- endif -%}
                </div>
              </article>
            </li>
          {%- endfor -%}
        {%- else -%}
          {%- for i in (1..limit) -%}
            {%- liquid
              assign ph = i | modulo: 6 | plus: 1
              assign ph_name = 'product-' | append: ph
            -%}
            <li class="lib-featured-collection__item">
              <article class="lib-featured-collection__card">
                <div class="lib-featured-collection__media" data-ratio="{{ s.image_ratio }}">
                  {%- render 'lib-image', class: 'lib-featured-collection__img', placeholder: ph_name -%}
                </div>
                <div class="lib-featured-collection__body">
                  {%- if s.show_vendor -%}
                    <p class="lib-featured-collection__vendor">Vendor</p>
                  {%- endif -%}
                  <{{ card_tag }} class="lib-featured-collection__title">Example product title</{{ card_tag }}>
                  <p class="lib-featured-collection__price">
                    <span class="lib-featured-collection__price-now">{{ 4800 | money }}</span>
                  </p>
                  {%- if s.show_quick_add -%}
                    <div class="lib-featured-collection__cta">
                      <span class="lib-featured-collection__add" aria-disabled="true">{{ s.quick_add_label | escape }}</span>
                    </div>
                  {%- endif -%}
                </div>
              </article>
            </li>
          {%- endfor -%}
        {%- endif -%}
      </ul>
    </lib-featured-collection-slider>
  </div>
{%- endif -%}

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

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

  .lib-featured-collection__nav { display: none; gap: 0.5rem; }
  .lib-featured-collection__inner[data-overflow] .lib-featured-collection__nav { display: flex; }
  @media (max-width: 749px) {
    .lib-featured-collection__inner[data-overflow] .lib-featured-collection__nav { display: none; }
  }
  .lib-featured-collection__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--lib-text) 22%, transparent);
    border-radius: 50%;
    background: transparent;
    color: var(--lib-text);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
  }
  .lib-featured-collection__arrow:hover:not(:disabled) { background: var(--lib-accent); border-color: var(--lib-accent); color: var(--lib-accent-text); }
  .lib-featured-collection__arrow:focus-visible { outline: 2px solid var(--lib-accent); outline-offset: 2px; }
  .lib-featured-collection__arrow:disabled { opacity: 0.35; cursor: default; }

  /* Track: grid, or a scroll-snap row (works by swipe, trackpad and keyboard without JS). */
  .lib-featured-collection__track {
    display: grid;
    grid-template-columns: repeat(var(--lib-cols-m), minmax(0, 1fr));
    gap: calc(var(--lib-gap) * 1.5) var(--lib-gap);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  @media (min-width: 750px) {
    .lib-featured-collection__track { grid-template-columns: repeat(min(var(--lib-cols), 3), minmax(0, 1fr)); }
  }
  @media (min-width: 990px) {
    .lib-featured-collection__track { grid-template-columns: repeat(var(--lib-cols), minmax(0, 1fr)); }
  }
  .lib-featured-collection[data-layout='carousel'] .lib-featured-collection__track {
    --lib-per: var(--lib-cols-m);
    display: flex;
    gap: var(--lib-gap);
    overflow-x: auto;
    margin-inline: -1rem;
    padding: 0.25rem 1rem 0.75rem;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1rem;
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
  }
  .lib-featured-collection[data-layout='carousel'] .lib-featured-collection__item {
    flex: 0 0 calc((100% - (var(--lib-per) - 1) * var(--lib-gap)) / var(--lib-per));
    scroll-snap-align: start;
  }
  @media (max-width: 749px) {
    /* A peek of the next card says "swipe me". */
    .lib-featured-collection[data-layout='carousel'] .lib-featured-collection__item {
      flex-basis: calc((88% - (var(--lib-per) - 1) * var(--lib-gap)) / var(--lib-per));
    }
  }
  @media (min-width: 750px) {
    .lib-featured-collection[data-layout='carousel'] .lib-featured-collection__track { --lib-per: min(var(--lib-cols), 3); margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }
  }
  @media (min-width: 990px) {
    .lib-featured-collection[data-layout='carousel'] .lib-featured-collection__track { --lib-per: var(--lib-cols); }
  }
  .lib-featured-collection__track:focus-visible { outline: 2px solid var(--lib-accent); outline-offset: 4px; border-radius: 4px; }

  /* Card */
  .lib-featured-collection__item { display: flex; min-width: 0; }
  .lib-featured-collection__card {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    border-radius: var(--lib-radius-card);
  }
  .lib-featured-collection[data-card='card'] .lib-featured-collection__card { background: var(--lib-card); }
  .lib-featured-collection__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
    border-radius: var(--lib-radius-card);
    background: color-mix(in srgb, var(--lib-text) 6%, transparent);
  }
  .lib-featured-collection__media[data-ratio='portrait'] { aspect-ratio: 4 / 5; }
  .lib-featured-collection__media[data-ratio='tall'] { aspect-ratio: 2 / 3; }
  .lib-featured-collection__media[data-ratio='landscape'] { aspect-ratio: 4 / 3; }
  .lib-featured-collection[data-card='card'] .lib-featured-collection__media { border-end-start-radius: 0; border-end-end-radius: 0; }
  .lib-featured-collection__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-featured-collection__img { fill: color-mix(in srgb, var(--lib-text) 22%, transparent); }
  .lib-featured-collection__img2 {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  @media (hover: hover) {
    .lib-featured-collection__card:hover .lib-featured-collection__img2 { opacity: 1; }
    .lib-featured-collection__card:hover .lib-featured-collection__img { transform: scale(1.03); }
  }
  .lib-featured-collection__card:focus-within .lib-featured-collection__img2 { opacity: 1; }
  .lib-featured-collection__card.is-sold-out .lib-featured-collection__media img { opacity: 0.6; }

  .lib-featured-collection__badge {
    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;
    pointer-events: none;
  }
  .lib-featured-collection__badge--sold-out {
    background: var(--lib-bg);
    color: var(--lib-text);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lib-text) 20%, transparent);
  }

  .lib-featured-collection__body { display: flex; flex: 1; flex-direction: column; gap: 0.3rem; padding-top: 0.9rem; }
  .lib-featured-collection[data-card='card'] .lib-featured-collection__body { padding: 0.9rem 1rem 1rem; }
  .lib-featured-collection__vendor {
    margin: 0;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.6;
  }
  .lib-featured-collection__title { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.3; }
  .lib-featured-collection__link { color: inherit; text-decoration: none; }
  /* The title link covers the whole card; the quick add button sits above it. */
  .lib-featured-collection__link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: var(--lib-radius-card); }
  .lib-featured-collection__link:hover { text-decoration: underline; text-underline-offset: 0.2em; }
  .lib-featured-collection__link:focus-visible { outline: none; }
  .lib-featured-collection__link:focus-visible::after { outline: 2px solid var(--lib-accent); outline-offset: 3px; }
  .lib-featured-collection__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; margin: 0; font-size: 0.9375rem; }
  .lib-featured-collection__price-now--sale { font-weight: 600; }
  .lib-featured-collection__price-was { opacity: 0.55; font-size: 0.875rem; }
  .lib-featured-collection__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .lib-featured-collection__cta { position: relative; z-index: 2; margin-top: auto; padding-top: 0.75rem; }
  .lib-featured-collection__form { margin: 0; }
  .lib-featured-collection__add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.6rem 1rem;
    border: 1.5px solid var(--lib-text);
    border-radius: min(var(--lib-radius-card), 999px);
    background: transparent;
    color: var(--lib-text);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  .lib-featured-collection__add:hover:not(:disabled) { background: var(--lib-accent); border-color: var(--lib-accent); color: var(--lib-accent-text); }
  .lib-featured-collection__add:focus-visible { outline: 2px solid var(--lib-accent); outline-offset: 2px; }
  .lib-featured-collection__add:disabled,
  .lib-featured-collection__add[aria-disabled='true'] { opacity: 0.45; cursor: default; }

  @media (prefers-reduced-motion: reduce) {
    .lib-featured-collection__img,
    .lib-featured-collection__img2,
    .lib-featured-collection__arrow,
    .lib-featured-collection__add { transition: none; }
    .lib-featured-collection__card:hover .lib-featured-collection__img { transform: none; }
  }
{% endstylesheet %}

{% javascript %}
  if (!customElements.get('lib-featured-collection-slider')) {
    customElements.define(
      'lib-featured-collection-slider',
      class extends HTMLElement {
        connectedCallback() {
          this.track = this.querySelector('[data-track]');
          this.buttons = this.querySelectorAll('.lib-featured-collection__arrow');
          if (!this.track || !this.buttons.length || this.observer) return;
          this.onScroll = () => this.update();
          this.track.addEventListener('scroll', this.onScroll, { passive: true });
          this.buttons.forEach((button) => button.addEventListener('click', () => this.step(Number(button.dataset.dir))));
          this.observer = new ResizeObserver(() => this.update());
          this.observer.observe(this.track);
          this.update();
        }

        disconnectedCallback() {
          this.observer?.disconnect();
          this.observer = null;
          this.track?.removeEventListener('scroll', this.onScroll);
        }

        step(dir) {
          // One page of visible cards per click.
          const item = this.track.firstElementChild;
          const gap = parseFloat(getComputedStyle(this.track).columnGap) || 0;
          const width = item ? item.getBoundingClientRect().width + gap : this.track.clientWidth;
          const per = Math.max(1, Math.floor((this.track.clientWidth + gap) / width));
          const rtl = getComputedStyle(this.track).direction === 'rtl';
          const smooth = !matchMedia('(prefers-reduced-motion: reduce)').matches;
          this.track.scrollBy({ left: dir * per * width * (rtl ? -1 : 1), behavior: smooth ? 'smooth' : 'auto' });
        }

        update() {
          const max = this.track.scrollWidth - this.track.clientWidth;
          const x = Math.abs(this.track.scrollLeft);
          this.toggleAttribute('data-overflow', max > 2);
          const [prev, next] = this.buttons;
          if (prev) prev.disabled = x <= 2;
          if (next) next.disabled = x >= max - 2;
        }
      }
    );
  }
{% endjavascript %}

{% schema %}
{
  "name": "Lib · Featured collection",
  "tag": "section",
  "class": "lib-section",
  "settings": [
    { "type": "header", "content": "Content" },
    { "type": "inline_richtext", "id": "heading", "label": "Heading", "default": "New in for the <em>table</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>Stoneware, linen and beeswax, made in small batches.</p>" },
    { "type": "collection", "id": "collection", "label": "Collection", "info": "In the theme editor a blank collection shows placeholder cards; on the live store the section is hidden until you pick one." },
    { "type": "range", "id": "products_to_show", "label": "Products to show", "min": 2, "max": 24, "step": 1, "default": 8 },

    { "type": "header", "content": "Button" },
    { "type": "text", "id": "view_all_label", "label": "\"View all\" label", "info": "Links to the collection. Leave blank to hide.", "default": "View all" },
    {
      "type": "select",
      "id": "view_all_style",
      "label": "\"View all\" style",
      "options": [
        { "value": "primary", "label": "Solid" },
        { "value": "outline", "label": "Outline" },
        { "value": "text", "label": "Text link" }
      ],
      "default": "text"
    },

    { "type": "header", "content": "Product cards" },
    {
      "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_style",
      "label": "Card style",
      "options": [
        { "value": "plain", "label": "Plain" },
        { "value": "card", "label": "Card with background" }
      ],
      "default": "plain"
    },
    { "type": "checkbox", "id": "show_secondary_image", "label": "Show second image on hover", "info": "Uses the product's second media item.", "default": true },
    { "type": "checkbox", "id": "show_vendor", "label": "Show vendor", "default": false },
    { "type": "text", "id": "sale_label", "label": "Sale badge", "info": "Shown when the compare-at price is higher than the price. Leave blank to hide.", "default": "Sale" },
    { "type": "text", "id": "sold_out_label", "label": "Sold out badge", "info": "Leave blank to hide.", "default": "Sold out" },
    { "type": "checkbox", "id": "show_quick_add", "label": "Show quick add button", "info": "Products without options are added to the cart directly; products with options link to the product page.", "default": true },
    { "type": "text", "id": "quick_add_label", "label": "Quick add label", "default": "Quick add", "visible_if": "{{ section.settings.show_quick_add }}" },
    { "type": "text", "id": "choose_label", "label": "Label for products with options", "default": "Choose options", "visible_if": "{{ section.settings.show_quick_add }}" },
    { "type": "range", "id": "card_radius", "label": "Corner radius", "min": 0, "max": 32, "step": 2, "unit": "px", "default": 12 },

    { "type": "header", "content": "Layout" },
    {
      "type": "select",
      "id": "layout",
      "label": "Layout",
      "options": [
        { "value": "grid", "label": "Grid" },
        { "value": "carousel", "label": "Carousel (swipeable row)" }
      ],
      "default": "carousel"
    },
    { "type": "range", "id": "columns", "label": "Columns on desktop", "info": "Tablets show up to 3.", "min": 2, "max": 6, "step": 1, "default": 4 },
    {
      "type": "select",
      "id": "columns_mobile",
      "label": "Columns on mobile",
      "options": [
        { "value": "1", "label": "1" },
        { "value": "2", "label": "2" }
      ],
      "default": "2"
    },
    { "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 (badges, buttons on hover)", "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 == 'card' }}" },

    { "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." }
  ],
  "presets": [
    {
      "name": "Lib · Featured collection"
    }
  ]
}
{% 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.