# Logo bulutu: ücretsiz Shopify bölümü

> Basın, iş ortağı ya da satış noktası logolarından sabit ızgara veya satır; üzerine gelince griden renge, ayırıcı çizgi ya da kart, cihaza göre logo boyu.

Logo bulutu, basın, iş ortağı ya da satış noktası logolarını düzenli bir ızgarada veya alt satıra geçen bir satırda, her biri isteğe bağlı bağlantıyla gösteren ücretsiz bir Shopify bölümüdür. Logolar düşük opaklıkta gri tonlamalı durup üzerine gelince tam renge dönebilir; düz, ayırıcı çizgili ya da kart stilleri vardır ve Online Store 2.0 temalarında uygulama ya da JavaScript olmadan çalışır.

- **Kategori:** Sosyal kanıt ve güven
- **Kullanıldığı yerler:** Ana sayfa, Hakkımızda, Açılış sayfaları, Her sayfa
- **Okuduğu veri:** Yalnızca içerik
- **Boyut:** 2 dosyada 19 KB, JavaScript yok
- **Lisans:** MIT, © 2026 Lintel
- **Sayfa:** https://lintelagency.com/tr/kaynaklar/shopify-bolumleri/logo-bulutu
- **Canlı demo:** https://lintelagency.com/resources/shopify-sections/demo/lib-logo-cloud.html
- **Eklenme tarihi:** 2026-10-02

## Ne işe yarar

- Ana sayfa hero’sunun altında "basında biz" logoları
- Hakkımızda ya da toptan satış sayfasında satış noktaları veya perakende iş ortakları
- Bir açılış sayfasında sertifika ya da malzeme iş ortağı işaretleri

## Tema düzenleyici ayarları

Bölüm tema düzenleyicide “Lib · Logo cloud” 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 | Stocked by independent shops we love |  |
| `heading_tag` | `select` | Heading tag | h2 | `h1`, `h2`, `h3`, `p` |
| `heading_size` | `select` | Heading size | medium | `small`, `medium`, `large`, `xlarge` |
| `text` | `richtext` | Text | `<p>Find our ceramics and linen in these stores and studios.</p>` |  |

### Logos

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `logo_style` | `select` | Style | lines | `plain`, `lines`, `cards` |
| `logo_height` | `range` | Logo height on desktop | `48` | 16–120 px, step 4 |
| `logo_height_mobile` | `range` | Logo height on mobile | `36` | 16–96 px, step 4 |
| `grayscale` | `checkbox` | Show logos in grayscale | `true` |  |
| `hover_color` | `checkbox` | Full color and opacity on hover | `true` |  |
| `opacity` | `range` | Logo opacity | `70` | 20–100 %, step 5 |
| `blend` | `checkbox` | Blend white logo backgrounds into the section | `false` |  |
| `card_radius` | `range` | Card corner radius | `12` | 0–32 px, step 2 |

### Layout

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `layout` | `select` | Layout | grid | `grid`, `row` |
| `columns` | `range` | Columns on desktop | `4` | 2–8, step 1 |
| `columns_mobile` | `select` | Columns on mobile | 2 | `2`, `3`, `4` |
| `gap` | `range` | Spacing | `24` | 8–48 px, step 4 |
| `section_width` | `select` | Width | page | `page`, `full` |
| `text_alignment` | `text_alignment` | Alignment on desktop | center |  |
| `text_alignment_mobile` | `select` | Alignment on mobile | center | `left`, `center`, `right` |

### 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 | #1C1917 |  |
| `color_border` | `color` | Lines and card border | #E7E5E4 |  |
| `color_card` | `color` | Card background | #FAFAF9 |  |

### Spacing and visibility

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

## Bloklar

Toplamda en fazla 24 blok.

### Logo (`logo`)

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `image` | `image_picker` | Logo | – |  |
| `name` | `text` | Name | – |  |
| `link` | `url` | Link | – |  |
| `new_tab` | `checkbox` | Open link in a new tab | `false` |  |

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

### Kayan yazı şeridi (Marquee) bölümünden farkı ne?

Logo bulutu sabittir: her logo bir ızgarada ya da alt satıra geçen bir satırda aynı anda görünür, hiçbir şey hareket etmez. Kayan yazı şeridi ise logo ya da metin şeridini döngüde kaydırır. Logoların bir bakışta okunması gerekiyorsa Logo bulutunu kullanın.

