# İki sütunlu hero: ücretsiz Shopify bölümü

> İki sütunlu hero: rozet, başlık, destek metni, iki düğme, en fazla üç kısa istatistik ve iki yandan birinde görsel; mobil için ayrı görsel.

İki sütunlu hero, bir başlığı, destek metnini ve en fazla iki düğmeyi bir görselin yanına, isteğe bağlı istatistiklerle yerleştiren ücretsiz bir Shopify bölümüdür. Kendi odak noktası olan ayrı bir mobil görsel alır, boşluk ve hizalamayı cihaza göre ayarlar; Online Store 2.0 temalarında uygulama olmadan çalışır.

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

## Ne işe yarar

- Yeni bir koleksiyon ya da marka mesajı için ana sayfa açılışı
- Kampanya ya da ürün serisi açılış sayfası
- Metnin yanında görsel gereken Hakkımızda, Toptan satış ya da başka bir sayfa şablonunun üst kısmı

## Tema düzenleyici ayarları

Bölüm tema düzenleyicide “Lib · Hero split” 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` | Badge | New collection |  |
| `heading` | `inline_richtext` | Heading | `Made to be <em>worn</em>, every day` |  |
| `heading_tag` | `select` | Heading tag | h2 | `h1`, `h2`, `h3`, `p` |
| `heading_size` | `select` | Heading size | large | `small`, `medium`, `large`, `xlarge` |
| `text` | `richtext` | Text | `<p>Short supporting line that says what the store sells and why it is different.</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 | – |  |
| `image_position` | `select` | Image position on desktop | right | `right`, `left` |
| `image_ratio` | `select` | Image shape on desktop | square | `adapt`, `square`, `portrait`, `landscape` |
| `image_ratio_mobile` | `select` | Image shape on mobile | portrait | `adapt`, `square`, `portrait`, `landscape` |
| `mobile_order` | `select` | Order on mobile | text_first | `text_first`, `image_first` |
| `image_radius` | `range` | Image corner radius | `20` | 0–40 px, step 2 |

### Buttons

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `button_label` | `text` | First button label | Shop now |  |
| `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 | Our story |  |
| `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` |  |

### Layout

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `section_width` | `select` | Width | page | `page`, `full` |
| `text_alignment` | `text_alignment` | Text alignment on desktop | left |  |
| `text_alignment_mobile` | `select` | Text alignment on mobile | left | `left`, `center`, `right` |
| `vertical_alignment` | `select` | Text position next to the image | center | `start`, `center`, `end` |

### Colors

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `color_bg` | `color` | Background | #FAFAF9 |  |
| `color_bg_gradient` | `color_background` | Background gradient | – |  |
| `color_text` | `color` | Text | #0C0A09 |  |
| `color_accent` | `color` | Accent (solid button, badge dot) | #0C0A09 |  |
| `color_accent_text` | `color` | Text on accent | #FAFAF9 |  |

### Spacing and visibility

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

### Motion

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `animate` | `checkbox` | Animate text on load | `true` |  |

## Bloklar

Toplamda en fazla 3 blok.

### Stat (`stat`)

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `value` | `text` | Value | 4.9/5 |  |
| `label` | `text` | Label | Customer rating |  |

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

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

Evet. Bir mobil görsel ekleyin; 750px’ten dar ekranlarda gösterilir ve her görsel tema düzenleyicide belirlediğiniz odak noktasını korur. Mobil görsel yoksa masaüstü görseli her yerde kullanılır.

### Başlık H1 mi olmalı?

Yalnızca hero sayfanın ana başlığıysa. Başlık etiketi ayarı H1, H2, H3 ya da paragraf seçenekleri sunar ve varsayılan H2’dir; böylece temanızın zaten ürettiği bir başlıkla yarışmaz.

### 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, Shopify’ın ekranın ilk görünen kısmındaki en büyük görseli lazy-load etmeme önerisine uygun olarak, lazy-load ile yüklenir.

### Hangi temalarda çalışır?

JSON şablonları kullanan temalarda (Online Store 2.0). Bölüm kendi CSS’ini ve renk ayarlarını getirir, yazı tiplerini temanızdan alır.

## Kaynak kod

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

```liquid
{%- comment -%}
  MIT License · (c) 2026 Lintel · https://lintelagency.com/resources/shopify-sections
{%- endcomment -%}
{%- comment -%}
  Split hero: badge, headline, copy, two buttons, optional stats, image on one side.
  Separate desktop and mobile image, padding and alignment.
  Layout pattern adapted from shadcn/ui hero blocks; plain CSS, no Tailwind.
  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
