# Kargo ve iade: ücretsiz Shopify bölümü

> Teslimat süreleri, ücretsiz kargo eşiği ve iade sözü simgeli maddelerde; kendi gün sayılarınızdan teslimat tarihi tahmini ve mağaza politikası bağlantıları.

Kargo ve iade, teslimat ve iade bilgisini müşterinin karar verdiği yere koyan ücretsiz bir Shopify bölümüdür: teslimat süresi, ücretsiz kargo eşiği ve iade süresi için simgeli maddeler, kendi belirlediğiniz en az ve en çok gün sayısını "Per 5 Kas – Pzt 9 Kas" gibi tarihlere çeviren isteğe bağlı bir teslimat tahmini ve Shopify yönetim panelinde yazılmış kargo ve iade politikalarına bağlantılar. Ana sayfada bir sıra ya da ürün sayfasında satın alma alanının altında kısa bir liste olarak, Online Store 2.0 temalarında uygulama olmadan çalışır.

- **Kategori:** Ürün sayfası
- **Kullanıldığı yerler:** Ürün, Ana sayfa, Sepet, Açılış sayfaları
- **Okuduğu veri:** Yalnızca içerik ve mağazanın kargo ve iade politikaları
- **Boyut:** 2 dosyada 27 KB, küçük bir betikle
- **Lisans:** MIT, © 2026 Lintel
- **Sayfa:** https://lintelagency.com/tr/kaynaklar/shopify-bolumleri/kargo-ve-iade
- **Canlı demo:** https://lintelagency.com/resources/shopify-sections/demo/lib-shipping-returns.html
- **Eklenme tarihi:** 2026-11-02

## Ne işe yarar

- Ürün şablonlarında satın alma alanının altında kısa bir liste: teslimat süresi, iade süresi, yurt dışı gönderim
- Ana sayfada ya da alt bilginin üstünde bir sıra teslimat ve iade sözü
- Bayram ya da yılbaşı öncesinde ürün ya da sepet sayfasında tahmini teslimat tarihi

## Tema düzenleyici ayarları

Bölüm tema düzenleyicide “Lib · Shipping & returns” 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 | Delivery and returns |  |
| `heading_tag` | `select` | Heading tag | h2 | `h1`, `h2`, `h3`, `p` |
| `heading_size` | `select` | Heading size | medium | `small`, `medium`, `large` |
| `text` | `richtext` | Intro text | – |  |

### Store policies

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `show_policy_links` | `checkbox` | Link to the store's shipping and refund policies | `true` |  |
| `shipping_policy_label` | `text` | Shipping policy link text | Shipping policy |  |
| `refund_policy_label` | `text` | Refund policy link text | Returns and refunds |  |

