# Bülten kaydı: ücretsiz Shopify bölümü

> Aboneleri newsletter etiketli Shopify müşterisi olarak kaydeden e-posta formu; ortalanmış, görselli iki sütun ya da görsel banner. Uygulama, JavaScript yok.

Bülten kaydı, e-postaları Shopify’ın kendi müşteri formuyla toplayan ücretsiz bir Shopify bölümüdür; her abone müşteri listenize "newsletter" etiketiyle düşer ve bunları yakalamak için e-posta uygulaması gerekmez. Üç düzende gelir (ortalanmış, görselli iki sütunlu ya da görsel üzerinde banner), bir başarı mesajı ve Shopify’ın hata metnini gösterir; Online Store 2.0 temalarında uygulama olmadan çalışır.

- **Kategori:** Formlar ve bülten
- **Kullanıldığı yerler:** Ana sayfa, Alt bilgi alanı, Açılış sayfaları, Blog
- **Okuduğu veri:** Yalnızca içerik
- **Boyut:** 2 dosyada 26 KB, JavaScript yok
- **Lisans:** MIT, © 2026 Lintel
- **Sayfa:** https://lintelagency.com/tr/kaynaklar/shopify-bolumleri/bulten-kaydi
- **Canlı demo:** https://lintelagency.com/resources/shopify-sections/demo/lib-newsletter.html
- **Eklenme tarihi:** 2026-10-02

## Ne işe yarar

- Ana sayfada alt bilginin üstünde bir kayıt bandı
- Lansman ya da bekleme listesi açılış sayfasında iki sütunlu görsel ve form bloğu
- Blog yazılarının sonunda okurları aylık bir bültene davet eden tam genişlik banner

## Tema düzenleyici ayarları

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

### Content

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `eyebrow` | `text` | Eyebrow | The Sunday letter |  |
| `heading` | `inline_richtext` | Heading | `Slow mornings, <em>in your inbox</em>` |  |
| `heading_tag` | `select` | Heading tag | h2 | `h1`, `h2`, `h3`, `p` |
| `heading_size` | `select` | Heading size | large | `small`, `medium`, `large`, `xlarge` |
| `text` | `richtext` | Text | `<p>New pieces, studio notes and the occasional early-access sale. One email a month, never more.</p>` |  |

### Form

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `input_label` | `text` | Field label | Email address |  |
| `show_label` | `checkbox` | Show field label | `false` |  |
| `placeholder` | `text` | Field placeholder | you@example.com |  |
| `button_label` | `text` | Button label | Subscribe |  |
| `button_style` | `select` | Button style | primary | `primary`, `outline` |
| `field_style` | `select` | Field style | pill | `pill`, `square`, `underline` |
| `consent` | `inline_richtext` | Consent text | `By subscribing you agree to receive emails from us. Unsubscribe any time. Read our <a href="/policies/privacy-policy">privacy policy</a>.` |  |
| `success_message` | `text` | Success message | Thanks for subscribing. Your first letter arrives next Sunday. |  |

### Layout and image

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `layout` | `select` | Layout | split | `inline`, `split`, `banner` |
| `image` | `image_picker` | Desktop image | – |  |
| `image_mobile` | `image_picker` | Mobile image | – |  |
| `image_position` | `select` | Image position on desktop | left | `left`, `right` |
| `image_ratio` | `select` | Image shape | landscape | `adapt`, `square`, `portrait`, `landscape` |
| `overlay_color` | `color` | Overlay color | #1C1917 |  |
| `overlay_opacity` | `range` | Overlay opacity | `40` | 0–90 %, step 5 |
| `section_width` | `select` | Width | page | `page`, `full` |
| `content_width` | `range` | Content max width | `560` | 400–900 px, step 20 |
| `corner_radius` | `range` | Image corner radius | `16` | 0–40 px, step 2 |
| `text_alignment` | `text_alignment` | Text alignment on desktop | left |  |
| `text_alignment_mobile` | `select` | Text alignment on mobile | left | `left`, `center`, `right` |

### Colors

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `color_bg` | `color` | Background | #F5F1EA |  |
| `color_bg_gradient` | `color_background` | Background gradient | – |  |
| `color_text` | `color` | Text | #1C1917 |  |
| `color_on_image` | `color` | Text over image | #FFFFFF |  |
| `color_accent` | `color` | Accent (button, focus ring) | #1C1917 |  |
| `color_accent_text` | `color` | Text on accent | #F5F1EA |  |
| `color_field_bg` | `color` | Field background | #FFFFFF |  |
| `color_field_text` | `color` | Field text | #1C1917 |  |