-%}

<div
  class="lib-hero lib-hero--{{ s.image_position }} lib-hero--{{ s.section_width }}"
  {% if s.anchor_id != blank %}
    id="{{ s.anchor_id | handleize }}"
  {% endif %}
  data-show="{{ s.show_on }}"
  data-mobile-order="{{ s.mobile_order }}"
  data-valign="{{ s.vertical_alignment }}"
  {% 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-accent: {{ s.color_accent }};
    --lib-accent-text: {{ s.color_accent_text }};
    --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-radius-img: {{ s.image_radius }}px;
  "
>
  <div class="lib-hero__inner">
    <div class="lib-hero__copy" data-align="{{ s.text_alignment }}" data-align-m="{{ s.text_alignment_mobile }}">
      {%- if s.eyebrow != blank -%}
        <p class="lib-hero__badge"><span class="lib-hero__dot" aria-hidden="true"></span>{{ s.eyebrow | escape }}</p>
      {%- endif -%}

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

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

      {%- if s.button_label != blank or s.button2_label != blank -%}
        <div class="lib-hero__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 -%}

      {%- if section.blocks.size > 0 -%}
        <dl class="lib-hero__stats">
          {%- for block in section.blocks -%}
            <div class="lib-hero__stat" {{ block.shopify_attributes }}>
              <dt>{{ block.settings.label | escape }}</dt>
              <dd>{{ block.settings.value | escape }}</dd>
            </div>
          {%- endfor -%}
        </dl>
      {%- endif -%}
    </div>

    <div class="lib-hero__media" data-ratio="{{ s.image_ratio }}" data-ratio-m="{{ s.image_ratio_mobile }}">
      {%- render 'lib-image',
        image: s.image,
        image_mobile: s.image_mobile,
        class: 'lib-hero__img',
        sizes: '(min-width: 990px) 50vw, 100vw',
        eager: eager
      -%}
    </div>
  </div>
</div>

{% stylesheet %}
  .lib-hero {
    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-hero__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
  }
  .lib-hero--full .lib-hero__inner { max-width: none; }
  @media (max-width: 749px) {
    .lib-hero { padding-top: var(--lib-pt-m); padding-bottom: var(--lib-pb-m); }
    .lib-hero[data-show='desktop'] { display: none; }
    .lib-hero[data-mobile-order='image_first'] .lib-hero__media { order: -1; }
  }
  @media (min-width: 750px) {
    .lib-hero[data-show='mobile'] { display: none; }
  }
  @media (min-width: 990px) {
    .lib-hero__inner { grid-template-columns: 1fr 1fr; }
    .lib-hero--left .lib-hero__media { order: -1; }
    .lib-hero[data-valign='start'] .lib-hero__inner { align-items: start; }
    .lib-hero[data-valign='center'] .lib-hero__inner { align-items: center; }
    .lib-hero[data-valign='end'] .lib-hero__inner { align-items: end; }
  }

  /* Alignment: desktop, then mobile override. */
  .lib-hero__copy { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
  .lib-hero__copy[data-align='center'] { align-items: center; text-align: center; }
  .lib-hero__copy[data-align='right'] { align-items: flex-end; text-align: right; }
  @media (max-width: 749px) {
    .lib-hero__copy[data-align-m='left'] { align-items: flex-start; text-align: left; }
    .lib-hero__copy[data-align-m='center'] { align-items: center; text-align: center; }
    .lib-hero__copy[data-align-m='right'] { align-items: flex-end; text-align: right; }
  }

  .lib-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.25rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
    background: color-mix(in srgb, var(--lib-text) 7%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lib-text) 14%, transparent);
  }
  .lib-hero__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--lib-accent);
    animation: lib-hero-pulse 2s infinite;
  }
  @keyframes lib-hero-pulse {
    0% { box-shadow: 0 0 0 0 var(--lib-accent); }
    70%, 100% { box-shadow: 0 0 0 6px transparent; }
  }
  .lib-hero__heading {
    margin: 0;
    font-size: clamp(2.25rem, 5vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    text-wrap: balance;
  }
  .lib-hero__heading--small { font-size: clamp(1.75rem, 3vw, 2.5rem); }
  .lib-hero__heading--medium { font-size: clamp(2rem, 4vw, 3.25rem); }
  .lib-hero__heading--xlarge { font-size: clamp(2.75rem, 7vw, 5.5rem); }
  .lib-hero__text {
    margin-top: 1.25rem;
    max-width: 34rem;
    font-size: 1.125rem;
    line-height: 1.6;
    opacity: 0.75;
  }
  .lib-hero__text > :first-child { margin-top: 0; }
  .lib-hero__text > :last-child { margin-bottom: 0; }
  .lib-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
  .lib-hero__copy[data-align='center'] .lib-hero__actions { justify-content: center; }
  .lib-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    margin: 2.5rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid color-mix(in srgb, var(--lib-text) 12%, transparent);
  }
  .lib-hero__stat { display: flex; flex-direction: column-reverse; }
  .lib-hero__stat dd { margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; }
  .lib-hero__stat dt { font-size: 0.85rem; opacity: 0.65; }

  /* Media: ratio per device; "adapt" keeps the image's own shape. */
  .lib-hero__media {
    position: relative;
    border-radius: var(--lib-radius-img);
    overflow: hidden;
    background: color-mix(in srgb, var(--lib-text) 6%, transparent);
  }
  .lib-hero__media[data-ratio='square'] { aspect-ratio: 1; }
  .lib-hero__media[data-ratio='portrait'] { aspect-ratio: 4 / 5; }
  .lib-hero__media[data-ratio='landscape'] { aspect-ratio: 3 / 2; }
  @media (max-width: 749px) {
    .lib-hero__media[data-ratio-m='square'] { aspect-ratio: 1; }
    .lib-hero__media[data-ratio-m='portrait'] { aspect-ratio: 4 / 5; }
    .lib-hero__media[data-ratio-m='landscape'] { aspect-ratio: 3 / 2; }
    .lib-hero__media[data-ratio-m='adapt'] { aspect-ratio: auto; }
  }
  .lib-hero__img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .lib-hero__media[data-ratio='adapt'] .lib-hero__img { height: auto; }
  .lib-hero__img:is(svg) { fill: color-mix(in srgb, var(--lib-text) 25%, transparent); }

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