### Layout

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `layout` | `select` | Layout | row | `row`, `list` |
| `item_style` | `select` | Item style | plain | `plain`, `card`, `divided` |
| `columns` | `range` | Columns on desktop | `4` | 1–4, step 1 |
| `columns_mobile` | `range` | Columns on mobile | `1` | 1–2, step 1 |
| `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 (icons) | #7A5A3A |  |
| `color_accent_text` | `color` | Text on accent | #FFFFFF |  |
| `color_card` | `color` | Card background | #FAF6F1 |  |
| `color_border` | `color` | Borders | #E7E0D8 |  |

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

### Motion

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

## Bloklar

Toplamda en fazla 8 blok.

### Point (`item`)

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `icon` | `select` | Icon | truck | `truck`, `return`, `clock`, `calendar`, `globe`, `box`, `store`, `shield`, `card`, `gift`, `leaf` |
| `icon_image` | `image_picker` | Custom icon | – |  |
| `title` | `text` | Title | Free delivery over $75 |  |
| `text` | `inline_richtext` | Text | Tracked delivery in 2 to 4 business days. |  |
| `link_label` | `text` | Link text | – |  |
| `link_url` | `url` | Link | – |  |
| `link_new_tab` | `checkbox` | Open link in a new tab | `false` |  |

### Delivery estimate (`estimate`, en fazla 1)

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `icon` | `select` | Icon | calendar | `calendar`, `truck`, `clock`, `box` |
| `icon_image` | `image_picker` | Custom icon | – |  |
| `title` | `text` | Title | Estimated delivery |  |
| `min_days` | `range` | Earliest delivery, days from today | `3` | 0–30, step 1 |
| `max_days` | `range` | Latest delivery, days from today | `5` | 0–45, step 1 |
| `business_days` | `checkbox` | Count business days only (skip weekends) | `true` |  |
| `estimate_text` | `text` | Estimate text | Order today, arrives {dates} |  |
| `fallback_text` | `text` | Text without dates | Arrives in 3 to 5 business days |  |
| `link_label` | `text` | Link text | – |  |
| `link_url` | `url` | Link | – |  |
| `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-shipping-returns.liquid` adında yeni bir dosya ekleyin, aşağıdaki kaynak koddan `sections/lib-shipping-returns.liquid` içeriğini yapıştırıp kaydedin.
4. `lib-button.liquid` dosyalarını da aynı şekilde `snippets` klasörüne ekleyin. Başka bir Lib bölümünden gelen aynı adlı bir snippet zaten varsa aynı dosyadır; tek kopya yeterli.
5. Kopyada **Özelleştir**’i açın, **Bölüm ekle**’yi seçin ve **Lib · Shipping & returns** 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-shipping-returns.liquid https://lintelagency.com/resources/shopify-sections/files/lib-shipping-returns.liquid
curl -fsSL -o snippets/lib-button.liquid https://lintelagency.com/resources/shopify-sections/files/lib-button.liquid
shopify theme push --theme <unpublished-theme-id> --only sections/lib-shipping-returns.liquid --only snippets/lib-button.liquid
```

Canlı temaya asla göndermeyin: her zaman yayında olmayan bir temanın kimliğini verin, `--live` ya da `--allow-live` kullanmayın. Ardından bölümü yukarıdaki gibi tema düzenleyicide ekleyin.

## Dosyalar

