# Ekibimiz: ücretsiz Shopify bölümü

> Fotoğraf, ad, görev, kısa biyografi ve e-posta ya da profil bağlantılı ekip kartları; 2–5 sütun, dikdörtgen ya da yuvarlak fotoğraf. Hakkımızda sayfaları için.

Ekibimiz, mağazanızın arkasındaki insanları tanıtan ücretsiz bir Shopify bölümüdür: fotoğraf, ad, görev, kısa bir biyografi ve isteğe bağlı e-posta ve profil bağlantısı (Instagram, portfolyo, LinkedIn) içeren kartlar. Fotoğraflar dikey, kare ya da yuvarlak olabilir; her birine ayrı bir mobil fotoğraf ve odak noktası verebilirsiniz. Kişiler masaüstünde iki ila beş, mobilde bir ya da iki sütun halinde, düz ya da kart stilinde dizilir. Her kişi, sırasını değiştirebileceğiniz bir bloktur. Online Store 2.0 temaları için yazılmış, uygulama gerektirmeyen düz Liquid ve CSS’tir.

- **Kategori:** İçerik ve hikâye anlatımı
- **Kullanıldığı yerler:** Hakkımızda, İletişim, Açılış sayfaları
- **Okuduğu veri:** Yalnızca içerik
- **Boyut:** 2 dosyada 17 KB, JavaScript yok
- **Lisans:** MIT, © 2026 Lintel
- **Sayfa:** https://lintelagency.com/tr/kaynaklar/shopify-bolumleri/ekibimiz
- **Canlı demo:** https://lintelagency.com/resources/shopify-sections/demo/lib-team.html
- **Eklenme tarihi:** 2026-11-02

## Ne işe yarar

- Küçük bir markanın arkasındaki yüzleri ve isimleri tanıtan bir Hakkımızda sayfası
- Siparişler, toptan satış ve basın için kime ulaşılacağını gösteren bir iletişim sayfası
- Birden çok zanaatkârla çalışan markalar için bir üreticiler sayfası

## Tema düzenleyici ayarları

Bölüm tema düzenleyicide “Lib · Team” 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 | Meet the team |  |
| `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 |  |

### Layout

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `columns` | `range` | Columns on desktop | `4` | 2–5, step 1 |
| `columns_mobile` | `range` | Columns on mobile | `2` | 1–2, step 1 |
| `image_shape` | `select` | Photo shape | portrait | `portrait`, `square`, `circle` |
| `card_style` | `select` | Card style | plain | `plain`, `card` |
| `section_width` | `select` | Width | page | `page`, `full` |
| `text_alignment` | `select` | Alignment on desktop | left | `left`, `center` |
| `text_alignment_mobile` | `select` | 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_accent` | `color` | Accent (roles, focus) | #7A5A3A |  |
| `color_card` | `color` | Card background | #FAF6F1 |  |

### Spacing and visibility

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

### Motion

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `animate` | `checkbox` | Fade cards in on scroll | `false` |  |

## Bloklar

Toplamda en fazla 24 blok.

