# Güven rozetleri: ücretsiz Shopify bölümü

> Çizgi ikonlar, kısa metin ve bağlantılarla güven maddeleri satırı (teslimat, iade, güvenli ödeme) ve mağazanızın kabul ettiği ödeme ikonları.

Güven rozetleri, her biri yerleşik bir çizgi ikon ya da kendi ikon görseliniz, bir başlık, kısa bir satır ve isteğe bağlı bir bağlantı içeren en fazla sekiz güven maddesini listeleyen ve mağazanızın kabul ettiği ödeme ikonlarını ekleyebilen ücretsiz bir Shopify bölümüdür. Ayırıcılı satır, kartlar ya da satın al düğmesinin altı için kompakt bir şerit olarak gelir; Online Store 2.0 temalarında uygulama olmadan çalışır.

- **Kategori:** Sosyal kanıt ve güven
- **Kullanıldığı yerler:** Ana sayfa, Ürün, Sepet, Koleksiyon
- **Okuduğu veri:** Yalnızca içerik
- **Boyut:** 1 dosyada 24 KB, JavaScript yok
- **Lisans:** MIT, © 2026 Lintel
- **Sayfa:** https://lintelagency.com/tr/kaynaklar/shopify-bolumleri/guven-rozetleri
- **Canlı demo:** https://lintelagency.com/resources/shopify-sections/demo/lib-trust-badges.html
- **Eklenme tarihi:** 2026-10-02

## Ne işe yarar

- Ürün sayfasında satın al düğmesinin altında teslimat, iade ve güvenli ödeme satırı
- Ana sayfada alt bilginin üstünde mağaza vaatleri satırı
- Sepet sayfasında ödeme ve iade güvencesi

## Tema düzenleyici ayarları

Bölüm tema düzenleyicide “Lib · Trust badges” adıyla görünür. Kimlikler, türler, etiketler ve varsayılan değerler bölümün şemasından gelir. Etiketler tema düzenleyicide göründüğü gibi İngilizcedir.

### Content

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `heading` | `inline_richtext` | Heading | – |  |
| `heading_tag` | `select` | Heading tag | h2 | `h1`, `h2`, `h3`, `p` |
| `heading_size` | `select` | Heading size | medium | `small`, `medium`, `large`, `xlarge` |

### Payment icons

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `show_payment` | `checkbox` | Show accepted payment icons | `true` |  |
| `payment_label` | `text` | Payment label | Secure payment with |  |

### Layout

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `layout` | `select` | Style | row | `row`, `cards`, `inline` |
| `columns` | `range` | Columns on desktop | `4` | 2–6, step 1 |
| `columns_mobile` | `select` | Mobile layout | 2 | `1`, `2`, `scroll` |
| `icon_position` | `select` | Icon position | top | `top`, `side` |
| `text_alignment` | `text_alignment` | Alignment on desktop | center |  |
| `text_alignment_mobile` | `select` | Alignment on mobile | center | `left`, `center` |
| `section_width` | `select` | Width | page | `page`, `full` |
| `card_radius` | `range` | Card corner radius | `14` | 0–32 px, step 2 |

### Icons

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `icon_size` | `range` | Icon size | `30` | 16–64 px, step 2 |
| `icon_style` | `select` | Icon background | plain | `plain`, `circle`, `outline` |

### 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 | #1C1917 |  |
| `color_icon` | `color` | Icons | #9A5B34 |  |
| `color_card` | `color` | Card background | #FFFFFF |  |

### Spacing and visibility

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

## Bloklar

Toplamda en fazla 8 blok.

### Trust point (`badge`, en fazla 8)

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `icon` | `select` | Icon | truck | `none`, `truck`, `return`, `lock`, `shield`, `leaf`, `star`, `chat`, `gift`, `card`, `clock`, `heart`, `check`, `box`, `globe` |
| `icon_image` | `image_picker` | Custom icon | – |  |
| `title` | `text` | Title | Free delivery over $75 |  |
| `text` | `inline_richtext` | Text | Tracked to your door in 2 to 4 working days. |  |
| `link` | `url` | Link | – |  |

