# Hero banner: ücretsiz Shopify bölümü

> Üzerinde üst başlık, başlık, metin ve iki düğme olan tam genişlik görsel banner; ayrı mobil görsel, katman, dokuz içerik konumu ve cihaza göre yükseklik.

Hero banner, tam genişlikte bir görselin üzerine üst başlık, başlık, metin ve en fazla iki düğme yerleştiren ücretsiz bir Shopify bölümüdür. Ayrı bir mobil görsel, ayarlanabilir bir katman, masaüstünde dokuz ve mobilde üç içerik konumu ve cihaza göre yükseklik sunar; Online Store 2.0 temalarında uygulama olmadan çalışır.

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

## Ne işe yarar

- Sezonluk bir seçki ya da yeni bir koleksiyon için ana sayfa açılışı
- Bir açılış sayfasının ya da koleksiyon şablonunun en üstünde kampanya bannerı
- Düğmesiz, bir indirime ya da lookbook’a bağlanan tek tıklanabilir görsel banner

## Tema düzenleyici ayarları

Bölüm tema düzenleyicide “Lib · Hero banner” 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 |
| --- | --- | --- | --- | --- |
| `eyebrow` | `text` | Eyebrow | The autumn edit |  |
| `heading` | `inline_richtext` | Heading | `Slow mornings, <em>warm</em> rooms` |  |
| `heading_tag` | `select` | Heading tag | h2 | `h1`, `h2`, `h3`, `p` |
| `heading_size` | `select` | Heading size | xlarge | `small`, `medium`, `large`, `xlarge` |
| `text` | `richtext` | Text | `<p>Washed linen, hand-thrown stoneware and throws in clay and oat. Pieces made to be lived with.</p>` |  |

### Image

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `image` | `image_picker` | Desktop image | – |  |
| `image_mobile` | `image_picker` | Mobile image | – |  |
| `overlay_color` | `color` | Overlay color | #1C1917 |  |
| `overlay_opacity` | `range` | Overlay opacity | `30` | 0–90 %, step 5 |
| `height` | `select` | Height on desktop | large | `small`, `medium`, `large`, `full`, `adapt` |
| `height_mobile` | `select` | Height on mobile | large | `small`, `medium`, `large`, `full`, `adapt` |

### Buttons

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `button_label` | `text` | First button label | Shop the edit |  |
| `button_url` | `url` | First button link | – |  |
| `button_style` | `select` | First button style | primary | `primary`, `outline`, `text` |
| `button_new_tab` | `checkbox` | Open first link in a new tab | `false` |  |
| `button2_label` | `text` | Second button label | Visit the journal |  |
| `button2_url` | `url` | Second button link | – |  |
| `button2_style` | `select` | Second button style | outline | `primary`, `outline`, `text` |
| `button2_new_tab` | `checkbox` | Open second link in a new tab | `false` |  |
| `banner_url` | `url` | Whole banner link | – |  |

### Layout

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `section_width` | `select` | Width | full | `full`, `page` |
| `corner_radius` | `range` | Corner radius | `16` | 0–40 px, step 2 |
| `content_position` | `select` | Content position on desktop | middle-left | `top-left`, `top-center`, `top-right`, `middle-left`, `middle-center`, `middle-right`, `bottom-left`, `bottom-center`, `bottom-right` |
| `content_position_mobile` | `select` | Content position on mobile | bottom | `top`, `middle`, `bottom` |
| `text_alignment_mobile` | `select` | Text alignment on mobile | left | `left`, `center`, `right` |
| `content_width` | `range` | Content max width | `600` | 320–960 px, step 20 |
| `content_box` | `select` | Content box | none | `none`, `solid` |

### Colors

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `color_bg` | `color` | Background | #F5EFE6 |  |
| `color_text` | `color` | Text | #FFFFFF |  |
| `color_accent` | `color` | Solid button | #FFFFFF |  |
| `color_accent_text` | `color` | Text on solid button | #1C1917 |  |
| `color_box` | `color` | Content box | #F5EFE6 |  |
| `color_box_text` | `color` | Text in content box | #2A211B |  |