{% schema %}
{
  "name": "Lib · Hero split",
  "tag": "section",
  "class": "lib-section",
  "max_blocks": 3,
  "settings": [
    { "type": "header", "content": "Content" },
    { "type": "text", "id": "eyebrow", "label": "Badge", "default": "New collection" },
    { "type": "inline_richtext", "id": "heading", "label": "Heading", "default": "Made to be <em>worn</em>, every day" },
    {
      "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": "large"
    },
    { "type": "richtext", "id": "text", "label": "Text", "default": "<p>Short supporting line that says what the store sells and why it is different.</p>" },

    { "type": "header", "content": "Image" },
    { "type": "image_picker", "id": "image", "label": "Desktop image" },
    { "type": "image_picker", "id": "image_mobile", "label": "Mobile image", "info": "Optional. Shown below 750px; a portrait crop works best." },
    {
      "type": "select",
      "id": "image_position",
      "label": "Image position on desktop",
      "options": [
        { "value": "right", "label": "Right" },
        { "value": "left", "label": "Left" }
      ],
      "default": "right"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "label": "Image shape on desktop",
      "options": [
        { "value": "adapt", "label": "Adapt to image" },
        { "value": "square", "label": "Square" },
        { "value": "portrait", "label": "Portrait" },
        { "value": "landscape", "label": "Landscape" }
      ],
      "default": "square"
    },
    {
      "type": "select",
      "id": "image_ratio_mobile",
      "label": "Image shape on mobile",
      "options": [
        { "value": "adapt", "label": "Adapt to image" },
        { "value": "square", "label": "Square" },
        { "value": "portrait", "label": "Portrait" },
        { "value": "landscape", "label": "Landscape" }
      ],
      "default": "portrait"
    },
    {
      "type": "select",
      "id": "mobile_order",
      "label": "Order on mobile",
      "options": [
        { "value": "text_first", "label": "Text first" },
        { "value": "image_first", "label": "Image first" }
      ],
      "default": "text_first"
    },
    { "type": "range", "id": "image_radius", "label": "Image corner radius", "min": 0, "max": 40, "step": 2, "unit": "px", "default": 20 },

    { "type": "header", "content": "Buttons" },
    { "type": "text", "id": "button_label", "label": "First button label", "default": "Shop now" },
    { "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": "Our story" },
    { "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": "header", "content": "Layout" },
    {
      "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": "Text alignment on desktop", "default": "left" },
    {
      "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": "select",
      "id": "vertical_alignment",
      "label": "Text position next to the image",
      "options": [
        { "value": "start", "label": "Top" },
        { "value": "center", "label": "Middle" },
        { "value": "end", "label": "Bottom" }
      ],
      "default": "center"
    },

    { "type": "header", "content": "Colors" },
    { "type": "color", "id": "color_bg", "label": "Background", "default": "#FAFAF9" },
    { "type": "color_background", "id": "color_bg_gradient", "label": "Background gradient", "info": "Optional. Covers the background color." },
    { "type": "color", "id": "color_text", "label": "Text", "default": "#0C0A09" },
    { "type": "color", "id": "color_accent", "label": "Accent (solid button, badge dot)", "default": "#0C0A09" },
    { "type": "color", "id": "color_accent_text", "label": "Text on accent", "default": "#FAFAF9" },

    { "type": "header", "content": "Spacing and visibility" },
    { "type": "range", "id": "padding_top", "label": "Top padding on desktop", "min": 0, "max": 200, "step": 4, "unit": "px", "default": 96 },
    { "type": "range", "id": "padding_bottom", "label": "Bottom padding on desktop", "min": 0, "max": 200, "step": 4, "unit": "px", "default": 96 },
    { "type": "range", "id": "padding_top_mobile", "label": "Top padding on mobile", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 48 },
    { "type": "range", "id": "padding_bottom_mobile", "label": "Bottom padding on mobile", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 56 },
    {
      "type": "select",
      "id": "show_on",
      "label": "Show on",
      "options": [
        { "value": "all", "label": "All devices" },
        { "value": "desktop", "label": "Desktop only" },
        { "value": "mobile", "label": "Mobile only" }
      ],
      "default": "all"
    },
    { "type": "text", "id": "anchor_id", "label": "Anchor ID", "info": "Optional. Link to this section with #your-id." },

    { "type": "header", "content": "Motion" },
    { "type": "checkbox", "id": "animate", "label": "Animate text on load", "default": true }
  ],
  "blocks": [
    {
      "type": "stat",
      "name": "Stat",
      "settings": [
        { "type": "text", "id": "value", "label": "Value", "default": "4.9/5" },
        { "type": "text", "id": "label", "label": "Label", "default": "Customer rating" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Lib · Hero split",
      "blocks": [
        { "type": "stat", "settings": { "value": "4.9/5", "label": "Customer rating" } },
        { "type": "stat", "settings": { "value": "30 days", "label": "Free returns" } }
      ]
    }
  ]
}
{% endschema %}
```

### 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 %}
```

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