### Spacing and visibility

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

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

### E-posta adresleri nereye gider?

Form, "newsletter" etiketiyle Shopify’ın yerleşik müşteri formuna gönderilir; aboneler Shopify yönetim panelinizde Customers altında görünür. Shopify müşterilerini senkronize eden e-posta uygulamaları onları oradan alabilir; bölümün kendisi üçüncü taraflara hiçbir şey göndermez.

### Ziyaretçi abone olduktan sonra ne görür?

Shopify e-postayı kabul ettikten sonra alan ve düğmenin yerini başarı mesajınız alır. Shopify reddederse, örneğin geçersiz bir adreste, hata metni alanın üstünde görünür ve alan ekran okuyucular için geçersiz olarak işaretlenir.

### Form erişilebilir mi?

E-posta alanının gerçek bir etiketi vardır. Görsel olarak gizleyebilirsiniz; ekran okuyucular yine okur. Alan autocomplete ile email türündedir, zorunludur ve aria-describedby ile onay metnine bağlıdır. Düğmenin ve onay bağlantısının görünür odak stilleri vardır.

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

Evet. İki sütunlu ve banner düzenleri 750px altında gösterilen, her biri kendi odak noktasına sahip ayrı bir mobil görsel alır. Ortalanmış düzende görsel yoktur.

### JavaScript ekler mi ya da sayfayı yavaşlatır mı?

JavaScript yok. Görsel lazy-load ile yüklenir; bölüm sayfadaki ilk iki bölümden biriyse hemen ve yüksek fetch önceliğiyle yüklenir.

## Kaynak kod

### sections/lib-newsletter.liquid