### Spacing and visibility

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `padding_top` | `range` | Top padding on desktop | `0` | 0–200 px, step 4 |
| `padding_bottom` | `range` | Bottom padding on desktop | `0` | 0–200 px, step 4 |
| `padding_top_mobile` | `range` | Top padding on mobile | `0` | 0–160 px, step 4 |
| `padding_bottom_mobile` | `range` | Bottom padding on mobile | `0` | 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` | Animate image and text on load | `true` |  |

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

### Mobilde farklı bir görsel kullanabilir miyim?

Evet. Bir mobil görsel ekleyin; 750px altında masaüstü görselinin yerini alır ve her biri tema düzenleyicide belirlediğiniz odak noktasını kullanır. Mobil görsel yoksa masaüstü görseli sığacak şekilde kırpılır.

### Parlak bir fotoğrafta metni nasıl okunur tutarım?

Katman opaklığını artırın (yüzde 0 ile 90 arası, istediğiniz renkte) ya da içerik kutusunu kendi arka plan ve metin rengi olan dolu bir karta çevirin.

### "Adapt to image" yüksekliği ne yapar?

Banner sabit bir yükseklik yerine yüklenen görselin şeklini alır; mobil görsel varsa mobilde onun oranlarını kullanır. Metin bu şekilden uzunsa banner metni sığdıracak kadar büyür.

### Bannerın tamamı bir bağlantı olabilir mi?

Evet. İki düğme etiketini de boş bırakın ve banner bağlantısını doldurun; görselin tamamı tek bir bağlantı olur ve ekran okuyucular için başlıkla etiketlenir.

### Sayfayı yavaşlatır mı?

Bölüm hiç JavaScript içermez. Sayfadaki ilk iki bölümden biri olduğunda görsel hemen ve yüksek fetch önceliğiyle yüklenir; daha aşağıdaysa lazy-load ile yüklenir.

## Kaynak kod

### sections/lib-hero-banner.liquid

```liquid
{%- comment -%}
  MIT License · (c) 2026 Lintel · https://lintelagency.com/resources/shopify-sections
{%- endcomment -%}
{%- comment -%}
  Hero banner: full-bleed image with eyebrow, heading, text and two buttons over it.
  Separate desktop and mobile image, overlay color and opacity, nine content positions on desktop
  and three on mobile, height per device, optional solid content box, optional whole-banner link.
  No JavaScript.
  Depends on: snippets/lib-button.liquid, snippets/lib-image.liquid
{%- endcomment -%}

{%- liquid
  assign s = section.settings
  assign heading_tag = s.heading_tag | default: 'h2'
  assign eager = false
  if section.index <= 2
    assign eager = true
  endif

  assign has_buttons = false
  if s.button_label != blank or s.button2_label != blank
    assign has_buttons = true
  endif
  assign banner_link = false
  if has_buttons == false and s.banner_url != blank
    assign banner_link = true
  endif

  assign ratio_d = s.image | default: s.image_mobile
  assign ratio_m = s.image_mobile | default: s.image
  assign link_label = s.heading | strip_html | strip
  if link_label == blank
    assign link_label = s.eyebrow | strip
  endif
-%}

