# Görsel banner ızgarası: ücretsiz Shopify bölümü

> Mozaik ya da tek sıra halinde iki ila dört bağlantılı kampanya kutusu; her kutuda masaüstü ve mobil görsel, başlık ve düğme. Kutunun her yeri tıklanır.

Görsel banner ızgarası, kampanyaları ve kategori girişlerini iki ila dört bağlantılı kutuda bir araya getiren ücretsiz bir Shopify bölümüdür: kutular, biri uzun olan bir mozaik ya da eşit bir sıra halinde dizilir. Her kutuda odak noktası ayarlanabilen bir masaüstü ve bir mobil görsel, bir başlık, kısa bir metin satırı ve düğme görünümlü bir etiket bulunur; metin, her fotoğrafta okunabilsin diye yumuşak bir gölgenin üzerinde durur ve konumu cihaza göre ayrı ayarlanır. Bağlantı verdiğiniz kutu tek bir bağlantı olarak çalışır, yani kutunun her yeri tıklanabilir; mobilde kutular alt alta dizilir ya da yana kaydırılan bir sıraya dönüşür. Online Store 2.0 temaları için yazılmış, uygulama gerektirmeyen düz Liquid ve CSS’tir.

- **Kategori:** Hero ve bannerlar
- **Kullanıldığı yerler:** Ana sayfa, Açılış sayfaları, Koleksiyon
- **Okuduğu veri:** Yalnızca içerik
- **Boyut:** 2 dosyada 23 KB, JavaScript yok
- **Lisans:** MIT, © 2026 Lintel
- **Sayfa:** https://lintelagency.com/tr/kaynaklar/shopify-bolumleri/gorsel-banner-izgarasi
- **Canlı demo:** https://lintelagency.com/resources/shopify-sections/demo/lib-image-banner-grid.html
- **Eklenme tarihi:** 2026-11-02

## Ne işe yarar

- Ana sayfada, hero’nun hemen altında üç dört ana kategoriye giriş
- Sezon kampanyası: indirimler, yeni gelenler ve hediyeler tek bir mozaikte
- Koleksiyon sayfasının üstünde, alt koleksiyonlara bağlantı veren bir giriş alanı

## Tema düzenleyici ayarları

Bölüm tema düzenleyicide “Lib · Image banner grid” 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 | – |  |
| `heading_tag` | `select` | Heading tag | h2 | `h1`, `h2`, `h3`, `p` |
| `heading_size` | `select` | Heading size | medium | `small`, `medium`, `large` |
| `text` | `richtext` | Intro text | – |  |
| `new_tab_label` | `text` | New tab notice (screen readers) | opens in a new tab |  |

### Tiles

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `layout` | `select` | Layout on desktop | mosaic | `mosaic`, `row` |
| `layout_mobile` | `select` | Layout on mobile | stack | `stack`, `row` |
| `tile_height` | `range` | Tile height on desktop | `300` | 200–640 px, step 10 |
| `tile_height_mobile` | `range` | Tile height on mobile | `280` | 160–520 px, step 10 |
| `gap` | `range` | Space between tiles | `12` | 0–32 px, step 2 |
| `radius` | `range` | Corner radius | `14` | 0–32 px, step 2 |
| `tile_heading_size` | `select` | Tile heading size | medium | `small`, `medium`, `large` |
| `overlay_opacity` | `range` | Shade behind tile text | `55` | 0–90 %, step 5 |
| `section_width` | `select` | Width | page | `page`, `full` |
| `text_alignment` | `select` | Heading alignment on desktop | left | `left`, `center` |
| `text_alignment_mobile` | `select` | Heading alignment on mobile | left | `left`, `center` |

### Colors

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `color_bg` | `color` | Background | #FFFFFF |  |
| `color_bg_gradient` | `color_background` | Background gradient | – |  |
| `color_text` | `color` | Text | #1F1B17 |  |
| `color_tile_text` | `color` | Tile text | #FFFFFF |  |
| `color_overlay` | `color` | Tile shade | #1F1B17 |  |
| `color_accent` | `color` | Solid button | #FFFFFF |  |
| `color_accent_text` | `color` | Solid button text | #1F1B17 |  |