### Alt metin nereden gelir?

Shopify Files’taki her görselin alt metninden. Bir görselin alt metni yoksa bloğun isteğe bağlı Name alanı logonun ya da bağlantısının erişilebilir adı olarak kullanılır.

### Gri tonlama efekti nasıl çalışır?

Ayarlanabilir opaklığa sahip bir CSS filtresidir. "Full color and opacity on hover" açıkken bir logo üzerine gelindiğinde ya da bağlantılı logolarda klavyeyle odaklanıldığında tam renge döner. JavaScript yoktur; azaltılmış hareket tercih eden ziyaretçilerde geçiş kapanır.

### Kaç logo ekleyebilirim, mobilde nasıl görünür?

En fazla 24 logo bloğu. Izgara masaüstünde 2–8 sütun, tabletlerde en fazla 4, telefonlarda 2, 3 ya da 4 sütun gösterir; satır düzeninde logolar kendi genişliklerini korur ve alt satıra geçer. Logo yüksekliği masaüstü ve mobil için ayrı ayarlanır.

### Logolarım beyaz kutulu JPG’ler. Kutuyu gizleyebilir miyim?

"Blend white logo backgrounds into the section" ayarını açın. Açık renkli bölümlerde beyaz arka planları gizleyen multiply karışımını kullanır; koyu arka planlarda bunun yerine SVG ya da şeffaf PNG logolar kullanın.

## Kaynak kod

### sections/lib-logo-cloud.liquid