- [sections/lib-shipping-returns.liquid](https://lintelagency.com/resources/shopify-sections/files/lib-shipping-returns.liquid): `sections/` klasörüne
- [snippets/lib-button.liquid](https://lintelagency.com/resources/shopify-sections/files/lib-button.liquid): `snippets/` klasörüne

## Sık sorulan sorular

### Teslimat tarihleri nereden geliyor?

Teslimat tahmini bloğunda belirlediğiniz en erken ve en geç gün sayısından. Bölüm bunları müşterinin bugününden itibaren sayar, iş günü seçerseniz hafta sonlarını atlar ve tarihleri sayfanın dilinde yazar. Gerçek hazırlık ve taşıma sürelerinizi girin: bölüm kargo firması verisi okumaz.

### Betik çalışmazsa ne görünür?

Bloğun "tarihsiz metin" satırı, örneğin "3 ila 5 iş gününde teslim". Tarihler, küçük betik onları hesapladıktan sonra bu satırın yerini alır.

### Kargo ve iade politikalarıma bağlantı verir mi?

Evet; seçenek açıksa ve politika Shopify yönetim panelinde Ayarlar > Politikalar altında varsa. Yazmadığınız bir politikaya bağlantı verilmez; bağlantı metinleri değiştirip çevirebileceğiniz ayarlardır.

### Ücretsiz kargo eşiğini hesaplar mı?

Hayır. "75 $ üzeri ücretsiz teslimat" gibi eşikleri siz yazarsınız; böylece kargo ücretlerinizin tam olarak ne yaptığını söylerler. Bölüm sepeti okumaz.

### Kendi simgelerimi kullanabilir miyim?

Evet. Her maddede on bir hazır çizgi simge (teslimat, iade, saat, takvim, yurt dışı, paket, mağazadan teslim, koruma, ödeme, hediye, yaprak) ya da yüklediğiniz küçük bir görsel kullanılabilir.

## Kaynak kod

### sections/lib-shipping-returns.liquid

```liquid
{%- comment -%}
  MIT License · (c) 2026 Lintel · https://lintelagency.com/resources/shopify-sections
{%- endcomment -%}
{%- comment -%}
  Shipping and returns: delivery times, thresholds and the returns promise as icon points, in a
  row for a home or landing page or a compact list under a product's buy box. An optional delivery
  estimate turns the merchant's own minimum and maximum days into dates in the shopper's language
  (small script; without it the typed fallback line shows). Optional links to the store's own
  shipping and refund policies. Nothing is invented: every number is typed by the merchant.
  Depends on: snippets/lib-button.liquid
{%- endcomment -%}

{%- liquid
  assign s = section.settings
  assign heading_tag = s.heading_tag | default: 'h2'
  assign policy_links = false
  if s.show_policy_links
    if shop.shipping_policy != blank or shop.refund_policy != blank
      assign policy_links = true
    endif
  endif
-%}

<div
  class="lib-shipping lib-shipping--{{ 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.item_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-accent-text: {{ s.color_accent_text }};
    --lib-card: {{ s.color_card }};
    --lib-border: {{ s.color_border }};
    --lib-cols: {{ s.columns }};
    --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-shipping__inner" data-align="{{ s.text_alignment }}" data-align-m="{{ s.text_alignment_mobile }}">
    {%- if s.heading != blank or s.text != blank -%}
      <div class="lib-shipping__header">
        {%- if s.heading != blank -%}
          <{{ heading_tag }} class="lib-shipping__heading lib-shipping__heading--{{ s.heading_size }}">
            {{- s.heading -}}
          </{{ heading_tag }}>
        {%- endif -%}
        {%- if s.text != blank -%}
          <div class="lib-shipping__text">{{ s.text }}</div>
        {%- endif -%}
      </div>
    {%- endif -%}

    {%- if section.blocks.size > 0 -%}
      <ul class="lib-shipping__list" role="list">
        {%- for block in section.blocks -%}
          {%- assign b = block.settings -%}
          <li class="lib-shipping__item" {{ block.shopify_attributes }}>
            <span class="lib-shipping__icon" aria-hidden="true">
              {%- if b.icon_image != blank -%}
                {{ b.icon_image | image_url: width: 96 | image_tag: class: 'lib-shipping__icon-img', loading: 'lazy', alt: '' }}
              {%- else -%}
                <svg viewBox="0 0 24 24" width="24" height="24" focusable="false" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
                  {%- case b.icon -%}
                    {%- when 'return' -%}
                      <path d="M9 14 5 10l4-4"/><path d="M5 10h9a5 5 0 0 1 0 10h-3"/>
                    {%- when 'clock' -%}
                      <circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/>
                    {%- when 'calendar' -%}
                      <rect x="4" y="5.5" width="16" height="14" rx="2"/><path d="M4 10h16M8.5 3.5v4M15.5 3.5v4"/>
                    {%- when 'globe' -%}
                      <circle cx="12" cy="12" r="8.5"/><path d="M3.5 12h17M12 3.5c2.5 2.5 3.5 5.5 3.5 8.5s-1 6-3.5 8.5c-2.5-2.5-3.5-5.5-3.5-8.5s1-6 3.5-8.5"/>
                    {%- when 'box' -%}
                      <path d="m12 3 8 4v10l-8 4-8-4V7z"/><path d="m4 7 8 4 8-4M12 11v10"/>
                    {%- when 'store' -%}
                      <path d="M4 9.5 5.5 4h13L20 9.5M4 9.5h16M4 9.5a2.7 2.7 0 0 0 5.3 0 2.7 2.7 0 0 0 5.4 0 2.7 2.7 0 0 0 5.3 0M5.5 12v8h13v-8M10 20v-4.5h4V20"/>
                    {%- when 'shield' -%}
                      <path d="M12 3l7 3v5c0 5-3 8.5-7 10-4-1.5-7-5-7-10V6z"/><path d="m9 12 2 2 4-4"/>
                    {%- when 'card' -%}
                      <rect x="3" y="5.5" width="18" height="13" rx="2"/><path d="M3 10h18M7 15h3"/>
                    {%- when 'gift' -%}
                      <path d="M4 10h16v10H4zM3 7h18v3H3zM12 7v13M12 7c-1.5-3.5-5-3.5-5-1.25S9 7 12 7zM12 7c1.5-3.5 5-3.5 5-1.25S15 7 12 7z"/>
                    {%- when 'leaf' -%}
                      <path d="M5 19c0-8 5-13 14-14 0 9-5 14-13 14M5 19l7-7"/>
                    {%- else -%}
                      <path d="M3 6h11v10H3zM14 9h4l3 3v4h-7"/><circle cx="7" cy="17.5" r="1.8"/><circle cx="17" cy="17.5" r="1.8"/>
                  {%- endcase -%}
                </svg>
              {%- endif -%}
            </span>
            <div class="lib-shipping__body">
              {%- if b.title != blank -%}
                <p class="lib-shipping__title">{{ b.title | escape }}</p>
              {%- endif -%}

              {%- if block.type == 'estimate' -%}
                {%- comment -%} The script swaps the fallback for dates; without it the fallback stays. {%- endcomment -%}
                <p
                  class="lib-shipping__detail lib-shipping__estimate"
                  data-min="{{ b.min_days }}"
                  data-max="{{ b.max_days }}"
                  data-business="{{ b.business_days }}"
                  data-template="{{ b.estimate_text | escape }}"
                >
                  {{- b.fallback_text | escape -}}
                </p>
              {%- elsif b.text != blank -%}
                <p class="lib-shipping__detail">{{ b.text }}</p>
              {%- endif -%}

              {%- if b.link_label != blank and b.link_url != blank -%}
                <div class="lib-shipping__link">
                  {%- render 'lib-button', label: b.link_label, url: b.link_url, style: 'text', new_tab: b.link_new_tab, arrow: false -%}
                </div>
              {%- endif -%}
            </div>
          </li>
        {%- endfor -%}
      </ul>
    {%- endif -%}

    {%- if policy_links -%}
      <ul class="lib-shipping__policies" role="list">
        {%- if shop.shipping_policy != blank and s.shipping_policy_label != blank -%}
          <li><a href="{{ shop.shipping_policy.url }}">{{ s.shipping_policy_label | escape }}</a></li>
        {%- endif -%}
        {%- if shop.refund_policy != blank and s.refund_policy_label != blank -%}
          <li><a href="{{ shop.refund_policy.url }}">{{ s.refund_policy_label | escape }}</a></li>
        {%- endif -%}
      </ul>
    {%- endif -%}
  </div>
</div>

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

  .lib-shipping__header { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
  .lib-shipping[data-layout='list'] .lib-shipping__header { margin-bottom: 1.25rem; }
  .lib-shipping__heading {
    margin: 0;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  .lib-shipping__heading--small { font-size: clamp(1.125rem, 1.6vw, 1.375rem); }
  .lib-shipping__heading--large { font-size: clamp(2rem, 4vw, 3.25rem); }
  .lib-shipping__text { margin-top: 0.75rem; font-size: 1rem; line-height: 1.6; opacity: 0.8; }
  .lib-shipping__text > :first-child { margin-top: 0; }
  .lib-shipping__text > :last-child { margin-bottom: 0; }

  .lib-shipping__list {
    display: grid;
    grid-template-columns: repeat(var(--lib-cols), minmax(0, 1fr));
    gap: clamp(1rem, 2.5vw, 2rem);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .lib-shipping[data-layout='list'] .lib-shipping__list { grid-template-columns: 1fr; gap: 1rem; }
  @media (max-width: 749px) {
    .lib-shipping__list { grid-template-columns: repeat(var(--lib-cols-m), minmax(0, 1fr)); }
  }
  .lib-shipping__item { display: flex; flex-direction: column; gap: 0.875rem; min-width: 0; }
  .lib-shipping[data-layout='list'] .lib-shipping__item { flex-direction: row; align-items: flex-start; gap: 0.875rem; }
  .lib-shipping[data-style='card'] .lib-shipping__item {
    padding: clamp(1.125rem, 2.5vw, 1.75rem);
    border-radius: 14px;
    background: var(--lib-card);
    box-shadow: inset 0 0 0 1px var(--lib-border);
  }
  .lib-shipping[data-style='divided'][data-layout='list'] .lib-shipping__item + .lib-shipping__item {
    padding-top: 1rem;
    border-top: 1px solid var(--lib-border);
  }

  .lib-shipping__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--lib-accent) 12%, transparent);
    color: var(--lib-accent);
  }
  .lib-shipping[data-layout='list'] .lib-shipping__icon { width: 2.25rem; height: 2.25rem; }
  .lib-shipping__icon svg { width: 1.375rem; height: 1.375rem; }
  .lib-shipping[data-layout='list'] .lib-shipping__icon svg { width: 1.125rem; height: 1.125rem; }
  .lib-shipping__icon-img { display: block; width: 1.375rem; height: 1.375rem; object-fit: contain; }

  .lib-shipping__body { min-width: 0; }
  .lib-shipping__title { margin: 0; font-weight: 600; font-size: 1.0625rem; line-height: 1.35; }
  .lib-shipping[data-layout='list'] .lib-shipping__title { font-size: 0.9375rem; }
  .lib-shipping__detail { margin: 0.35rem 0 0; font-size: 0.9375rem; line-height: 1.55; opacity: 0.8; }
  .lib-shipping[data-layout='list'] .lib-shipping__detail { font-size: 0.875rem; margin-top: 0.2rem; }
  .lib-shipping__detail a { color: inherit; text-underline-offset: 0.2em; }
  .lib-shipping__estimate strong { font-weight: 600; opacity: 1; }
  .lib-shipping__link { margin-top: 0.6rem; font-size: 0.9375rem; }

  .lib-shipping__policies {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.9375rem;
  }
  .lib-shipping__policies a {
    display: inline-block;
    padding-block: 0.25rem;
    color: inherit;
    text-underline-offset: 0.25em;
  }
  .lib-shipping__policies a:focus-visible,
  .lib-shipping__detail a:focus-visible { outline: 2px solid var(--lib-accent); outline-offset: 3px; }

  /* Alignment applies to the header, the row layout's items and the policy links. */
  .lib-shipping__inner[data-align='center'] .lib-shipping__header { text-align: center; }
  .lib-shipping__inner[data-align='center'] .lib-shipping__policies { justify-content: center; }
  .lib-shipping[data-layout='row'] .lib-shipping__inner[data-align='center'] .lib-shipping__item { align-items: center; text-align: center; }
  @media (max-width: 749px) {
    .lib-shipping__inner[data-align-m='left'] .lib-shipping__header { text-align: left; }
    .lib-shipping__inner[data-align-m='left'] .lib-shipping__policies { justify-content: flex-start; }
    .lib-shipping[data-layout='row'] .lib-shipping__inner[data-align-m='left'] .lib-shipping__item { align-items: flex-start; text-align: left; }
    .lib-shipping__inner[data-align-m='center'] .lib-shipping__header { text-align: center; }
    .lib-shipping__inner[data-align-m='center'] .lib-shipping__policies { justify-content: center; }
    .lib-shipping[data-layout='row'] .lib-shipping__inner[data-align-m='center'] .lib-shipping__item { align-items: center; text-align: center; }
  }

  /* Motion: items rise in one after another as they scroll into view. */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .lib-shipping[data-animate] .lib-shipping__item {
        animation: lib-shipping-rise linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 60%;
      }
    }
  }
  @keyframes lib-shipping-rise {
    from { opacity: 0; transform: translateY(18px); }
  }
{% endstylesheet %}

{% javascript %}
  (() => {
    const DAY_MS = 86400000;
    const isWeekend = (date) => date.getDay() === 0 || date.getDay() === 6;
    // Counts forward from today; business days skip Saturdays and Sundays.
    const addDays = (start, days, business) => {
      const date = new Date(start.getTime());
      let left = days;
      while (left > 0) {
        date.setTime(date.getTime() + DAY_MS);
        if (!business || !isWeekend(date)) left -= 1;
      }
      return date;
    };
    const fill = (root) => {
      root.querySelectorAll('.lib-shipping__estimate[data-template]').forEach((el) => {
        const min = Number(el.dataset.min);
        const max = Math.max(min, Number(el.dataset.max));
        if (!Number.isFinite(min) || !el.dataset.template.includes('{dates}')) return;
        const business = el.dataset.business === 'true';
        const today = new Date();
        today.setHours(12, 0, 0, 0);
        let format;
        try {
          format = new Intl.DateTimeFormat(document.documentElement.lang || undefined, {weekday: 'short', month: 'short', day: 'numeric'});
        } catch (error) {
          // An unknown page language falls back to the browser's.
          format = new Intl.DateTimeFormat(undefined, {weekday: 'short', month: 'short', day: 'numeric'});
        }
        const from = format.format(addDays(today, min, business));
        const to = format.format(addDays(today, max, business));
        const dates = document.createElement('strong');
        dates.textContent = min === max ? from : `${from} – ${to}`;
        const [before, after] = el.dataset.template.split('{dates}');
        el.replaceChildren(before, dates, after ?? '');
      });
    };
    fill(document);
    document.addEventListener('shopify:section:load', (event) => fill(event.target));
  })();
{% endjavascript %}

{% schema %}
{
  "name": "Lib · Shipping & returns",
  "tag": "section",
  "class": "lib-section",
  "max_blocks": 8,
  "settings": [
    { "type": "header", "content": "Content" },
    { "type": "inline_richtext", "id": "heading", "label": "Heading", "default": "Delivery and returns" },
    {
      "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": "header", "content": "Store policies" },
    { "type": "checkbox", "id": "show_policy_links", "label": "Link to the store's shipping and refund policies", "info": "Shown only for policies filled in under Settings > Policies.", "default": true },
    { "type": "text", "id": "shipping_policy_label", "label": "Shipping policy link text", "default": "Shipping policy" },
    { "type": "text", "id": "refund_policy_label", "label": "Refund policy link text", "default": "Returns and refunds" },

    { "type": "header", "content": "Layout" },
    {
      "type": "select",
      "id": "layout",
      "label": "Layout",
      "info": "Row suits home and landing pages; list suits the area under a product's buy box.",
      "options": [
        { "value": "row", "label": "Row" },
        { "value": "list", "label": "List" }
      ],
      "default": "row"
    },
    {
      "type": "select",
      "id": "item_style",
      "label": "Item style",
      "options": [
        { "value": "plain", "label": "Plain" },
        { "value": "card", "label": "Card" },
        { "value": "divided", "label": "Divided (list only)" }
      ],
      "default": "plain"
    },
    { "type": "range", "id": "columns", "label": "Columns on desktop", "min": 1, "max": 4, "step": 1, "default": 4, "visible_if": "{{ section.settings.layout == 'row' }}" },
    { "type": "range", "id": "columns_mobile", "label": "Columns on mobile", "min": 1, "max": 2, "step": 1, "default": 1, "visible_if": "{{ section.settings.layout == 'row' }}" },
    {
      "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 (icons)", "default": "#7A5A3A" },
    { "type": "color", "id": "color_accent_text", "label": "Text on accent", "default": "#FFFFFF" },
    { "type": "color", "id": "color_card", "label": "Card background", "default": "#FAF6F1" },
    { "type": "color", "id": "color_border", "label": "Borders", "default": "#E7E0D8" },

    { "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." },

    { "type": "header", "content": "Motion" },
    { "type": "checkbox", "id": "animate", "label": "Fade in on scroll", "info": "Only in browsers that support scroll-driven animations; never when reduced motion is on.", "default": false }
  ],
  "blocks": [
    {
      "type": "item",
      "name": "Point",
      "settings": [
        {
          "type": "select",
          "id": "icon",
          "label": "Icon",
          "options": [
            { "value": "truck", "label": "Delivery" },
            { "value": "return", "label": "Returns" },
            { "value": "clock", "label": "Clock" },
            { "value": "calendar", "label": "Calendar" },
            { "value": "globe", "label": "International" },
            { "value": "box", "label": "Package" },
            { "value": "store", "label": "Store pickup" },
            { "value": "shield", "label": "Protection" },
            { "value": "card", "label": "Payment" },
            { "value": "gift", "label": "Gift" },
            { "value": "leaf", "label": "Leaf" }
          ],
          "default": "truck"
        },
        { "type": "image_picker", "id": "icon_image", "label": "Custom icon", "info": "Optional. Replaces the icon above." },
        { "type": "text", "id": "title", "label": "Title", "default": "Free delivery over $75" },
        { "type": "inline_richtext", "id": "text", "label": "Text", "default": "Tracked delivery in 2 to 4 business days." },
        { "type": "text", "id": "link_label", "label": "Link text" },
        { "type": "url", "id": "link_url", "label": "Link" },
        { "type": "checkbox", "id": "link_new_tab", "label": "Open link in a new tab", "default": false }
      ]
    },
    {
      "type": "estimate",
      "name": "Delivery estimate",
      "limit": 1,
      "settings": [
        { "type": "paragraph", "content": "Shows dates counted from the shopper's today, in their language. Use your real handling plus transit times." },
        {
          "type": "select",
          "id": "icon",
          "label": "Icon",
          "options": [
            { "value": "calendar", "label": "Calendar" },
            { "value": "truck", "label": "Delivery" },
            { "value": "clock", "label": "Clock" },
            { "value": "box", "label": "Package" }
          ],
          "default": "calendar"
        },
        { "type": "image_picker", "id": "icon_image", "label": "Custom icon", "info": "Optional. Replaces the icon above." },
        { "type": "text", "id": "title", "label": "Title", "default": "Estimated delivery" },
        { "type": "range", "id": "min_days", "label": "Earliest delivery, days from today", "min": 0, "max": 30, "step": 1, "default": 3 },
        { "type": "range", "id": "max_days", "label": "Latest delivery, days from today", "min": 0, "max": 45, "step": 1, "default": 5 },
        { "type": "checkbox", "id": "business_days", "label": "Count business days only (skip weekends)", "default": true },
        { "type": "text", "id": "estimate_text", "label": "Estimate text", "info": "{dates} becomes the date range.", "default": "Order today, arrives {dates}" },
        { "type": "text", "id": "fallback_text", "label": "Text without dates", "info": "Shown until the dates load, and if they can't.", "default": "Arrives in 3 to 5 business days" },
        { "type": "text", "id": "link_label", "label": "Link text" },
        { "type": "url", "id": "link_url", "label": "Link" },
        { "type": "checkbox", "id": "link_new_tab", "label": "Open link in a new tab", "default": false }
      ]
    }
  ],
  "presets": [
    {
      "name": "Lib · Shipping & returns",
      "blocks": [
        { "type": "item", "settings": { "icon": "truck", "title": "Free delivery over $75", "text": "Tracked delivery in 2 to 4 business days." } },
        { "type": "estimate" },
        { "type": "item", "settings": { "icon": "return", "title": "30-day returns", "text": "Changed your mind? Send it back unused within 30 days." } },
        { "type": "item", "settings": { "icon": "globe", "title": "We ship worldwide", "text": "Duties and taxes are shown at checkout." } }
      ]
    }
  ]
}
{% 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 %}
```

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