<div
  class="lib-hero-banner lib-hero-banner--{{ s.section_width }}"
  {% if s.anchor_id != blank %}
    id="{{ s.anchor_id | handleize }}"
  {% endif %}
  data-show="{{ s.show_on }}"
  data-height="{{ s.height }}"
  data-height-m="{{ s.height_mobile }}"
  {% if s.animate %}
    data-animate
  {% endif %}
  style="
    --lib-bg: {{ s.color_bg }};
    --lib-text: {{ s.color_text }};
    --lib-accent: {{ s.color_accent }};
    --lib-accent-text: {{ s.color_accent_text }};
    --lib-box: {{ s.color_box }};
    --lib-box-text: {{ s.color_box_text }};
    --lib-overlay: {{ s.overlay_color }};
    --lib-overlay-o: {{ s.overlay_opacity | divided_by: 100.0 }};
    --lib-content-w: {{ s.content_width }}px;
    --lib-radius-frame: {{ s.corner_radius }}px;
    {% if ratio_d != blank %}--lib-ratio: {{ ratio_d.width }} / {{ ratio_d.height }};{% endif %}
    {% if ratio_m != blank %}--lib-ratio-m: {{ ratio_m.width }} / {{ ratio_m.height }};{% endif %}
    --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-hero-banner__frame">
    <div class="lib-hero-banner__media">
      {%- render 'lib-image',
        image: s.image,
        image_mobile: s.image_mobile,
        class: 'lib-hero-banner__img',
        sizes: '100vw',
        eager: eager
      -%}
    </div>
    <div class="lib-hero-banner__overlay" aria-hidden="true"></div>

    {%- if banner_link -%}
      <a
        class="lib-hero-banner__link"
        href="{{ s.banner_url }}"
        {% if link_label != blank %}
          aria-label="{{ link_label | escape }}"
        {% endif %}
      ></a>
    {%- endif -%}

    <div
      class="lib-hero-banner__content"
      data-pos="{{ s.content_position }}"
      data-pos-m="{{ s.content_position_mobile }}"
      data-align-m="{{ s.text_alignment_mobile }}"
    >
      <div
        class="lib-hero-banner__box"
        data-box="{{ s.content_box }}"
        data-align="{{ s.content_position | split: '-' | last }}"
        data-align-m="{{ s.text_alignment_mobile }}"
      >
        {%- if s.eyebrow != blank -%}
          <p class="lib-hero-banner__eyebrow">{{ s.eyebrow | escape }}</p>
        {%- endif -%}

        {%- if s.heading != blank -%}
          <{{ heading_tag }} class="lib-hero-banner__heading lib-hero-banner__heading--{{ s.heading_size }}">
            {{- s.heading -}}
          </{{ heading_tag }}>
        {%- endif -%}

        {%- if s.text != blank -%}
          <div class="lib-hero-banner__text">{{ s.text }}</div>
        {%- endif -%}

        {%- if has_buttons -%}
          <div class="lib-hero-banner__actions">
            {%- render 'lib-button',
              label: s.button_label,
              url: s.button_url,
              style: s.button_style,
              new_tab: s.button_new_tab
            -%}
            {%- render 'lib-button',
              label: s.button2_label,
              url: s.button2_url,
              style: s.button2_style,
              new_tab: s.button2_new_tab,
              arrow: false
            -%}
          </div>
        {%- endif -%}
      </div>
    </div>
  </div>
</div>