```liquid
{%- comment -%}
  MIT License · (c) 2026 Lintel · https://lintelagency.com/resources/shopify-sections
{%- endcomment -%}
{%- comment -%}
  Logo cloud: a static grid or wrapping row of partner, press or stockist logos. Each logo can link
  somewhere. Optional grayscale and reduced opacity that turn to full color on hover and keyboard focus,
  plain / separator lines / card styles, logo height per device. HTML and CSS only.
  For a moving strip of logos use the Marquee section instead.
  Depends on: 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-logo-cloud lib-logo-cloud--{{ s.section_width }}"
  {% if s.anchor_id != blank %}
    id="{{ s.anchor_id | handleize }}"
  {% endif %}
  data-show="{{ s.show_on }}"
  data-layout="{{ s.layout }}"
  data-style="{{ s.logo_style }}"
  data-align="{{ s.text_alignment }}"
  data-align-m="{{ s.text_alignment_mobile }}"
  {% if s.grayscale %}
    data-grayscale
  {% endif %}
  {% if s.hover_color %}
    data-hover
  {% endif %}
  {% if s.blend %}
    data-blend
  {% 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-card: {{ s.color_card }};
    --lib-border: {{ s.color_border }};
    --lib-cols: {{ s.columns }};
    --lib-cols-m: {{ s.columns_mobile }};
    --lib-logo-h: {{ s.logo_height }}px;
    --lib-logo-h-m: {{ s.logo_height_mobile }}px;
    --lib-logo-o: {{ s.opacity | divided_by: 100.0 }};
    --lib-gap: {{ s.gap }}px;
    --lib-radius-card: {{ s.card_radius }}px;
    --lib-pt: {{ s.padding_top }}px;
    --lib-pb: {{ s.padding_bottom }}px;
    --lib-pt-m: {{ s.padding_top_mobile }}px;
    --lib-pb-m: {{ s.padding_bottom_mobile }}px;
  "
>
  <div class="lib-logo-cloud__inner">
    {%- if s.heading != blank or s.text != blank -%}
      <header class="lib-logo-cloud__header">
        {%- if s.heading != blank -%}
          <{{ heading_tag }} class="lib-logo-cloud__heading lib-logo-cloud__heading--{{ s.heading_size }}">
            {{- s.heading -}}
          </{{ heading_tag }}>
        {%- endif -%}
        {%- if s.text != blank -%}
          <div class="lib-logo-cloud__text">{{ s.text }}</div>
        {%- endif -%}
      </header>
    {%- endif -%}

    <div class="lib-logo-cloud__frame">
      <ul class="lib-logo-cloud__list" role="list">
        {%- for block in section.blocks -%}
          {%- liquid
            assign b = block.settings
            if b.image == blank and request.design_mode == false
              continue
            endif
          -%}
          <li class="lib-logo-cloud__item" {{ block.shopify_attributes }}>
            {%- if b.link != blank -%}
              <a
                class="lib-logo-cloud__logo"
                href="{{ b.link }}"
                {% if b.new_tab %}
                  target="_blank" rel="noopener"
                {% endif %}
                {% if b.image.alt == blank and b.name != blank %}
                  aria-label="{{ b.name | escape }}"
                {% endif %}
              >
            {%- else -%}
              <span class="lib-logo-cloud__logo"{% if b.image.alt == blank and b.name != blank %} role="img" aria-label="{{ b.name | escape }}"{% endif %}>
            {%- endif -%}
            {%- render 'lib-image', image: b.image, class: 'lib-logo-cloud__img', sizes: '240px', eager: eager, placeholder: 'logo' -%}
            {%- if b.link != blank -%}
              </a>
            {%- else -%}
              </span>
            {%- endif -%}
          </li>
        {%- endfor -%}
      </ul>
    </div>
  </div>
</div>

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

  /* Header and row alignment: desktop, then mobile override. */
  .lib-logo-cloud__header { max-width: 42rem; margin: 0 0 clamp(1.75rem, 4vw, 2.75rem); text-align: left; }
  .lib-logo-cloud[data-align='center'] .lib-logo-cloud__header { margin-inline: auto; text-align: center; }
  .lib-logo-cloud[data-align='right'] .lib-logo-cloud__header { margin-inline-start: auto; text-align: right; }
  @media (max-width: 749px) {
    .lib-logo-cloud[data-align-m='left'] .lib-logo-cloud__header { margin-inline: 0 auto; text-align: left; }
    .lib-logo-cloud[data-align-m='center'] .lib-logo-cloud__header { margin-inline: auto; text-align: center; }
    .lib-logo-cloud[data-align-m='right'] .lib-logo-cloud__header { margin-inline: auto 0; text-align: right; }
  }
  .lib-logo-cloud__heading {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  .lib-logo-cloud__heading--small { font-size: clamp(1rem, 1.6vw, 1.25rem); font-weight: 600; }
  .lib-logo-cloud__heading--large { font-size: clamp(2rem, 4.4vw, 3.25rem); }
  .lib-logo-cloud__heading--xlarge { font-size: clamp(2.5rem, 6vw, 4.5rem); }
  .lib-logo-cloud__text { margin-top: 0.75rem; font-size: 1.0625rem; line-height: 1.6; opacity: 0.75; }
  .lib-logo-cloud__text > :first-child { margin-top: 0; }
  .lib-logo-cloud__text > :last-child { margin-bottom: 0; }

  /* Grid: columns per device. Row: logos at their own width, wrapping, aligned like the heading. */
  .lib-logo-cloud__list {
    display: grid;
    grid-template-columns: repeat(var(--lib-cols-m), minmax(0, 1fr));
    gap: var(--lib-gap);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  @media (min-width: 750px) {
    .lib-logo-cloud__list { grid-template-columns: repeat(min(var(--lib-cols), 4), minmax(0, 1fr)); }
  }
  @media (min-width: 990px) {
    .lib-logo-cloud__list { grid-template-columns: repeat(var(--lib-cols), minmax(0, 1fr)); }
  }
  .lib-logo-cloud[data-layout='row'] .lib-logo-cloud__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    column-gap: calc(var(--lib-gap) * 2);
  }
  .lib-logo-cloud[data-layout='row'][data-align='center'] .lib-logo-cloud__list { justify-content: center; }
  .lib-logo-cloud[data-layout='row'][data-align='right'] .lib-logo-cloud__list { justify-content: flex-end; }
  @media (max-width: 749px) {
    .lib-logo-cloud[data-layout='row'][data-align-m='left'] .lib-logo-cloud__list { justify-content: flex-start; }
    .lib-logo-cloud[data-layout='row'][data-align-m='center'] .lib-logo-cloud__list { justify-content: center; }
    .lib-logo-cloud[data-layout='row'][data-align-m='right'] .lib-logo-cloud__list { justify-content: flex-end; }
  }

  .lib-logo-cloud__item { display: flex; align-items: center; justify-content: center; min-width: 0; }
  .lib-logo-cloud__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    color: inherit;
    border-radius: 4px;
  }
  a.lib-logo-cloud__logo:focus-visible { outline: 2px solid var(--lib-text); outline-offset: 4px; }
  .lib-logo-cloud__img {
    display: block;
    width: auto;
    max-width: 100%;
    height: var(--lib-logo-h-m);
    object-fit: contain;
    opacity: var(--lib-logo-o);
    transition: filter 0.3s ease, opacity 0.3s ease;
  }
  @media (min-width: 750px) {
    .lib-logo-cloud__img { height: var(--lib-logo-h); }
  }
  svg.lib-logo-cloud__img { width: calc(var(--lib-logo-h) * 2.5); max-width: 100%; fill: currentColor; }
  .lib-logo-cloud[data-grayscale] .lib-logo-cloud__img { filter: grayscale(1); }
  .lib-logo-cloud[data-blend] .lib-logo-cloud__img { mix-blend-mode: multiply; }
  .lib-logo-cloud[data-hover] .lib-logo-cloud__logo:hover .lib-logo-cloud__img,
  .lib-logo-cloud[data-hover] .lib-logo-cloud__logo:focus-visible .lib-logo-cloud__img { filter: none; opacity: 1; }

  /* Style: separator lines between cells. The frame clips the outer edge lines. */
  .lib-logo-cloud[data-style='lines'] .lib-logo-cloud__frame { overflow: hidden; }
  .lib-logo-cloud[data-style='lines'] .lib-logo-cloud__list {
    gap: 0;
    margin-inline-end: -1px;
    margin-block-end: -1px;
  }
  .lib-logo-cloud[data-style='lines'] .lib-logo-cloud__item {
    padding: calc(var(--lib-gap) + 0.75rem) var(--lib-gap);
    border-inline-end: 1px solid var(--lib-border);
    border-block-end: 1px solid var(--lib-border);
  }
  .lib-logo-cloud[data-style='lines'][data-layout='row'] .lib-logo-cloud__item { border-block-end: 0; }
  .lib-logo-cloud[data-style='lines'][data-layout='row'] .lib-logo-cloud__frame { overflow: visible; }
  .lib-logo-cloud[data-style='lines'][data-layout='row'] .lib-logo-cloud__list { margin: 0; row-gap: var(--lib-gap); }
  .lib-logo-cloud[data-style='lines'][data-layout='row'] .lib-logo-cloud__item { padding-block: 0.25rem; }
  .lib-logo-cloud[data-style='lines'][data-layout='row'] .lib-logo-cloud__item:last-child { border-inline-end: 0; }

  /* Style: each logo on a card. */
  .lib-logo-cloud[data-style='cards'] .lib-logo-cloud__item {
    padding: calc(var(--lib-gap) + 0.5rem) calc(var(--lib-gap) + 1rem);
    border-radius: var(--lib-radius-card);
    background: var(--lib-card);
    box-shadow: inset 0 0 0 1px var(--lib-border);
  }

  @media (prefers-reduced-motion: reduce) {
    .lib-logo-cloud__img { transition: none; }
  }
{% endstylesheet %}

{% schema %}
{
  "name": "Lib · Logo cloud",
  "tag": "section",
  "class": "lib-section",
  "max_blocks": 24,
  "settings": [
    { "type": "header", "content": "Content" },
    { "type": "inline_richtext", "id": "heading", "label": "Heading", "default": "Stocked by independent shops we love" },
    {
      "type": "select",
      "id": "heading_tag",
      "label": "Heading tag",
      "info": "Use H1 only when this is the page's main heading.",
      "options": [
        { "value": "h1", "label": "H1" },
        { "value": "h2", "label": "H2" },
        { "value": "h3", "label": "H3" },
        { "value": "p", "label": "Paragraph" }
      ],
      "default": "h2"
    },
    {
      "type": "select",
      "id": "heading_size",
      "label": "Heading size",
      "options": [
        { "value": "small", "label": "Small" },
        { "value": "medium", "label": "Medium" },
        { "value": "large", "label": "Large" },
        { "value": "xlarge", "label": "Extra large" }
      ],
      "default": "medium"
    },
    { "type": "richtext", "id": "text", "label": "Text", "default": "<p>Find our ceramics and linen in these stores and studios.</p>" },

    { "type": "header", "content": "Logos" },
    {
      "type": "select",
      "id": "logo_style",
      "label": "Style",
      "options": [
        { "value": "plain", "label": "Plain" },
        { "value": "lines", "label": "Separator lines" },
        { "value": "cards", "label": "Cards" }
      ],
      "default": "lines"
    },
    { "type": "range", "id": "logo_height", "label": "Logo height on desktop", "info": "Maximum height; wide logos also shrink to fit their column.", "min": 16, "max": 120, "step": 4, "unit": "px", "default": 48 },
    { "type": "range", "id": "logo_height_mobile", "label": "Logo height on mobile", "min": 16, "max": 96, "step": 4, "unit": "px", "default": 36 },
    { "type": "checkbox", "id": "grayscale", "label": "Show logos in grayscale", "default": true },
    { "type": "checkbox", "id": "hover_color", "label": "Full color and opacity on hover", "default": true },
    { "type": "range", "id": "opacity", "label": "Logo opacity", "min": 20, "max": 100, "step": 5, "unit": "%", "default": 70 },
    { "type": "checkbox", "id": "blend", "label": "Blend white logo backgrounds into the section", "info": "For JPG logos on a white box. Works on light backgrounds only.", "default": false },
    { "type": "range", "id": "card_radius", "label": "Card corner radius", "min": 0, "max": 32, "step": 2, "unit": "px", "default": 12, "visible_if": "{{ section.settings.logo_style == 'cards' }}" },

    { "type": "header", "content": "Layout" },
    {
      "type": "select",
      "id": "layout",
      "label": "Layout",
      "options": [
        { "value": "grid", "label": "Grid (equal columns)" },
        { "value": "row", "label": "Row (logos at their own width, wrapping)" }
      ],
      "default": "grid"
    },
    { "type": "range", "id": "columns", "label": "Columns on desktop", "info": "Tablets show up to 4.", "min": 2, "max": 8, "step": 1, "default": 4, "visible_if": "{{ section.settings.layout == 'grid' }}" },
    {
      "type": "select",
      "id": "columns_mobile",
      "label": "Columns on mobile",
      "options": [
        { "value": "2", "label": "2" },
        { "value": "3", "label": "3" },
        { "value": "4", "label": "4" }
      ],
      "default": "2",
      "visible_if": "{{ section.settings.layout == 'grid' }}"
    },
    { "type": "range", "id": "gap", "label": "Spacing", "min": 8, "max": 48, "step": 4, "unit": "px", "default": 24 },
    {
      "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": "Alignment on desktop", "info": "Heading, and logos in the row layout.", "default": "center" },
    {
      "type": "select",
      "id": "text_alignment_mobile",
      "label": "Alignment on mobile",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "center"
    },

    { "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": "#1C1917" },
    { "type": "color", "id": "color_border", "label": "Lines and card border", "default": "#E7E5E4" },
    { "type": "color", "id": "color_card", "label": "Card background", "default": "#FAFAF9", "visible_if": "{{ section.settings.logo_style == 'cards' }}" },

    { "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": 64 },
    { "type": "range", "id": "padding_bottom", "label": "Bottom padding on desktop", "min": 0, "max": 200, "step": 4, "unit": "px", "default": 64 },
    { "type": "range", "id": "padding_top_mobile", "label": "Top padding on mobile", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 40 },
    { "type": "range", "id": "padding_bottom_mobile", "label": "Bottom padding on mobile", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 40 },
    {
      "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." }
  ],
  "blocks": [
    {
      "type": "logo",
      "name": "Logo",
      "settings": [
        { "type": "image_picker", "id": "image", "label": "Logo", "info": "SVG or transparent PNG works best. Alt text comes from the image." },
        { "type": "text", "id": "name", "label": "Name", "info": "Optional. Used as the accessible name when the image has no alt text." },
        { "type": "url", "id": "link", "label": "Link" },
        { "type": "checkbox", "id": "new_tab", "label": "Open link in a new tab", "default": false }
      ]
    }
  ],
  "presets": [
    {
      "name": "Lib · Logo cloud",
      "blocks": [
        { "type": "logo", "settings": { "name": "Partner 1" } },
        { "type": "logo", "settings": { "name": "Partner 2" } },
        { "type": "logo", "settings": { "name": "Partner 3" } },
        { "type": "logo", "settings": { "name": "Partner 4" } },
        { "type": "logo", "settings": { "name": "Partner 5" } },
        { "type": "logo", "settings": { "name": "Partner 6" } },
        { "type": "logo", "settings": { "name": "Partner 7" } },
        { "type": "logo", "settings": { "name": "Partner 8" } }
      ]
    }
  ]
}
{% 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.