### Spacing and visibility

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `padding_top` | `range` | Top padding on desktop | `48` | 0–200 px, step 4 |
| `padding_bottom` | `range` | Bottom padding on desktop | `48` | 0–200 px, step 4 |
| `padding_top_mobile` | `range` | Top padding on mobile | `32` | 0–160 px, step 4 |
| `padding_bottom_mobile` | `range` | Bottom padding on mobile | `32` | 0–160 px, step 4 |
| `show_on` | `select` | Show on | all | `all`, `desktop`, `mobile` |
| `anchor_id` | `text` | Anchor ID | – |  |

### Motion

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `animate` | `checkbox` | Zoom images slightly on hover | `true` |  |

## Bloklar

Toplamda en fazla 4 blok.

### Tile (`tile`)

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `image` | `image_picker` | Image | – |  |
| `image_mobile` | `image_picker` | Mobile image | – |  |
| `heading` | `text` | Heading | Tile heading |  |
| `text` | `text` | Text | – |  |
| `cta_label` | `text` | Button text | Shop now |  |
| `link` | `url` | Link | – |  |
| `new_tab` | `checkbox` | Open link in a new tab | `false` |  |
| `cta_style` | `select` | Button style | primary | `primary`, `outline`, `text` |
| `position` | `select` | Text position on desktop | bottom-left | `bottom-left`, `bottom-center`, `top-left`, `center` |
| `position_mobile` | `select` | Text position on mobile | bottom-left | `bottom-left`, `bottom-center`, `top-left`, `center` |

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

## Sık sorulan sorular

### Kaç kutu ekleyebilirim, nasıl dizilirler?

İki ila dört. Mozaik düzende üç ya da dört kutu varsa ilki solda uzun durur; dört kutuda sonuncusu sağ altta boydan boya uzanır. Eşit sıra düzeni kutuları yan yana dizer (dört kutuda tablette her satıra iki kutu düşer). Mobilde kutular alt alta dizilir ya da yana kaydırılır.

### Mobilde farklı görseller kullanabilir miyim?

Evet. Her kutunun bir masaüstü görseli ve isteğe bağlı bir mobil görseli vardır; ikisi de Shopify’ın görsel düzenleyicisinde belirlediğiniz odak noktasını dikkate alır, böylece görselin ana konusu her ekran boyutunda kadrajda kalır.

### Kutunun tamamı tıklanabiliyor mu?

Evet, kutuya bir bağlantı verdiyseniz: başlığı, metin satırı ve düğme etiketiyle kutunun tamamı tek bir bağlantıdır. Müşteriler kutunun her yerine dokunabilir, ekran okuyucular da tek ve anlaşılır bir bağlantı okur. Bağlantısız kutular, üzerinde metin olan düz görsellerdir.

### Beyaz metin açık renkli fotoğraflarda da okunur mu?

Metnin bulunduğu kenardan yükselen bir gölge okunurluğu korur; gölgenin rengini ve yoğunluğunu (%0–90) bölüm genelinde bir kez belirlersiniz. Metin konumunu ise her kutu ve her cihaz için ayrı ayarlarsınız.

## Kaynak kod

### sections/lib-image-banner-grid.liquid