## 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-trust-badges.liquid` adında yeni bir dosya ekleyin, aşağıdaki kaynak koddan `sections/lib-trust-badges.liquid` içeriğini yapıştırıp kaydedin.
4. Kopyada **Özelleştir**’i açın, **Bölüm ekle**’yi seçin ve **Lib · Trust badges** bölümünü ekleyin. Örnek içeriği kendi içeriğinizle değiştirin, renkleri ayarlayın.
5. 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-trust-badges.liquid https://lintelagency.com/resources/shopify-sections/files/lib-trust-badges.liquid
shopify theme push --theme <unpublished-theme-id> --only sections/lib-trust-badges.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-trust-badges.liquid](https://lintelagency.com/resources/shopify-sections/files/lib-trust-badges.liquid): `sections/` klasörüne

## Sık sorulan sorular

### Ödeme ikonları nereden gelir?

Mağazanızdan. Bölüm, Shopify ödeme ayarlarınızda etkin olan ödeme yöntemlerini dolaşır ve her biri için Shopify’ın kendi ikonunu yazdırır; böylece bir yöntemi açıp kapattığınızda liste güncellenir. İkonları gizleyebilir ya da önlerindeki etiketi değiştirebilirsiniz.

### Hangi ikonlar dahil?

Satır içi SVG olarak çizilmiş on dört çizgi ikon: kargo kamyonu, iade, kilit, kalkan, yaprak, yıldız, sohbet, hediye, kart, saat, kalp, onay işareti, paket ve dünya. Seçtiğiniz ikon rengini alırlar. Her madde bunun yerine yüklenen bir görseli kullanabilir; bu görsel yerleşik ikonun yerini alır.

### Mobilde nasıl görünür?

Tek sütun, iki sütun ya da ziyaretçilerin kaydırdığı ve her maddenin yerine oturduğu yatay bir satır seçersiniz. Tabletler en fazla üç, masaüstü iki ile altı arası sütun gösterir. Kompakt şerit düzeni ihtiyaç duyduğu kadar satıra geçer.

### JavaScript gerekir mi, sayfayı yavaşlatır mı?

Hayır. Yalnızca HTML ve CSS’tir; yerleşik ikonlar satır içi SVG olduğu için, lazy-load ile yüklenen özel ikonlar yüklemediğiniz sürece ek görsel isteği olmaz.

### Bir güven maddesi bir politika sayfasına bağlanabilir mi?

Evet. Bir maddeye bağlantı ekleyin; maddenin tamamı tıklanabilir olur, örneğin iade ya da kargo politikanıza; ekran okuyucular için bağlantı metni başlıktır.

## Kaynak kod

### sections/lib-trust-badges.liquid

```liquid
{%- comment -%}
  MIT License · (c) 2026 Lintel · https://lintelagency.com/resources/shopify-sections
{%- endcomment -%}
{%- comment -%}
  Trust badges: a row of reassurance points (shipping, returns, secure checkout ...) with a built-in
  line icon or a custom icon image, title, short text and optional link, plus the store's accepted
  payment icons. Layouts: row with dividers, cards, or a compact inline strip for under a buy button.
  Columns per device, including a horizontal scroll row on mobile. No JavaScript.
  Depends on: nothing (icons are inline SVG).
{%- endcomment -%}

{%- liquid
  assign s = section.settings
  assign heading_tag = s.heading_tag | default: 'h2'
  assign cols = s.columns | default: 4
  assign cols_t = cols
  if cols_t > 3
    assign cols_t = 3
  endif
  assign block_count = section.blocks.size
  if block_count > 0 and block_count < cols
    assign cols = block_count
  endif
  if block_count > 0 and block_count < cols_t
    assign cols_t = block_count
  endif
-%}

<div
  class="lib-trust lib-trust--{{ s.layout }} lib-trust--{{ s.section_width }}"
  {% if s.anchor_id != blank %}
    id="{{ s.anchor_id | handleize }}"
  {% endif %}
  data-show="{{ s.show_on }}"
  data-cols-m="{{ s.columns_mobile }}"
  data-icon-pos="{{ s.icon_position }}"
  data-icon-style="{{ s.icon_style }}"
  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_icon }};
    --lib-card: {{ s.color_card }};
    --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-icon-size: {{ s.icon_size }}px;
    --lib-radius: {{ s.card_radius }}px;
    --lib-cols: {{ cols }};
    --lib-cols-t: {{ cols_t }};
  "
>
  <div class="lib-trust__inner" data-align="{{ s.text_alignment }}" data-align-m="{{ s.text_alignment_mobile }}">
    {%- if s.heading != blank -%}
      <{{ heading_tag }} class="lib-trust__heading lib-trust__heading--{{ s.heading_size }}">
        {{- s.heading -}}
      </{{ heading_tag }}>
    {%- endif -%}

    {%- if block_count > 0 -%}
      <ul class="lib-trust__list" role="list">
        {%- for block in section.blocks -%}
          {%- assign b = block.settings -%}
          <li class="lib-trust__item{% if b.link != blank %} lib-trust__item--link{% endif %}" {{ block.shopify_attributes }}>
            {%- if b.icon_image != blank or b.icon != 'none' -%}
              <span class="lib-trust__icon{% if b.icon_image != blank %} lib-trust__icon--image{% endif %}" aria-hidden="true">
                {%- if b.icon_image != blank -%}
                  {{-
                    b.icon_image
                    | image_url: width: 160
                    | image_tag: alt: '', loading: 'lazy', class: 'lib-trust__icon-img', width: s.icon_size, height: s.icon_size
                  -}}
                {%- else -%}
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false">
                    {%- case b.icon -%}
                      {%- when 'truck' -%}
                        <path d="M14 17V6H3v11h1.5"/><path d="M14 9h4l3 3.5V17h-1.5"/><path d="M9.5 17h5"/><circle cx="7" cy="17" r="2"/><circle cx="17" cy="17" r="2"/>
                      {%- when 'return' -%}
                        <path d="M9 14 4 9l5-5"/><path d="M4 9h11a5 5 0 0 1 0 10h-4"/>
                      {%- when 'lock' -%}
                        <rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/><path d="M12 15v2"/>
                      {%- when 'shield' -%}
                        <path d="M12 3 5 6v5c0 4.5 3 8.5 7 10 4-1.5 7-5.5 7-10V6z"/><path d="m9 12 2 2 4-4"/>
                      {%- when 'leaf' -%}
                        <path d="M5 19c0-8 5-14 15-15-1 10-7 15-15 15z"/><path d="m5 19 8-8"/>
                      {%- when 'star' -%}
                        <path d="m12 3 2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1-4.4-4.3 6.1-.9z"/>
                      {%- when 'chat' -%}
                        <path d="M4 5h16v11H9l-5 4z"/><path d="M8 9.5h8"/><path d="M8 12.5h5"/>
                      {%- when 'gift' -%}
                        <rect x="3" y="8" width="18" height="4" rx="1"/><path d="M5 12v9h14v-9"/><path d="M12 8v13"/><path d="M12 8C11 5 7 4 7 6.5S10 8 12 8zm0 0c1-3 5-4 5-1.5S14 8 12 8z"/>
                      {%- when 'card' -%}
                        <rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 10h18"/><path d="M7 15h4"/>
                      {%- when 'clock' -%}
                        <circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>
                      {%- when 'heart' -%}
                        <path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z"/>
                      {%- when 'check' -%}
                        <circle cx="12" cy="12" r="9"/><path d="m8 12 3 3 5-6"/>
                      {%- when 'box' -%}
                        <path d="M3 7.5 12 3l9 4.5v9L12 21l-9-4.5z"/><path d="M3 7.5 12 12l9-4.5"/><path d="M12 12v9"/>
                      {%- when 'globe' -%}
                        <circle cx="12" cy="12" r="9"/><path d="M3 12h18"/><path d="M12 3c2.5 2.5 3.5 5.5 3.5 9s-1 6.5-3.5 9c-2.5-2.5-3.5-5.5-3.5-9s1-6.5 3.5-9z"/>
                    {%- endcase -%}
                  </svg>
                {%- endif -%}
              </span>
            {%- endif -%}
            <div class="lib-trust__body">
              {%- if b.title != blank -%}
                <p class="lib-trust__title">
                  {%- if b.link != blank -%}
                    <a class="lib-trust__link" href="{{ b.link }}">{{ b.title | escape }}</a>
                  {%- else -%}
                    {{- b.title | escape -}}
                  {%- endif -%}
                </p>
              {%- endif -%}
              {%- if b.text != blank -%}
                <p class="lib-trust__text">{{ b.text }}</p>
              {%- endif -%}
            </div>
          </li>
        {%- endfor -%}
      </ul>
    {%- endif -%}

    {%- if s.show_payment and shop.enabled_payment_types.size > 0 -%}
      <div class="lib-trust__pay">
        {%- if s.payment_label != blank -%}
          <p class="lib-trust__pay-label" id="LibTrustPay-{{ section.id }}">{{ s.payment_label | escape }}</p>
        {%- endif -%}
        <ul
          class="lib-trust__pay-list"
          role="list"
          {% if s.payment_label != blank %}
            aria-labelledby="LibTrustPay-{{ section.id }}"
          {% endif %}
        >
          {%- for type in shop.enabled_payment_types -%}
            <li class="lib-trust__pay-item">{{ type | payment_type_svg_tag: class: 'lib-trust__pay-icon' }}</li>
          {%- endfor -%}
        </ul>
      </div>
    {%- endif -%}
  </div>
</div>

{% stylesheet %}
  .lib-trust {
    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-gap: clamp(1rem, 3vw, 2rem);
    --lib-line: color-mix(in srgb, var(--lib-text) 14%, transparent);
  }
  .lib-trust__inner { max-width: 1200px; margin: 0 auto; }
  .lib-trust--full .lib-trust__inner { max-width: none; }
  @media (max-width: 749px) {
    .lib-trust { padding-top: var(--lib-pt-m); padding-bottom: var(--lib-pb-m); }
    .lib-trust[data-show='desktop'] { display: none; }
  }
  @media (min-width: 750px) {
    .lib-trust[data-show='mobile'] { display: none; }
  }

  .lib-trust__heading {
    margin: 0 0 clamp(1.25rem, 3vw, 2rem);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  .lib-trust__heading--small { font-size: clamp(1.125rem, 2vw, 1.5rem); }
  .lib-trust__heading--large { font-size: clamp(1.875rem, 4vw, 3rem); }
  .lib-trust__heading--xlarge { font-size: clamp(2.25rem, 5.5vw, 4rem); }

  /* List: columns per device. Mobile is 1 or 2 columns, or a scrolling row. */
  .lib-trust__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--lib-gap);
  }
  .lib-trust[data-cols-m='2'] .lib-trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (max-width: 749px) {
    .lib-trust[data-cols-m='scroll'] .lib-trust__list {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      margin-inline: -1rem;
      padding-inline: 1rem;
      scroll-padding-inline: 1rem;
    }
    .lib-trust[data-cols-m='scroll'] .lib-trust__list::-webkit-scrollbar { display: none; }
    .lib-trust[data-cols-m='scroll'] .lib-trust__item { flex: 0 0 72%; scroll-snap-align: start; }
  }
  @media (min-width: 750px) {
    .lib-trust .lib-trust__list,
    .lib-trust[data-cols-m='2'] .lib-trust__list { grid-template-columns: repeat(var(--lib-cols-t), minmax(0, 1fr)); }
  }
  @media (min-width: 990px) {
    .lib-trust .lib-trust__list,
    .lib-trust[data-cols-m='2'] .lib-trust__list { grid-template-columns: repeat(var(--lib-cols), minmax(0, 1fr)); }
  }

  /* Item: icon on top or beside the text. */
  .lib-trust__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.875rem;
    min-width: 0;
  }
  .lib-trust[data-icon-pos='side'] .lib-trust__item { flex-direction: row; align-items: flex-start; }
  .lib-trust__body { min-width: 0; }
  .lib-trust__title { margin: 0; font-weight: 600; font-size: 1rem; line-height: 1.35; }
  .lib-trust__text { margin: 0.3rem 0 0; font-size: 0.9rem; line-height: 1.5; opacity: 0.72; }
  .lib-trust__text a { color: inherit; }
  .lib-trust__link { color: inherit; text-decoration: none; }
  .lib-trust__link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
  .lib-trust__item--link:hover .lib-trust__link { text-decoration: underline; text-underline-offset: 0.2em; }
  .lib-trust__link:focus-visible { outline: none; }
  .lib-trust__link:focus-visible::after { outline: 2px solid currentColor; outline-offset: 4px; }
  .lib-trust__text a { position: relative; z-index: 1; }

  /* Alignment: desktop, then mobile override. Applies to icon-on-top items and the heading. */
  .lib-trust__inner[data-align='center'] .lib-trust__heading { text-align: center; }
  .lib-trust__inner[data-align='center'] .lib-trust__item { align-items: center; text-align: center; }
  .lib-trust[data-icon-pos='side'] .lib-trust__inner[data-align='center'] .lib-trust__item { justify-content: center; align-items: flex-start; text-align: left; }
  @media (max-width: 749px) {
    .lib-trust__inner[data-align-m='left'] .lib-trust__heading { text-align: left; }
    .lib-trust__inner[data-align-m='left'] .lib-trust__item { align-items: flex-start; text-align: left; }
    .lib-trust[data-icon-pos='side'] .lib-trust__inner[data-align-m='left'] .lib-trust__item { justify-content: flex-start; }
    .lib-trust__inner[data-align-m='center'] .lib-trust__heading { text-align: center; }
    .lib-trust__inner[data-align-m='center'] .lib-trust__item { align-items: center; text-align: center; }
    .lib-trust[data-icon-pos='side'] .lib-trust__inner[data-align-m='center'] .lib-trust__item { justify-content: center; align-items: flex-start; text-align: left; }
  }

  /* Icon */
  .lib-trust__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: var(--lib-icon-size);
    height: var(--lib-icon-size);
    color: var(--lib-accent);
  }
  .lib-trust__icon svg { width: 100%; height: 100%; display: block; }
  .lib-trust__icon-img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .lib-trust[data-icon-style='circle'] .lib-trust__icon,
  .lib-trust[data-icon-style='outline'] .lib-trust__icon {
    box-sizing: content-box;
    padding: calc(var(--lib-icon-size) * 0.38);
    border-radius: 50%;
  }
  .lib-trust[data-icon-style='circle'] .lib-trust__icon { background: color-mix(in srgb, var(--lib-accent) 12%, transparent); }
  .lib-trust[data-icon-style='outline'] .lib-trust__icon { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lib-accent) 40%, transparent); }

  /* Layout: row with dividers. Lines sit in the gap; the first column's line falls outside and is clipped. */
  .lib-trust--row .lib-trust__list { overflow: hidden; }
  .lib-trust--row .lib-trust__link:focus-visible::after { outline-offset: -2px; }
  .lib-trust--row .lib-trust__item::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: calc(var(--lib-gap) / -2 - 0.5px);
    border-inline-start: 1px solid var(--lib-line);
  }
  @media (max-width: 749px) {
    .lib-trust--row[data-cols-m='1'] .lib-trust__item::before { display: none; }
    .lib-trust--row[data-cols-m='1'] .lib-trust__item + .lib-trust__item { padding-top: var(--lib-gap); border-top: 1px solid var(--lib-line); }
    .lib-trust--row[data-cols-m='scroll'] .lib-trust__item:first-child::before { display: none; }
  }

  /* Layout: cards. */
  .lib-trust--cards .lib-trust__list { gap: clamp(0.75rem, 2vw, 1.25rem); }
  .lib-trust--cards .lib-trust__item {
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    background: var(--lib-card);
    border-radius: var(--lib-radius);
    box-shadow: inset 0 0 0 1px var(--lib-line);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
  }
  .lib-trust--cards .lib-trust__item--link:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lib-text) 30%, transparent); }

  /* Layout: compact inline, sized for under a buy button. Titles only. */
  .lib-trust--inline { --lib-gap: 0.5rem 1.25rem; }
  .lib-trust--inline .lib-trust__heading { font-size: 0.95rem; margin-bottom: 0.75rem; }
  .lib-trust--inline .lib-trust__list,
  .lib-trust--inline[data-cols-m] .lib-trust__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem 1.25rem;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
  .lib-trust--inline .lib-trust__item,
  .lib-trust--inline[data-icon-pos] .lib-trust__item { flex: 0 1 auto; flex-direction: row; align-items: center; gap: 0.5rem; }
  .lib-trust--inline .lib-trust__item::before { display: none; }
  .lib-trust--inline .lib-trust__icon { width: min(var(--lib-icon-size), 22px); height: min(var(--lib-icon-size), 22px); padding: 0; background: none; box-shadow: none; }
  .lib-trust--inline .lib-trust__title { font-size: 0.875rem; font-weight: 500; }
  .lib-trust--inline .lib-trust__text { display: none; }
  .lib-trust--inline .lib-trust__inner[data-align='center'] .lib-trust__list { justify-content: center; }
  @media (max-width: 749px) {
    .lib-trust--inline .lib-trust__inner[data-align-m='left'] .lib-trust__list { justify-content: flex-start; }
    .lib-trust--inline .lib-trust__inner[data-align-m='center'] .lib-trust__list { justify-content: center; }
  }

  /* Payment icons */
  .lib-trust__pay {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem 1rem;
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
    padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
    border-top: 1px solid var(--lib-line);
  }
  .lib-trust--inline .lib-trust__pay { margin-top: 1rem; padding-top: 0; border-top: 0; }
  .lib-trust__inner[data-align='center'] .lib-trust__pay { justify-content: center; }
  @media (max-width: 749px) {
    .lib-trust__inner[data-align-m='left'] .lib-trust__pay { justify-content: flex-start; }
    .lib-trust__inner[data-align-m='center'] .lib-trust__pay { justify-content: center; }
  }
  .lib-trust__pay-label { margin: 0; font-size: 0.85rem; opacity: 0.72; }
  .lib-trust__pay-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: inherit; gap: 0.5rem; }
  .lib-trust__pay-item { display: flex; }
  .lib-trust__pay-icon { display: block; height: 24px; width: auto; }
  span.lib-trust__pay-icon {
    padding: 0 0.5rem;
    line-height: 24px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px var(--lib-line);
    background: color-mix(in srgb, var(--lib-text) 4%, transparent);
  }

  @media (prefers-reduced-motion: reduce) {
    .lib-trust--cards .lib-trust__item { transition: none; }
    .lib-trust--cards .lib-trust__item--link:hover { transform: none; }
  }
{% endstylesheet %}

{% schema %}
{
  "name": "Lib · Trust badges",
  "tag": "section",
  "class": "lib-section",
  "max_blocks": 8,
  "settings": [
    { "type": "header", "content": "Content" },
    { "type": "inline_richtext", "id": "heading", "label": "Heading", "info": "Optional. Leave empty under a buy button." },
    {
      "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",
      "visible_if": "{{ section.settings.heading != blank }}"
    },
    {
      "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",
      "visible_if": "{{ section.settings.heading != blank }}"
    },

    { "type": "header", "content": "Payment icons" },
    { "type": "checkbox", "id": "show_payment", "label": "Show accepted payment icons", "info": "Icons for the payment methods active in your store's payment settings.", "default": true },
    { "type": "text", "id": "payment_label", "label": "Payment label", "default": "Secure payment with", "visible_if": "{{ section.settings.show_payment }}" },

    { "type": "header", "content": "Layout" },
    {
      "type": "select",
      "id": "layout",
      "label": "Style",
      "options": [
        { "value": "row", "label": "Row with dividers" },
        { "value": "cards", "label": "Cards" },
        { "value": "inline", "label": "Compact inline" }
      ],
      "default": "row",
      "info": "Compact inline shows small icons and titles only, for use under a buy button."
    },
    {
      "type": "range",
      "id": "columns",
      "label": "Columns on desktop",
      "info": "Tablets show up to 3.",
      "min": 2,
      "max": 6,
      "step": 1,
      "default": 4,
      "visible_if": "{{ section.settings.layout != 'inline' }}"
    },
    {
      "type": "select",
      "id": "columns_mobile",
      "label": "Mobile layout",
      "options": [
        { "value": "1", "label": "1 column" },
        { "value": "2", "label": "2 columns" },
        { "value": "scroll", "label": "Horizontal scroll" }
      ],
      "default": "2",
      "visible_if": "{{ section.settings.layout != 'inline' }}"
    },
    {
      "type": "select",
      "id": "icon_position",
      "label": "Icon position",
      "options": [
        { "value": "top", "label": "Above text" },
        { "value": "side", "label": "Beside text" }
      ],
      "default": "top",
      "visible_if": "{{ section.settings.layout != 'inline' }}"
    },
    { "type": "text_alignment", "id": "text_alignment", "label": "Alignment on desktop", "default": "center" },
    {
      "type": "select",
      "id": "text_alignment_mobile",
      "label": "Alignment on mobile",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" }
      ],
      "default": "center"
    },
    {
      "type": "select",
      "id": "section_width",
      "label": "Width",
      "options": [
        { "value": "page", "label": "Page width" },
        { "value": "full", "label": "Full width" }
      ],
      "default": "page"
    },
    { "type": "range", "id": "card_radius", "label": "Card corner radius", "min": 0, "max": 32, "step": 2, "unit": "px", "default": 14, "visible_if": "{{ section.settings.layout == 'cards' }}" },

    { "type": "header", "content": "Icons" },
    { "type": "range", "id": "icon_size", "label": "Icon size", "info": "Compact inline caps icons at 22px.", "min": 16, "max": 64, "step": 2, "unit": "px", "default": 30 },
    {
      "type": "select",
      "id": "icon_style",
      "label": "Icon background",
      "options": [
        { "value": "plain", "label": "None" },
        { "value": "circle", "label": "Tinted circle" },
        { "value": "outline", "label": "Outlined circle" }
      ],
      "default": "plain"
    },

    { "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": "#1C1917" },
    { "type": "color", "id": "color_icon", "label": "Icons", "default": "#9A5B34" },
    { "type": "color", "id": "color_card", "label": "Card background", "default": "#FFFFFF", "visible_if": "{{ section.settings.layout == 'cards' }}" },

    { "type": "header", "content": "Spacing and visibility" },
    { "type": "range", "id": "padding_top", "label": "Top padding on desktop", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 56 },
    { "type": "range", "id": "padding_bottom", "label": "Bottom padding on desktop", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 56 },
    { "type": "range", "id": "padding_top_mobile", "label": "Top padding on mobile", "min": 0, "max": 120, "step": 4, "unit": "px", "default": 40 },
    { "type": "range", "id": "padding_bottom_mobile", "label": "Bottom padding on mobile", "min": 0, "max": 120, "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": "badge",
      "name": "Trust point",
      "limit": 8,
      "settings": [
        {
          "type": "select",
          "id": "icon",
          "label": "Icon",
          "options": [
            { "value": "none", "label": "None" },
            { "value": "truck", "label": "Delivery truck" },
            { "value": "return", "label": "Returns" },
            { "value": "lock", "label": "Lock" },
            { "value": "shield", "label": "Shield" },
            { "value": "leaf", "label": "Leaf" },
            { "value": "star", "label": "Star" },
            { "value": "chat", "label": "Chat" },
            { "value": "gift", "label": "Gift" },
            { "value": "card", "label": "Card" },
            { "value": "clock", "label": "Clock" },
            { "value": "heart", "label": "Heart" },
            { "value": "check", "label": "Check" },
            { "value": "box", "label": "Package" },
            { "value": "globe", "label": "Globe" }
          ],
          "default": "truck"
        },
        { "type": "image_picker", "id": "icon_image", "label": "Custom icon", "info": "Optional. Replaces the built-in icon. A square SVG or PNG works best." },
        { "type": "text", "id": "title", "label": "Title", "default": "Free delivery over $75" },
        { "type": "inline_richtext", "id": "text", "label": "Text", "default": "Tracked to your door in 2 to 4 working days." },
        { "type": "url", "id": "link", "label": "Link", "info": "Optional. Makes the whole point clickable." }
      ]
    }
  ],
  "presets": [
    {
      "name": "Lib · Trust badges",
      "blocks": [
        { "type": "badge", "settings": { "icon": "truck", "title": "Free delivery over $75", "text": "Tracked to your door in 2 to 4 working days." } },
        { "type": "badge", "settings": { "icon": "return", "title": "30-day returns", "text": "Changed your mind? Send it back, on us." } },
        { "type": "badge", "settings": { "icon": "lock", "title": "Secure checkout", "text": "Encrypted payments, never stored by us." } },
        { "type": "badge", "settings": { "icon": "chat", "title": "Real people, real help", "text": "Write to us any weekday, we reply within a day." } }
      ]
    }
  ]
}
{% endschema %}
```

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