{% stylesheet %}
  .lib-hero-banner {
    background-color: var(--lib-bg);
    color: var(--lib-text);
    padding: var(--lib-pt-m) 0 var(--lib-pb-m);
  }
  .lib-hero-banner--page { padding-inline: 1rem; }
  .lib-hero-banner__frame {
    position: relative;
    display: grid;
    min-height: 480px;
    isolation: isolate;
    background: color-mix(in srgb, var(--lib-text) 12%, #1c1917);
  }
  .lib-hero-banner--page .lib-hero-banner__frame {
    max-width: 1200px;
    margin-inline: auto;
    border-radius: var(--lib-radius-frame);
  }

  /* Height: mobile first, then desktop. "adapt" follows the image's own shape. */
  .lib-hero-banner[data-height-m='small'] .lib-hero-banner__frame { min-height: 360px; }
  .lib-hero-banner[data-height-m='medium'] .lib-hero-banner__frame { min-height: 480px; }
  .lib-hero-banner[data-height-m='large'] .lib-hero-banner__frame { min-height: 600px; }
  .lib-hero-banner[data-height-m='full'] .lib-hero-banner__frame { min-height: 100vh; min-height: 100svh; }
  .lib-hero-banner[data-height-m='adapt'] .lib-hero-banner__frame { min-height: auto; aspect-ratio: var(--lib-ratio-m, 4 / 5); }
  @media (min-width: 750px) {
    .lib-hero-banner {
      padding-top: var(--lib-pt);
      padding-bottom: var(--lib-pb);
    }
    .lib-hero-banner[data-height] .lib-hero-banner__frame { aspect-ratio: auto; }
    .lib-hero-banner[data-height='small'] .lib-hero-banner__frame { min-height: 440px; }
    .lib-hero-banner[data-height='medium'] .lib-hero-banner__frame { min-height: 600px; }
    .lib-hero-banner[data-height='large'] .lib-hero-banner__frame { min-height: 760px; }
    .lib-hero-banner[data-height='full'] .lib-hero-banner__frame { min-height: 100vh; min-height: 100svh; }
    .lib-hero-banner[data-height='adapt'] .lib-hero-banner__frame { min-height: auto; aspect-ratio: var(--lib-ratio, 16 / 9); }
  }

  /* Visibility */
  @media (max-width: 749px) {
    .lib-hero-banner[data-show='desktop'] { display: none; }
  }
  @media (min-width: 750px) {
    .lib-hero-banner[data-show='mobile'] { display: none; }
  }

  /* Media and overlay fill the frame; content sits on top. */
  .lib-hero-banner__media,
  .lib-hero-banner__overlay {
    position: absolute;
    inset: 0;
  }
  .lib-hero-banner__media { z-index: -2; overflow: hidden; border-radius: inherit; }
  .lib-hero-banner__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .lib-hero-banner__img:is(svg) { fill: color-mix(in srgb, #fff 18%, transparent); background: #57534e; }
  .lib-hero-banner__overlay {
    z-index: -1;
    border-radius: inherit;
    background: var(--lib-overlay);
    opacity: var(--lib-overlay-o);
    pointer-events: none;
  }

  /* Whole-banner link (only rendered when there are no buttons). */
  .lib-hero-banner__link {
    position: absolute;
    inset: 0;
    z-index: 2;
  }
  .lib-hero-banner__link:focus-visible {
    outline: 3px solid var(--lib-text);
    outline-offset: -6px;
  }

  /* Content position: mobile uses data-pos-m (top / middle / bottom), desktop the 9-way data-pos. */
  .lib-hero-banner__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
    padding: 2rem 1.25rem;
  }
  .lib-hero-banner__link ~ .lib-hero-banner__content { pointer-events: none; }
  .lib-hero-banner__content[data-pos-m='top'] { justify-content: flex-start; }
  .lib-hero-banner__content[data-pos-m='middle'] { justify-content: center; }
  .lib-hero-banner__content[data-pos-m='bottom'] { justify-content: flex-end; }
  .lib-hero-banner__content[data-align-m='left'] { align-items: flex-start; }
  .lib-hero-banner__content[data-align-m='center'] { align-items: center; }
  .lib-hero-banner__content[data-align-m='right'] { align-items: flex-end; }
  @media (min-width: 750px) {
    .lib-hero-banner__content {
      padding: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 5vw, 4.5rem);
    }
    .lib-hero-banner--full .lib-hero-banner__content {
      padding-inline: max(clamp(2rem, 5vw, 4.5rem), calc((100% - 1200px) / 2 + 1rem));
    }
    .lib-hero-banner__content[data-pos^='top'] { justify-content: flex-start; }
    .lib-hero-banner__content[data-pos^='middle'] { justify-content: center; }
    .lib-hero-banner__content[data-pos^='bottom'] { justify-content: flex-end; }
    .lib-hero-banner__content[data-pos$='left'] { align-items: flex-start; }
    .lib-hero-banner__content[data-pos$='center'] { align-items: center; }
    .lib-hero-banner__content[data-pos$='right'] { align-items: flex-end; }
  }

  /* Content box: transparent, or a solid card with its own colors. */
  .lib-hero-banner__box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: var(--lib-content-w);
    text-align: left;
  }
  .lib-hero-banner__box[data-box='solid'] {
    --lib-text: var(--lib-box-text);
    --lib-accent: var(--lib-box-text);
    --lib-accent-text: var(--lib-box);
    color: var(--lib-box-text);
    background: var(--lib-box);
    padding: clamp(1.5rem, 4vw, 2.75rem);
    border-radius: 4px;
    box-shadow: 0 24px 48px -28px rgb(0 0 0 / 0.45);
  }
  .lib-hero-banner__box[data-align-m='center'] { align-items: center; text-align: center; }
  .lib-hero-banner__box[data-align-m='right'] { align-items: flex-end; text-align: right; }
  @media (min-width: 750px) {
    .lib-hero-banner__box { width: auto; }
    .lib-hero-banner__box[data-align='left'] { align-items: flex-start; text-align: left; }
    .lib-hero-banner__box[data-align='center'] { align-items: center; text-align: center; }
    .lib-hero-banner__box[data-align='right'] { align-items: flex-end; text-align: right; }
  }

  .lib-hero-banner__eyebrow {
    margin: 0 0 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .lib-hero-banner__heading {
    margin: 0;
    font-size: clamp(2.25rem, 5vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }
  .lib-hero-banner__heading--small { font-size: clamp(1.75rem, 3vw, 2.5rem); }
  .lib-hero-banner__heading--medium { font-size: clamp(2rem, 4vw, 3.25rem); }
  .lib-hero-banner__heading--xlarge { font-size: clamp(2.75rem, 7vw, 5.5rem); }
  .lib-hero-banner__text {
    margin-top: 1.125rem;
    font-size: 1.0625rem;
    line-height: 1.6;
    opacity: 0.88;
  }
  .lib-hero-banner__text > :first-child { margin-top: 0; }
  .lib-hero-banner__text > :last-child { margin-bottom: 0; }
  .lib-hero-banner__text a { color: inherit; }
  .lib-hero-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.75rem;
  }
  .lib-hero-banner__box[data-align-m='center'] .lib-hero-banner__actions { justify-content: center; }
  .lib-hero-banner__box[data-align-m='right'] .lib-hero-banner__actions { justify-content: flex-end; }
  @media (min-width: 750px) {
    .lib-hero-banner__box[data-align='left'] .lib-hero-banner__actions { justify-content: flex-start; }
    .lib-hero-banner__box[data-align='center'] .lib-hero-banner__actions { justify-content: center; }
    .lib-hero-banner__box[data-align='right'] .lib-hero-banner__actions { justify-content: flex-end; }
  }

  /* Motion: image settles and copy rises once on load. */
  .lib-hero-banner[data-animate] .lib-hero-banner__img { animation: lib-hero-banner-settle 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .lib-hero-banner[data-animate] .lib-hero-banner__box > * { animation: lib-hero-banner-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .lib-hero-banner[data-animate] .lib-hero-banner__box > :nth-child(2) { animation-delay: 0.08s; }
  .lib-hero-banner[data-animate] .lib-hero-banner__box > :nth-child(3) { animation-delay: 0.16s; }
  .lib-hero-banner[data-animate] .lib-hero-banner__box > :nth-child(n + 4) { animation-delay: 0.24s; }
  @keyframes lib-hero-banner-settle {
    from { transform: scale(1.06); }
  }
  @keyframes lib-hero-banner-rise {
    from { opacity: 0; transform: translateY(14px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .lib-hero-banner[data-animate] .lib-hero-banner__img,
    .lib-hero-banner[data-animate] .lib-hero-banner__box > * { animation: none; }
  }
{% endstylesheet %}

{% schema %}
{
  "name": "Lib · Hero banner",
  "tag": "section",
  "class": "lib-section",
  "settings": [
    { "type": "header", "content": "Content" },
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "The autumn edit" },
    { "type": "inline_richtext", "id": "heading", "label": "Heading", "default": "Slow mornings, <em>warm</em> rooms" },
    {
      "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": "xlarge"
    },
    { "type": "richtext", "id": "text", "label": "Text", "default": "<p>Washed linen, hand-thrown stoneware and throws in clay and oat. Pieces made to be lived with.</p>" },

    { "type": "header", "content": "Image" },
    { "type": "image_picker", "id": "image", "label": "Desktop image", "info": "A wide image works best, at least 2000px across." },
    { "type": "image_picker", "id": "image_mobile", "label": "Mobile image", "info": "Optional. Shown below 750px; a portrait crop works best." },
    { "type": "color", "id": "overlay_color", "label": "Overlay color", "default": "#1C1917" },
    { "type": "range", "id": "overlay_opacity", "label": "Overlay opacity", "min": 0, "max": 90, "step": 5, "unit": "%", "default": 30 },
    {
      "type": "select",
      "id": "height",
      "label": "Height on desktop",
      "options": [
        { "value": "small", "label": "Small" },
        { "value": "medium", "label": "Medium" },
        { "value": "large", "label": "Large" },
        { "value": "full", "label": "Full screen" },
        { "value": "adapt", "label": "Adapt to image" }
      ],
      "default": "large"
    },
    {
      "type": "select",
      "id": "height_mobile",
      "label": "Height on mobile",
      "options": [
        { "value": "small", "label": "Small" },
        { "value": "medium", "label": "Medium" },
        { "value": "large", "label": "Large" },
        { "value": "full", "label": "Full screen" },
        { "value": "adapt", "label": "Adapt to image" }
      ],
      "default": "large"
    },

    { "type": "header", "content": "Buttons" },
    { "type": "text", "id": "button_label", "label": "First button label", "default": "Shop the edit" },
    { "type": "url", "id": "button_url", "label": "First button link" },
    {
      "type": "select",
      "id": "button_style",
      "label": "First button style",
      "options": [
        { "value": "primary", "label": "Solid" },
        { "value": "outline", "label": "Outline" },
        { "value": "text", "label": "Text link" }
      ],
      "default": "primary"
    },
    { "type": "checkbox", "id": "button_new_tab", "label": "Open first link in a new tab", "default": false },
    { "type": "text", "id": "button2_label", "label": "Second button label", "default": "Visit the journal" },
    { "type": "url", "id": "button2_url", "label": "Second button link" },
    {
      "type": "select",
      "id": "button2_style",
      "label": "Second button style",
      "options": [
        { "value": "primary", "label": "Solid" },
        { "value": "outline", "label": "Outline" },
        { "value": "text", "label": "Text link" }
      ],
      "default": "outline"
    },
    { "type": "checkbox", "id": "button2_new_tab", "label": "Open second link in a new tab", "default": false },
    {
      "type": "url",
      "id": "banner_url",
      "label": "Whole banner link",
      "info": "Used only when both button labels are empty: the entire banner becomes one link."
    },

    { "type": "header", "content": "Layout" },
    {
      "type": "select",
      "id": "section_width",
      "label": "Width",
      "options": [
        { "value": "full", "label": "Full width" },
        { "value": "page", "label": "Page width" }
      ],
      "default": "full"
    },
    {
      "type": "range",
      "id": "corner_radius",
      "label": "Corner radius",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "default": 16,
      "visible_if": "{{ section.settings.section_width == 'page' }}"
    },
    {
      "type": "select",
      "id": "content_position",
      "label": "Content position on desktop",
      "info": "Text aligns to the same side: left, center or right.",
      "options": [
        { "value": "top-left", "label": "Top left" },
        { "value": "top-center", "label": "Top center" },
        { "value": "top-right", "label": "Top right" },
        { "value": "middle-left", "label": "Middle left" },
        { "value": "middle-center", "label": "Middle center" },
        { "value": "middle-right", "label": "Middle right" },
        { "value": "bottom-left", "label": "Bottom left" },
        { "value": "bottom-center", "label": "Bottom center" },
        { "value": "bottom-right", "label": "Bottom right" }
      ],
      "default": "middle-left"
    },
    {
      "type": "select",
      "id": "content_position_mobile",
      "label": "Content position on mobile",
      "options": [
        { "value": "top", "label": "Top" },
        { "value": "middle", "label": "Middle" },
        { "value": "bottom", "label": "Bottom" }
      ],
      "default": "bottom"
    },
    {
      "type": "select",
      "id": "text_alignment_mobile",
      "label": "Text alignment on mobile",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "left"
    },
    { "type": "range", "id": "content_width", "label": "Content max width", "min": 320, "max": 960, "step": 20, "unit": "px", "default": 600 },
    {
      "type": "select",
      "id": "content_box",
      "label": "Content box",
      "options": [
        { "value": "none", "label": "None (text on image)" },
        { "value": "solid", "label": "Solid card" }
      ],
      "default": "none"
    },

    { "type": "header", "content": "Colors" },
    { "type": "color", "id": "color_bg", "label": "Background", "info": "Shows around the banner when it has padding or page width.", "default": "#F5EFE6" },
    { "type": "color", "id": "color_text", "label": "Text", "default": "#FFFFFF" },
    { "type": "color", "id": "color_accent", "label": "Solid button", "default": "#FFFFFF" },
    { "type": "color", "id": "color_accent_text", "label": "Text on solid button", "default": "#1C1917" },
    {
      "type": "color",
      "id": "color_box",
      "label": "Content box",
      "default": "#F5EFE6",
      "visible_if": "{{ section.settings.content_box == 'solid' }}"
    },
    {
      "type": "color",
      "id": "color_box_text",
      "label": "Text in content box",
      "info": "Also used for the solid button inside the box.",
      "default": "#2A211B",
      "visible_if": "{{ section.settings.content_box == 'solid' }}"
    },

    { "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": 0 },
    { "type": "range", "id": "padding_bottom", "label": "Bottom padding on desktop", "min": 0, "max": 200, "step": 4, "unit": "px", "default": 0 },
    { "type": "range", "id": "padding_top_mobile", "label": "Top padding on mobile", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 0 },
    { "type": "range", "id": "padding_bottom_mobile", "label": "Bottom padding on mobile", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 0 },
    {
      "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": "Animate image and text on load", "default": true }
  ],
  "presets": [
    {
      "name": "Lib · Hero banner"
    }
  ]
}
{% 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.