```liquid
{%- comment -%}
  MIT License · (c) 2026 Lintel · https://lintelagency.com/resources/shopify-sections
{%- endcomment -%}
{%- comment -%}
  Newsletter signup: Shopify customer form that adds the email as a customer tagged "newsletter".
  Three layouts: centered inline, split with an image (left or right), or a banner over a background image.
  Success message after posting, Shopify's field errors, consent line with link, three field styles.
  No JavaScript.
  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
  assign form_id = 'lib-newsletter-' | append: section.id
  assign input_id = 'LibNewsletterEmail-' | append: section.id
  assign consent_id = 'LibNewsletterConsent-' | append: section.id
  assign error_id = 'LibNewsletterError-' | append: section.id
  assign input_label = s.input_label | default: 'Email'
-%}

<div
  class="lib-newsletter lib-newsletter--{{ s.layout }} lib-newsletter--{{ s.section_width }}"
  {% if s.anchor_id != blank %}
    id="{{ s.anchor_id | handleize }}"
  {% endif %}
  data-show="{{ s.show_on }}"
  data-image-pos="{{ s.image_position }}"
  data-field="{{ s.field_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-on-image: {{ s.color_on_image }};
    --lib-accent: {{ s.color_accent }};
    --lib-accent-text: {{ s.color_accent_text }};
    --lib-field-bg: {{ s.color_field_bg }};
    --lib-field-text: {{ s.color_field_text }};
    --lib-overlay: {{ s.overlay_color }};
    --lib-overlay-o: {{ s.overlay_opacity | divided_by: 100.0 }};
    --lib-content-w: {{ s.content_width }}px;
    --lib-radius-frame: {{ s.corner_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-newsletter__inner">
    {%- if s.layout == 'split' -%}
      <div class="lib-newsletter__media" data-ratio="{{ s.image_ratio }}">
        {%- render 'lib-image',
          image: s.image,
          image_mobile: s.image_mobile,
          class: 'lib-newsletter__img',
          sizes: '(min-width: 990px) 50vw, 100vw',
          eager: eager
        -%}
      </div>
    {%- elsif s.layout == 'banner' -%}
      <div class="lib-newsletter__bg">
        {%- render 'lib-image',
          image: s.image,
          image_mobile: s.image_mobile,
          class: 'lib-newsletter__img',
          sizes: '100vw',
          eager: eager
        -%}
      </div>
      <div class="lib-newsletter__overlay" aria-hidden="true"></div>
    {%- endif -%}

    <div class="lib-newsletter__content" data-align="{{ s.text_alignment }}" data-align-m="{{ s.text_alignment_mobile }}">
      {%- if s.eyebrow != blank -%}
        <p class="lib-newsletter__eyebrow">{{ s.eyebrow | escape }}</p>
      {%- endif -%}

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

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

      {%- form 'customer', id: form_id, class: 'lib-newsletter__form' -%}
        <input type="hidden" name="contact[tags]" value="newsletter">

        {%- if form.posted_successfully -%}
          <p class="lib-newsletter__msg lib-newsletter__msg--success" role="status">
            <svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
              <path d="m5 10.5 3.2 3L15 6.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <span>{{ s.success_message | escape }}</span>
          </p>
        {%- else -%}
          {%- if form.errors -%}
            <div class="lib-newsletter__msg lib-newsletter__msg--error" id="{{ error_id }}" role="alert">
              {%- for field in form.errors -%}
                <p>
                  {%- if field == 'form' -%}
                    {{ form.errors.messages[field] }}
                  {%- else -%}
                    {{ form.errors.translated_fields[field] | capitalize }}
                    {{ form.errors.messages[field] }}
                  {%- endif -%}
                </p>
              {%- endfor -%}
            </div>
          {%- endif -%}

          <label class="lib-newsletter__label{% unless s.show_label %} lib-newsletter__sr{% endunless %}" for="{{ input_id }}">
            {{- input_label | escape -}}
          </label>
          <div class="lib-newsletter__row">
            <input
              class="lib-newsletter__input"
              id="{{ input_id }}"
              type="email"
              name="contact[email]"
              required
              autocomplete="email"
              autocapitalize="off"
              spellcheck="false"
              {% if s.placeholder != blank %}
                placeholder="{{ s.placeholder | escape }}"
              {% endif %}
              {% if form.errors %}
                aria-invalid="true"
              {% endif %}
              {% if form.errors or s.consent != blank %}
                aria-describedby="{% if form.errors %}{{ error_id }} {% endif %}{% if s.consent != blank %}{{ consent_id }}{% endif %}"
              {% endif %}
            >
            <button class="lib-newsletter__submit lib-newsletter__submit--{{ s.button_style }}" type="submit">
              {{- s.button_label | default: 'Subscribe' | escape -}}
            </button>
          </div>
        {%- endif -%}

        {%- if s.consent != blank -%}
          <p class="lib-newsletter__consent" id="{{ consent_id }}">{{ s.consent }}</p>
        {%- endif -%}
      {%- endform -%}
    </div>
  </div>
</div>

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

  /* Content column and alignment: desktop, then mobile override. */
  .lib-newsletter__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    width: 100%;
    max-width: var(--lib-content-w);
  }
  .lib-newsletter__content[data-align='center'] { align-items: center; text-align: center; margin-inline: auto; }
  .lib-newsletter__content[data-align='right'] { align-items: flex-end; text-align: right; margin-inline-start: auto; }
  @media (max-width: 749px) {
    .lib-newsletter__content[data-align-m] { margin-inline: 0; }
    .lib-newsletter__content[data-align-m='left'] { align-items: flex-start; text-align: left; }
    .lib-newsletter__content[data-align-m='center'] { align-items: center; text-align: center; margin-inline: auto; }
    .lib-newsletter__content[data-align-m='right'] { align-items: flex-end; text-align: right; margin-inline-start: auto; }
  }
  /* Inline layout: the column itself is always centered; alignment only moves the text. */
  .lib-newsletter--inline .lib-newsletter__content[data-align][data-align-m] { margin-inline: auto; }

  /* Split: image beside the content from 990px, stacked above it below. */
  .lib-newsletter--split .lib-newsletter__inner {
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
  }
  .lib-newsletter--split .lib-newsletter__content { max-width: none; }
  .lib-newsletter--split .lib-newsletter__content > * { max-width: var(--lib-content-w); }
  .lib-newsletter__media {
    position: relative;
    border-radius: var(--lib-radius-frame);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: color-mix(in srgb, var(--lib-text) 6%, transparent);
  }
  .lib-newsletter__media[data-ratio='square'] { aspect-ratio: 1; }
  .lib-newsletter__media[data-ratio='portrait'] { aspect-ratio: 4 / 5; }
  .lib-newsletter__media[data-ratio='landscape'] { aspect-ratio: 3 / 2; }
  .lib-newsletter__media[data-ratio='adapt'] { aspect-ratio: auto; }
  .lib-newsletter__img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .lib-newsletter__media[data-ratio='adapt'] .lib-newsletter__img { height: auto; }
  .lib-newsletter__img:is(svg) { fill: color-mix(in srgb, var(--lib-text) 25%, transparent); }
  @media (max-width: 749px) {
    .lib-newsletter__media[data-ratio='portrait'],
    .lib-newsletter__media[data-ratio='square'] { aspect-ratio: 4 / 3; }
  }
  @media (min-width: 990px) {
    .lib-newsletter--split .lib-newsletter__inner { grid-template-columns: 1fr 1fr; }
    .lib-newsletter--split[data-image-pos='right'] .lib-newsletter__media { order: 2; }
  }

  /* Banner: background image and overlay fill the frame; content sits on top. */
  .lib-newsletter--banner .lib-newsletter__inner {
    display: grid;
    padding: clamp(3rem, 9vw, 7rem) clamp(1.25rem, 5vw, 4rem);
    border-radius: var(--lib-radius-frame);
    overflow: hidden;
    isolation: isolate;
    color: var(--lib-on-image);
  }
  .lib-newsletter--banner.lib-newsletter--full .lib-newsletter__inner { border-radius: 0; }
  .lib-newsletter__bg,
  .lib-newsletter__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
  }
  .lib-newsletter__bg { background: color-mix(in srgb, var(--lib-text) 40%, transparent); }
  .lib-newsletter__overlay { background: var(--lib-overlay); opacity: var(--lib-overlay-o); }
  .lib-newsletter--banner .lib-newsletter__img { position: absolute; inset: 0; }

  .lib-newsletter__eyebrow {
    margin: 0 0 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.75;
  }
  .lib-newsletter__heading {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }
  .lib-newsletter__heading--small { font-size: clamp(1.5rem, 2.6vw, 2rem); }
  .lib-newsletter__heading--medium { font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
  .lib-newsletter__heading--xlarge { font-size: clamp(2.5rem, 6vw, 4.5rem); }
  .lib-newsletter__text {
    margin-top: 1rem;
    font-size: 1.0625rem;
    line-height: 1.6;
    opacity: 0.8;
  }
  .lib-newsletter__text > :first-child { margin-top: 0; }
  .lib-newsletter__text > :last-child { margin-bottom: 0; }

  /* Form */
  .lib-newsletter__form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 30rem;
    margin-top: 1.75rem;
  }
  .lib-newsletter__label {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
  }
  .lib-newsletter__sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .lib-newsletter__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .lib-newsletter__input {
    flex: 1 1 13rem;
    min-width: 0;
    min-height: 3rem;
    padding: 0.75rem 1.1rem;
    border: 1px solid color-mix(in srgb, var(--lib-field-text) 18%, transparent);
    border-radius: 999px;
    background: var(--lib-field-bg);
    color: var(--lib-field-text);
    font: inherit;
    font-size: 1rem;
    text-align: start;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .lib-newsletter__input::placeholder { color: var(--lib-field-text); opacity: 0.55; }
  .lib-newsletter__input:focus { outline: none; }
  .lib-newsletter__input:focus-visible {
    border-color: var(--lib-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lib-accent) 30%, transparent);
  }
  .lib-newsletter__input[aria-invalid='true'] { border-color: #b42318; }
  .lib-newsletter__submit {
    flex: 0 0 auto;
    min-height: 3rem;
    padding: 0.75rem 1.5rem;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  }
  .lib-newsletter__submit--primary {
    background: var(--lib-accent);
    color: var(--lib-accent-text);
  }
  .lib-newsletter__submit--outline {
    background: transparent;
    color: inherit;
    box-shadow: inset 0 0 0 1.5px currentColor;
  }
  .lib-newsletter__submit:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgb(0 0 0 / 0.45); }
  .lib-newsletter__submit--outline:hover { box-shadow: inset 0 0 0 1.5px currentColor, 0 8px 18px -10px rgb(0 0 0 / 0.45); }
  .lib-newsletter__submit:focus-visible {
    outline: 2px solid var(--lib-accent);
    outline-offset: 3px;
  }
  .lib-newsletter--banner .lib-newsletter__submit:focus-visible { outline-color: currentColor; }

  /* Field styles */
  .lib-newsletter[data-field='square'] .lib-newsletter__input,
  .lib-newsletter[data-field='square'] .lib-newsletter__submit { border-radius: 4px; }
  .lib-newsletter[data-field='underline'] .lib-newsletter__row { gap: 1rem; }
  .lib-newsletter[data-field='underline'] .lib-newsletter__input {
    padding-inline: 0;
    border-width: 0 0 1.5px;
    border-color: color-mix(in srgb, currentColor 45%, transparent);
    border-radius: 0;
    background: transparent;
    color: inherit;
  }
  .lib-newsletter[data-field='underline'] .lib-newsletter__input::placeholder { color: inherit; }
  .lib-newsletter[data-field='underline'] .lib-newsletter__input:focus-visible {
    border-color: currentColor;
    box-shadow: 0 1.5px 0 0 currentColor;
  }
  .lib-newsletter[data-field='underline'] .lib-newsletter__submit { border-radius: 0; }

  .lib-newsletter__content[data-align='center'] .lib-newsletter__form { align-items: stretch; }
  .lib-newsletter__content[data-align='center'] .lib-newsletter__label { align-self: center; }
  .lib-newsletter__content[data-align='right'] .lib-newsletter__label { align-self: flex-end; }
  @media (max-width: 749px) {
    .lib-newsletter__content[data-align-m='left'] .lib-newsletter__label { align-self: flex-start; }
    .lib-newsletter__content[data-align-m='center'] .lib-newsletter__label { align-self: center; }
    .lib-newsletter__content[data-align-m='right'] .lib-newsletter__label { align-self: flex-end; }
    .lib-newsletter__submit { flex-grow: 1; }
  }

  /* Messages and consent */
  .lib-newsletter__msg {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    font-size: 0.95rem;
    line-height: 1.45;
    text-align: start;
  }
  .lib-newsletter__msg--success {
    background: color-mix(in srgb, currentColor 8%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent);
  }
  .lib-newsletter__msg--success svg { flex: none; }
  .lib-newsletter__msg--error {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    background: #fef3f2;
    color: #b42318;
    box-shadow: inset 0 0 0 1px #fda29b;
  }
  .lib-newsletter__msg--error p { margin: 0; }
  .lib-newsletter__consent {
    margin: 0.9rem 0 0;
    font-size: 0.8rem;
    line-height: 1.5;
    opacity: 0.7;
  }
  .lib-newsletter__consent a { color: inherit; text-underline-offset: 0.2em; }
  .lib-newsletter__consent a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px; }

  @media (prefers-reduced-motion: reduce) {
    .lib-newsletter__input, .lib-newsletter__submit { transition: none; }
    .lib-newsletter__submit:hover { transform: none; }
  }
{% endstylesheet %}

{% schema %}
{
  "name": "Lib · Newsletter signup",
  "tag": "section",
  "class": "lib-section",
  "settings": [
    { "type": "header", "content": "Content" },
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "The Sunday letter" },
    { "type": "inline_richtext", "id": "heading", "label": "Heading", "default": "Slow mornings, <em>in your inbox</em>" },
    {
      "type": "select",
      "id": "heading_tag",
      "label": "Heading tag",
      "info": "Use H1 only when this is the page's main heading.",
      "options": [
        { "value": "h1", "label": "H1" },
        { "value": "h2", "label": "H2" },
        { "value": "h3", "label": "H3" },
        { "value": "p", "label": "Paragraph" }
      ],
      "default": "h2"
    },
    {
      "type": "select",
      "id": "heading_size",
      "label": "Heading size",
      "options": [
        { "value": "small", "label": "Small" },
        { "value": "medium", "label": "Medium" },
        { "value": "large", "label": "Large" },
        { "value": "xlarge", "label": "Extra large" }
      ],
      "default": "large"
    },
    { "type": "richtext", "id": "text", "label": "Text", "default": "<p>New pieces, studio notes and the occasional early-access sale. One email a month, never more.</p>" },

    { "type": "header", "content": "Form" },
    { "type": "text", "id": "input_label", "label": "Field label", "default": "Email address" },
    { "type": "checkbox", "id": "show_label", "label": "Show field label", "info": "When off, the label is still read by screen readers.", "default": false },
    { "type": "text", "id": "placeholder", "label": "Field placeholder", "default": "you@example.com" },
    { "type": "text", "id": "button_label", "label": "Button label", "default": "Subscribe" },
    {
      "type": "select",
      "id": "button_style",
      "label": "Button style",
      "options": [
        { "value": "primary", "label": "Solid" },
        { "value": "outline", "label": "Outline" }
      ],
      "default": "primary"
    },
    {
      "type": "select",
      "id": "field_style",
      "label": "Field style",
      "options": [
        { "value": "pill", "label": "Pill" },
        { "value": "square", "label": "Square" },
        { "value": "underline", "label": "Underline" }
      ],
      "default": "pill"
    },
    { "type": "inline_richtext", "id": "consent", "label": "Consent text", "info": "Small print under the form. Link your privacy policy here.", "default": "By subscribing you agree to receive emails from us. Unsubscribe any time. Read our <a href=\"/policies/privacy-policy\">privacy policy</a>." },
    { "type": "text", "id": "success_message", "label": "Success message", "default": "Thanks for subscribing. Your first letter arrives next Sunday." },

    { "type": "header", "content": "Layout and image" },
    {
      "type": "select",
      "id": "layout",
      "label": "Layout",
      "options": [
        { "value": "inline", "label": "Centered, no image" },
        { "value": "split", "label": "Split with image" },
        { "value": "banner", "label": "Banner over image" }
      ],
      "default": "split"
    },
    { "type": "image_picker", "id": "image", "label": "Desktop image", "visible_if": "{{ section.settings.layout != 'inline' }}" },
    { "type": "image_picker", "id": "image_mobile", "label": "Mobile image", "info": "Optional. Shown below 750px.", "visible_if": "{{ section.settings.layout != 'inline' }}" },
    {
      "type": "select",
      "id": "image_position",
      "label": "Image position on desktop",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "right", "label": "Right" }
      ],
      "default": "left",
      "visible_if": "{{ section.settings.layout == 'split' }}"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "label": "Image shape",
      "info": "Square and portrait show as 4:3 on mobile.",
      "options": [
        { "value": "adapt", "label": "Adapt to image" },
        { "value": "square", "label": "Square" },
        { "value": "portrait", "label": "Portrait" },
        { "value": "landscape", "label": "Landscape" }
      ],
      "default": "landscape",
      "visible_if": "{{ section.settings.layout == 'split' }}"
    },
    { "type": "color", "id": "overlay_color", "label": "Overlay color", "default": "#1C1917", "visible_if": "{{ section.settings.layout == 'banner' }}" },
    { "type": "range", "id": "overlay_opacity", "label": "Overlay opacity", "min": 0, "max": 90, "step": 5, "unit": "%", "default": 40, "visible_if": "{{ section.settings.layout == 'banner' }}" },
    {
      "type": "select",
      "id": "section_width",
      "label": "Width",
      "options": [
        { "value": "page", "label": "Page width" },
        { "value": "full", "label": "Full width" }
      ],
      "default": "page"
    },
    { "type": "range", "id": "content_width", "label": "Content max width", "min": 400, "max": 900, "step": 20, "unit": "px", "default": 560 },
    { "type": "range", "id": "corner_radius", "label": "Image corner radius", "min": 0, "max": 40, "step": 2, "unit": "px", "default": 16, "visible_if": "{{ section.settings.layout != 'inline' }}" },
    { "type": "text_alignment", "id": "text_alignment", "label": "Text alignment on desktop", "default": "left" },
    {
      "type": "select",
      "id": "text_alignment_mobile",
      "label": "Text alignment on mobile",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "left"
    },

    { "type": "header", "content": "Colors" },
    { "type": "color", "id": "color_bg", "label": "Background", "default": "#F5F1EA" },
    { "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_on_image", "label": "Text over image", "info": "Banner layout only.", "default": "#FFFFFF" },
    { "type": "color", "id": "color_accent", "label": "Accent (button, focus ring)", "default": "#1C1917" },
    { "type": "color", "id": "color_accent_text", "label": "Text on accent", "default": "#F5F1EA" },
    { "type": "color", "id": "color_field_bg", "label": "Field background", "info": "Pill and square fields. Underline fields use the text color.", "default": "#FFFFFF" },
    { "type": "color", "id": "color_field_text", "label": "Field text", "default": "#1C1917" },

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