### Person (`member`)

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `image` | `image_picker` | Photo | – |  |
| `image_mobile` | `image_picker` | Mobile photo | – |  |
| `name` | `text` | Name | Name |  |
| `role` | `text` | Role | Role |  |
| `bio` | `richtext` | Short bio | – |  |
| `email` | `text` | Email | – |  |
| `link_label` | `text` | Link text | – |  |
| `link_url` | `url` | Link | – |  |
| `link_new_tab` | `checkbox` | Open link in a new tab | `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-team.liquid` adında yeni bir dosya ekleyin, aşağıdaki kaynak koddan `sections/lib-team.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 · Team** 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-team.liquid https://lintelagency.com/resources/shopify-sections/files/lib-team.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-team.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-team.liquid](https://lintelagency.com/resources/shopify-sections/files/lib-team.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ç kişi ekleyebilirim?

En çok 24; her kişi bir bloktur. Sıralamayı tema düzenleyicide blokları sürükleyerek değiştirebilirsiniz.

### Fotoğrafları yuvarlak gösterebilir miyim?

Evet. Bölümün tamamı için dikey (4:5), kare ya da yuvarlak biçimi seçin. Her fotoğraf odak noktasını dikkate alır; böylece kırpıldığında da yüzler kadrajda kalır.

### E-posta adresleri tıklanabilir mi?

Evet, e-posta adresi mailto: bağlantısına dönüşür. Profil bağlantısı, yazdığınız metinle (örneğin Instagram) görünür ve isteğe bağlı olarak, ekran okuyuculara bildirilerek yeni sekmede açılır.

### Yapısı erişilebilir mi?

Evet. Ekip bir liste olarak oluşturulur; her kişi, bölüm başlığının altında kendi adını başlık olarak taşıyan ayrı bir makale (article) öğesidir. Her fotoğrafın alternatif metnini görselin ayrıntılarına girin.

## Kaynak kod

### sections/lib-team.liquid

```liquid
{%- comment -%}
  MIT License · (c) 2026 Lintel · https://lintelagency.com/resources/shopify-sections
{%- endcomment -%}
{%- comment -%}
  Team: people cards with photo (separate mobile photo, focal points), name, role, a short bio and
  optional email and profile links, for About and Meet the team pages. Photos can be rectangles or
  circles. 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 name_tag = 'h3'
  if heading_tag == 'h3' or heading_tag == 'p'
    assign name_tag = 'h4'
  endif
  assign cols = s.columns | plus: 0
  assign img_vw = 100 | divided_by: cols
  assign img_sizes = '(min-width: 990px) ' | append: img_vw | append: 'vw, 50vw'
-%}