```liquid
{%- comment -%}
  MIT License · (c) 2026 Lintel · https://lintelagency.com/resources/shopify-sections
{%- endcomment -%}
{%- comment -%}
  Image banner grid: two to four linked promo tiles in a mosaic or a row, for campaigns and
  category entry points. Each tile has a desktop and a mobile image (focal points honoured), a
  heading, a short line and a call to action, with the text placed per device over a soft
  gradient. A linked tile is one link, so the whole tile is the target. On mobile the tiles stack
  or become a swipeable row. Pure Liquid and CSS; no JavaScript.
  Depends on: snippets/lib-image.liquid
{%- endcomment -%}

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

<div
  class="lib-bgrid lib-bgrid--{{ s.section_width }}"
  {% if s.anchor_id != blank %}
    id="{{ s.anchor_id | handleize }}"
  {% endif %}
  data-show="{{ s.show_on }}"
  data-layout="{{ s.layout }}"
  data-layout-m="{{ s.layout_mobile }}"
  data-count="{{ count }}"
  {% if s.animate %}
    data-animate
  {% endif %}
  style="
    --lib-bg: {{ s.color_bg }};
    {% if s.color_bg_gradient != blank %}--lib-bg-image: {{ s.color_bg_gradient }};{% endif %}
    --lib-text: {{ s.color_text }};
    --lib-tile-text: {{ s.color_tile_text }};
    --lib-overlay: {{ s.color_overlay }};
    --lib-overlay-strength: {{ s.overlay_opacity }}%;
    --lib-accent: {{ s.color_accent }};
    --lib-accent-text: {{ s.color_accent_text }};
    --lib-h: {{ s.tile_height }}px;
    --lib-h-m: {{ s.tile_height_mobile }}px;
    --lib-gap: {{ s.gap }}px;
    --lib-radius: {{ s.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-bgrid__inner">
    {%- if s.heading != blank or s.text != blank -%}
      <header class="lib-bgrid__header" data-align="{{ s.text_alignment }}" data-align-m="{{ s.text_alignment_mobile }}">
        {%- if s.heading != blank -%}
          <{{ heading_tag }} class="lib-bgrid__heading lib-bgrid__heading--{{ s.heading_size }}">
            {{- s.heading -}}
          </{{ heading_tag }}>
        {%- endif -%}
        {%- if s.text != blank -%}
          <div class="lib-bgrid__text">{{ s.text }}</div>
        {%- endif -%}
      </header>
    {%- endif -%}

    {%- if count > 0 -%}
      <ul class="lib-bgrid__grid" role="list">
        {%- for block in section.blocks -%}
          {%- liquid
            assign b = block.settings
            assign wrapper = 'div'
            if b.link != blank
              assign wrapper = 'a'
            endif
            assign sizes = '(min-width: 990px) 50vw, 100vw'
            if s.layout == 'row' and count > 2
              assign sizes = '(min-width: 990px) 33vw, 100vw'
            endif
            assign eager = false
            if section.index == 1 and forloop.index <= 2
              assign eager = true
            endif
          -%}
          <li class="lib-bgrid__item" {{ block.shopify_attributes }}>
            <{{ wrapper }}
              class="lib-bgrid__tile"
              data-pos="{{ b.position }}"
              data-pos-m="{{ b.position_mobile }}"
              {% if b.link != blank %}
                href="{{ b.link }}"
                {% if b.new_tab %}
                  target="_blank" rel="noopener"
                {% endif %}
              {% endif %}
            >
              <div class="lib-bgrid__media">
                {%- render 'lib-image', image: b.image, image_mobile: b.image_mobile, class: 'lib-bgrid__img', sizes: sizes, eager: eager -%}
              </div>
              {%- if b.heading != blank or b.text != blank or b.cta_label != blank -%}
                <div class="lib-bgrid__content">
                  {%- if b.heading != blank -%}
                    <{{ tile_tag }} class="lib-bgrid__title lib-bgrid__title--{{ s.tile_heading_size }}">{{ b.heading | escape }}</{{ tile_tag }}>
                  {%- endif -%}
                  {%- if b.text != blank -%}
                    <p class="lib-bgrid__line">{{ b.text | escape }}</p>
                  {%- endif -%}
                  {%- if b.cta_label != blank -%}
                    <span class="lib-bgrid__cta lib-bgrid__cta--{{ b.cta_style }}">
                      {{- b.cta_label | escape -}}
                      <svg 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>
                    </span>
                  {%- endif -%}
                  {%- if b.link != blank and b.new_tab and s.new_tab_label != blank -%}
                    <span class="lib-bgrid__sr">({{ s.new_tab_label | escape }})</span>
                  {%- endif -%}
                </div>
              {%- endif -%}
            </{{ wrapper }}>
          </li>
        {%- endfor -%}
      </ul>
    {%- endif -%}
  </div>
</div>

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

  .lib-bgrid__header { max-width: 42rem; margin-bottom: clamp(1.25rem, 3vw, 2rem); }
  .lib-bgrid__heading {
    margin: 0;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  .lib-bgrid__heading--small { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
  .lib-bgrid__heading--large { font-size: clamp(2rem, 4vw, 3.25rem); }
  .lib-bgrid__text { margin-top: 0.6rem; font-size: 1rem; line-height: 1.6; opacity: 0.85; }
  .lib-bgrid__text > :first-child { margin-top: 0; }
  .lib-bgrid__text > :last-child { margin-bottom: 0; }
  .lib-bgrid__header[data-align='center'] { margin-inline: auto; text-align: center; }
  @media (max-width: 749px) {
    .lib-bgrid__header[data-align-m='left'] { margin-inline: 0; text-align: left; }
    .lib-bgrid__header[data-align-m='center'] { margin-inline: auto; text-align: center; }
  }

  /* Row: equal tiles side by side. Mosaic: the first tile spans two rows on the left. */
  .lib-bgrid__grid {
    display: grid;
    grid-template-columns: repeat(var(--lib-cols, 2), minmax(0, 1fr));
    grid-auto-rows: var(--lib-h);
    gap: var(--lib-gap);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .lib-bgrid[data-count='3'] .lib-bgrid__grid { --lib-cols: 3; }
  .lib-bgrid[data-count='4'] .lib-bgrid__grid { --lib-cols: 4; }
  .lib-bgrid[data-count='1'] .lib-bgrid__grid { --lib-cols: 1; }
  @media (min-width: 750px) {
    .lib-bgrid[data-layout='mosaic'][data-count='3'] .lib-bgrid__grid {
      grid-template-columns: 3fr 2fr;
      grid-auto-rows: calc((var(--lib-h) * 2 - var(--lib-gap)) / 2);
    }
    .lib-bgrid[data-layout='mosaic'][data-count='3'] .lib-bgrid__item:first-child { grid-row: span 2; }
    .lib-bgrid[data-layout='mosaic'][data-count='4'] .lib-bgrid__grid {
      grid-template-columns: 3fr 2fr 2fr;
      grid-auto-rows: calc((var(--lib-h) * 2 - var(--lib-gap)) / 2);
    }
    .lib-bgrid[data-layout='mosaic'][data-count='4'] .lib-bgrid__item:first-child { grid-row: span 2; }
    .lib-bgrid[data-layout='mosaic'][data-count='4'] .lib-bgrid__item:last-child { grid-column: span 2; }
  }
  @media (min-width: 750px) and (max-width: 989px) {
    .lib-bgrid[data-layout='row'][data-count='4'] .lib-bgrid__grid { --lib-cols: 2; }
  }
  @media (max-width: 749px) {
    .lib-bgrid__grid { grid-template-columns: 1fr; grid-auto-rows: var(--lib-h-m); }
    .lib-bgrid[data-layout-m='row'] .lib-bgrid__grid {
      grid-auto-flow: column;
      grid-template-columns: none;
      grid-auto-columns: 82%;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
    }
    .lib-bgrid[data-layout-m='row'] .lib-bgrid__item { scroll-snap-align: start; }
  }

  .lib-bgrid__item { display: flex; min-width: 0; min-height: 0; }
  .lib-bgrid__tile {
    position: relative;
    display: flex;
    flex: 1;
    overflow: hidden;
    border-radius: var(--lib-radius);
    color: var(--lib-tile-text);
    text-decoration: none;
    isolation: isolate;
  }
  .lib-bgrid__media { position: absolute; inset: 0; z-index: -2; background: color-mix(in srgb, var(--lib-text) 10%, transparent); }
  .lib-bgrid__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  svg.lib-bgrid__img { fill: color-mix(in srgb, var(--lib-text) 25%, transparent); }
  /* A gradient towards the text keeps it readable on any photo. */
  .lib-bgrid__tile::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, color-mix(in srgb, var(--lib-overlay) var(--lib-overlay-strength), transparent), transparent 70%);
  }
  .lib-bgrid__tile[data-pos^='top']::before { background: linear-gradient(to bottom, color-mix(in srgb, var(--lib-overlay) var(--lib-overlay-strength), transparent), transparent 70%); }
  .lib-bgrid__tile[data-pos='center']::before { background: color-mix(in srgb, var(--lib-overlay) calc(var(--lib-overlay-strength) * 0.7), transparent); }

  .lib-bgrid__content {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
    padding: clamp(1.125rem, 2.5vw, 2rem);
  }
  .lib-bgrid__tile[data-pos='bottom-left'] .lib-bgrid__content { margin-top: auto; align-items: flex-start; text-align: left; }
  .lib-bgrid__tile[data-pos='bottom-center'] .lib-bgrid__content { margin-top: auto; align-items: center; text-align: center; }
  .lib-bgrid__tile[data-pos='top-left'] .lib-bgrid__content { align-items: flex-start; text-align: left; }
  .lib-bgrid__tile[data-pos='center'] .lib-bgrid__content { margin-block: auto; align-items: center; text-align: center; }
  @media (max-width: 749px) {
    .lib-bgrid__tile[data-pos-m='bottom-left'] .lib-bgrid__content { margin-block: auto 0; align-items: flex-start; text-align: left; }
    .lib-bgrid__tile[data-pos-m='bottom-center'] .lib-bgrid__content { margin-block: auto 0; align-items: center; text-align: center; }
    .lib-bgrid__tile[data-pos-m='top-left'] .lib-bgrid__content { margin-block: 0 auto; align-items: flex-start; text-align: left; }
    .lib-bgrid__tile[data-pos-m='center'] .lib-bgrid__content { margin-block: auto; align-items: center; text-align: center; }
  }

  .lib-bgrid__title { margin: 0; font-size: clamp(1.25rem, 2vw, 1.625rem); line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
  .lib-bgrid__title--small { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); }
  .lib-bgrid__title--large { font-size: clamp(1.5rem, 2.8vw, 2.25rem); }
  .lib-bgrid__line { margin: 0; max-width: 32rem; font-size: 0.9375rem; line-height: 1.5; }
  .lib-bgrid__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    margin-top: 0.5rem;
    padding: 0.7em 1.25em;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
  }
  .lib-bgrid__cta--primary { background: var(--lib-accent); color: var(--lib-accent-text); }
  .lib-bgrid__cta--outline { box-shadow: inset 0 0 0 1.5px currentColor; }
  .lib-bgrid__cta--text { padding-inline: 0; text-decoration: underline; text-underline-offset: 0.25em; }
  .lib-bgrid__cta svg { transition: transform 0.25s ease; }
  .lib-bgrid__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  a.lib-bgrid__tile:focus-visible { outline: 3px solid var(--lib-accent); outline-offset: 3px; }
  @media (hover: hover) {
    a.lib-bgrid__tile:hover .lib-bgrid__cta svg { transform: translateX(3px); }
  }
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .lib-bgrid[data-animate] a.lib-bgrid__tile:hover .lib-bgrid__img { transform: scale(1.04); }
  }
  @media (prefers-reduced-motion: reduce) {
    .lib-bgrid__img,
    .lib-bgrid__cta svg { transition: none; }
  }
{% endstylesheet %}

{% schema %}
{
  "name": "Lib · Image banner grid",
  "tag": "section",
  "class": "lib-section",
  "max_blocks": 4,
  "settings": [
    { "type": "header", "content": "Content" },
    { "type": "inline_richtext", "id": "heading", "label": "Heading" },
    {
      "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" }
      ],
      "default": "medium"
    },
    { "type": "richtext", "id": "text", "label": "Intro text" },
    { "type": "text", "id": "new_tab_label", "label": "New tab notice (screen readers)", "default": "opens in a new tab" },

    { "type": "header", "content": "Tiles" },
    {
      "type": "select",
      "id": "layout",
      "label": "Layout on desktop",
      "info": "Mosaic makes the first tile tall when there are three or four tiles.",
      "options": [
        { "value": "mosaic", "label": "Mosaic" },
        { "value": "row", "label": "Equal row" }
      ],
      "default": "mosaic"
    },
    {
      "type": "select",
      "id": "layout_mobile",
      "label": "Layout on mobile",
      "options": [
        { "value": "stack", "label": "Stacked" },
        { "value": "row", "label": "Swipeable row" }
      ],
      "default": "stack"
    },
    { "type": "range", "id": "tile_height", "label": "Tile height on desktop", "min": 200, "max": 640, "step": 10, "unit": "px", "default": 300 },
    { "type": "range", "id": "tile_height_mobile", "label": "Tile height on mobile", "min": 160, "max": 520, "step": 10, "unit": "px", "default": 280 },
    { "type": "range", "id": "gap", "label": "Space between tiles", "min": 0, "max": 32, "step": 2, "unit": "px", "default": 12 },
    { "type": "range", "id": "radius", "label": "Corner radius", "min": 0, "max": 32, "step": 2, "unit": "px", "default": 14 },
    {
      "type": "select",
      "id": "tile_heading_size",
      "label": "Tile heading size",
      "options": [
        { "value": "small", "label": "Small" },
        { "value": "medium", "label": "Medium" },
        { "value": "large", "label": "Large" }
      ],
      "default": "medium"
    },
    { "type": "range", "id": "overlay_opacity", "label": "Shade behind tile text", "min": 0, "max": 90, "step": 5, "unit": "%", "default": 55 },
    {
      "type": "select",
      "id": "section_width",
      "label": "Width",
      "options": [
        { "value": "page", "label": "Page width" },
        { "value": "full", "label": "Full width" }
      ],
      "default": "page"
    },
    {
      "type": "select",
      "id": "text_alignment",
      "label": "Heading alignment on desktop",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" }
      ],
      "default": "left"
    },
    {
      "type": "select",
      "id": "text_alignment_mobile",
      "label": "Heading alignment on mobile",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" }
      ],
      "default": "left"
    },

    { "type": "header", "content": "Colors" },
    { "type": "color", "id": "color_bg", "label": "Background", "default": "#FFFFFF" },
    { "type": "color_background", "id": "color_bg_gradient", "label": "Background gradient", "info": "Optional. Covers the background color." },
    { "type": "color", "id": "color_text", "label": "Text", "default": "#1F1B17" },
    { "type": "color", "id": "color_tile_text", "label": "Tile text", "default": "#FFFFFF" },
    { "type": "color", "id": "color_overlay", "label": "Tile shade", "default": "#1F1B17" },
    { "type": "color", "id": "color_accent", "label": "Solid button", "default": "#FFFFFF" },
    { "type": "color", "id": "color_accent_text", "label": "Solid button text", "default": "#1F1B17" },

    { "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": 48 },
    { "type": "range", "id": "padding_bottom", "label": "Bottom padding on desktop", "min": 0, "max": 200, "step": 4, "unit": "px", "default": 48 },
    { "type": "range", "id": "padding_top_mobile", "label": "Top padding on mobile", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 32 },
    { "type": "range", "id": "padding_bottom_mobile", "label": "Bottom padding on mobile", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 32 },
    {
      "type": "select",
      "id": "show_on",
      "label": "Show on",
      "options": [
        { "value": "all", "label": "All devices" },
        { "value": "desktop", "label": "Desktop only" },
        { "value": "mobile", "label": "Mobile only" }
      ],
      "default": "all"
    },
    { "type": "text", "id": "anchor_id", "label": "Anchor ID", "info": "Optional. Link to this section with #your-id." },

    { "type": "header", "content": "Motion" },
    { "type": "checkbox", "id": "animate", "label": "Zoom images slightly on hover", "info": "Never when reduced motion is on.", "default": true }
  ],
  "blocks": [
    {
      "type": "tile",
      "name": "Tile",
      "settings": [
        { "type": "image_picker", "id": "image", "label": "Image" },
        { "type": "image_picker", "id": "image_mobile", "label": "Mobile image", "info": "Optional. Below 750px." },
        { "type": "text", "id": "heading", "label": "Heading", "default": "Tile heading" },
        { "type": "text", "id": "text", "label": "Text" },
        { "type": "text", "id": "cta_label", "label": "Button text", "default": "Shop now" },
        { "type": "url", "id": "link", "label": "Link", "info": "The whole tile becomes the link." },
        { "type": "checkbox", "id": "new_tab", "label": "Open link in a new tab", "default": false },
        {
          "type": "select",
          "id": "cta_style",
          "label": "Button style",
          "options": [
            { "value": "primary", "label": "Solid" },
            { "value": "outline", "label": "Outline" },
            { "value": "text", "label": "Text link" }
          ],
          "default": "primary"
        },
        {
          "type": "select",
          "id": "position",
          "label": "Text position on desktop",
          "options": [
            { "value": "bottom-left", "label": "Bottom left" },
            { "value": "bottom-center", "label": "Bottom center" },
            { "value": "top-left", "label": "Top left" },
            { "value": "center", "label": "Center" }
          ],
          "default": "bottom-left"
        },
        {
          "type": "select",
          "id": "position_mobile",
          "label": "Text position on mobile",
          "options": [
            { "value": "bottom-left", "label": "Bottom left" },
            { "value": "bottom-center", "label": "Bottom center" },
            { "value": "top-left", "label": "Top left" },
            { "value": "center", "label": "Center" }
          ],
          "default": "bottom-left"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Lib · Image banner grid",
      "blocks": [
        { "type": "tile", "settings": { "heading": "New season" } },
        { "type": "tile", "settings": { "heading": "Best sellers" } },
        { "type": "tile", "settings": { "heading": "Gifts" } }
      ]
    }
  ]
}
{% 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 %}
```

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