<div
  class="lib-team lib-team--{{ s.section_width }}"
  {% if s.anchor_id != blank %}
    id="{{ s.anchor_id | handleize }}"
  {% endif %}
  data-show="{{ s.show_on }}"
  data-shape="{{ s.image_shape }}"
  data-style="{{ s.card_style }}"
  {% 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-card: {{ s.color_card }};
    --lib-cols: {{ cols }};
    --lib-cols-m: {{ s.columns_mobile }};
    --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-team__inner" data-align="{{ s.text_alignment }}" data-align-m="{{ s.text_alignment_mobile }}">
    {%- if s.heading != blank or s.text != blank -%}
      <header class="lib-team__header">
        {%- if s.heading != blank -%}
          <{{ heading_tag }} class="lib-team__heading lib-team__heading--{{ s.heading_size }}">
            {{- s.heading -}}
          </{{ heading_tag }}>
        {%- endif -%}
        {%- if s.text != blank -%}
          <div class="lib-team__text">{{ s.text }}</div>
        {%- endif -%}
      </header>
    {%- endif -%}

    {%- if section.blocks.size > 0 -%}
      <ul class="lib-team__grid" role="list">
        {%- for block in section.blocks -%}
          {%- assign b = block.settings -%}
          <li class="lib-team__item" {{ block.shopify_attributes }}>
            <article class="lib-team__card">
              <div class="lib-team__media">
                {%- render 'lib-image', image: b.image, image_mobile: b.image_mobile, class: 'lib-team__img', sizes: img_sizes, placeholder: 'image' -%}
              </div>
              <div class="lib-team__body">
                {%- if b.name != blank -%}
                  <{{ name_tag }} class="lib-team__name">{{ b.name | escape }}</{{ name_tag }}>
                {%- endif -%}
                {%- if b.role != blank -%}
                  <p class="lib-team__role">{{ b.role | escape }}</p>
                {%- endif -%}
                {%- if b.bio != blank -%}
                  <div class="lib-team__bio">{{ b.bio }}</div>
                {%- endif -%}
                {%- if b.email != blank or b.link_url != blank -%}
                  <ul class="lib-team__links" role="list">
                    {%- if b.email != blank -%}
                      <li><a href="mailto:{{ b.email | strip }}">{{ b.email | escape }}</a></li>
                    {%- endif -%}
                    {%- if b.link_url != blank -%}
                      <li>
                        <a
                          href="{{ b.link_url }}"
                          {% if b.link_new_tab %}
                            target="_blank" rel="noopener"
                          {% endif %}
                        >
                          {{- b.link_label | default: b.link_url | escape -}}
                          {%- if b.link_new_tab and s.new_tab_label != blank -%}<span class="lib-team__sr"> ({{ s.new_tab_label | escape }})</span>{%- endif -%}
                        </a>
                      </li>
                    {%- endif -%}
                  </ul>
                {%- endif -%}
              </div>
            </article>
          </li>
        {%- endfor -%}
      </ul>
    {%- endif -%}
  </div>
</div>

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

  .lib-team__header { max-width: 42rem; margin-bottom: clamp(1.5rem, 4vw, 2.75rem); }
  .lib-team__heading {
    margin: 0;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  .lib-team__heading--small { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
  .lib-team__heading--large { font-size: clamp(2rem, 4vw, 3.25rem); }
  .lib-team__text { margin-top: 0.6rem; font-size: 1rem; line-height: 1.6; opacity: 0.85; }
  .lib-team__text > :first-child { margin-top: 0; }
  .lib-team__text > :last-child { margin-bottom: 0; }

  .lib-team__grid {
    display: grid;
    grid-template-columns: repeat(var(--lib-cols), minmax(0, 1fr));
    gap: clamp(1.25rem, 3vw, 2.25rem) clamp(1rem, 2.5vw, 1.75rem);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  @media (max-width: 989px) {
    .lib-team__grid { grid-template-columns: repeat(min(var(--lib-cols), 3), minmax(0, 1fr)); }
  }
  @media (max-width: 749px) {
    .lib-team__grid { grid-template-columns: repeat(var(--lib-cols-m), minmax(0, 1fr)); }
  }
  .lib-team__item { display: flex; min-width: 0; }
  .lib-team__card { display: flex; flex: 1; flex-direction: column; min-width: 0; }
  .lib-team[data-style='card'] .lib-team__card { overflow: hidden; border-radius: 14px; background: var(--lib-card); }
  .lib-team__media { overflow: hidden; aspect-ratio: 4 / 5; border-radius: 12px; background: color-mix(in srgb, var(--lib-text) 8%, transparent); }
  .lib-team[data-style='card'] .lib-team__media { border-radius: 0; }
  .lib-team[data-shape='square'] .lib-team__media { aspect-ratio: 1; }
  .lib-team[data-shape='circle'] .lib-team__media { width: min(12rem, 70%); aspect-ratio: 1; border-radius: 50%; }
  .lib-team[data-shape='circle'][data-style='card'] .lib-team__media { margin: 1.25rem 1.25rem 0; border-radius: 50%; }
  .lib-team__img { display: block; width: 100%; height: 100%; object-fit: cover; }
  svg.lib-team__img { fill: color-mix(in srgb, var(--lib-text) 22%, transparent); }
  .lib-team__body { display: flex; flex-direction: column; gap: 0.25rem; padding-top: 0.9rem; }
  .lib-team[data-style='card'] .lib-team__body { padding: 1rem 1.25rem 1.25rem; }
  .lib-team__name { margin: 0; font-size: 1.125rem; line-height: 1.3; }
  .lib-team__role { margin: 0; font-size: 0.875rem; color: var(--lib-accent); font-weight: 600; }
  .lib-team__bio { margin-top: 0.35rem; font-size: 0.9375rem; line-height: 1.55; opacity: 0.85; }
  .lib-team__bio > * { margin: 0; }
  .lib-team__bio > * + * { margin-top: 0.5em; }
  .lib-team__links { display: flex; flex-wrap: wrap; gap: 0 1rem; margin: 0.35rem 0 0; padding: 0; list-style: none; font-size: 0.875rem; }
  .lib-team__links a { display: inline-block; padding-block: 0.3rem; color: inherit; overflow-wrap: anywhere; text-underline-offset: 0.2em; }
  .lib-team__links a:focus-visible { outline: 2px solid var(--lib-accent); outline-offset: 2px; }
  .lib-team__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .lib-team__inner[data-align='center'] .lib-team__header { margin-inline: auto; text-align: center; }
  .lib-team__inner[data-align='center'] .lib-team__card { align-items: center; text-align: center; }
  .lib-team__inner[data-align='center'] .lib-team__media { align-self: stretch; }
  .lib-team__inner[data-align='center'] .lib-team__links { justify-content: center; }
  .lib-team[data-shape='circle'] .lib-team__inner[data-align='center'] .lib-team__media { align-self: center; }
  @media (max-width: 749px) {
    .lib-team__inner[data-align-m='left'] .lib-team__header { margin-inline: 0; text-align: left; }
    .lib-team__inner[data-align-m='left'] .lib-team__card { align-items: stretch; text-align: left; }
    .lib-team__inner[data-align-m='left'] .lib-team__links { justify-content: flex-start; }
    .lib-team__inner[data-align-m='center'] .lib-team__header { margin-inline: auto; text-align: center; }
    .lib-team__inner[data-align-m='center'] .lib-team__card { align-items: center; text-align: center; }
    .lib-team__inner[data-align-m='center'] .lib-team__links { justify-content: center; }
  }

  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .lib-team[data-animate] .lib-team__card {
        animation: lib-team-rise linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 50%;
      }
    }
  }
  @keyframes lib-team-rise {
    from { opacity: 0; transform: translateY(18px); }
  }
{% endstylesheet %}

{% schema %}
{
  "name": "Lib · Team",
  "tag": "section",
  "class": "lib-section",
  "max_blocks": 24,
  "settings": [
    { "type": "header", "content": "Content" },
    { "type": "inline_richtext", "id": "heading", "label": "Heading", "default": "Meet the team" },
    {
      "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": "Layout" },
    { "type": "range", "id": "columns", "label": "Columns on desktop", "min": 2, "max": 5, "step": 1, "default": 4 },
    { "type": "range", "id": "columns_mobile", "label": "Columns on mobile", "min": 1, "max": 2, "step": 1, "default": 2 },
    {
      "type": "select",
      "id": "image_shape",
      "label": "Photo shape",
      "options": [
        { "value": "portrait", "label": "Portrait (4:5)" },
        { "value": "square", "label": "Square" },
        { "value": "circle", "label": "Circle" }
      ],
      "default": "portrait"
    },
    {
      "type": "select",
      "id": "card_style",
      "label": "Card style",
      "options": [
        { "value": "plain", "label": "Plain" },
        { "value": "card", "label": "Card" }
      ],
      "default": "plain"
    },
    {
      "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": "Alignment on desktop",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" }
      ],
      "default": "left"
    },
    {
      "type": "select",
      "id": "text_alignment_mobile",
      "label": "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_accent", "label": "Accent (roles, focus)", "default": "#7A5A3A" },
    { "type": "color", "id": "color_card", "label": "Card background", "default": "#FAF6F1" },

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

    { "type": "header", "content": "Motion" },
    { "type": "checkbox", "id": "animate", "label": "Fade cards in on scroll", "info": "Only in browsers that support scroll-driven animations; never when reduced motion is on.", "default": false }
  ],
  "blocks": [
    {
      "type": "member",
      "name": "Person",
      "settings": [
        { "type": "image_picker", "id": "image", "label": "Photo" },
        { "type": "image_picker", "id": "image_mobile", "label": "Mobile photo", "info": "Optional. Below 750px." },
        { "type": "text", "id": "name", "label": "Name", "default": "Name" },
        { "type": "text", "id": "role", "label": "Role", "default": "Role" },
        { "type": "richtext", "id": "bio", "label": "Short bio" },
        { "type": "text", "id": "email", "label": "Email" },
        { "type": "text", "id": "link_label", "label": "Link text", "info": "For example Instagram or Portfolio." },
        { "type": "url", "id": "link_url", "label": "Link" },
        { "type": "checkbox", "id": "link_new_tab", "label": "Open link in a new tab", "default": true }
      ]
    }
  ],
  "presets": [
    {
      "name": "Lib · Team",
      "blocks": [{ "type": "member" }, { "type": "member" }, { "type": "member" }, { "type": "member" }]
    }
  ]
}
{% 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.