# Çok sütunlu içerik: ücretsiz Shopify bölümü

> Görsel ya da ikon, başlık, metin ve bağlantılı en fazla 12 sütun. Masaüstünde 2–6; mobilde 1, 2 ya da kayan satır. Düz, dolu ya da çerçeveli kart.

Çok sütunlu içerik, her birinde bir görsel ya da küçük ikon, başlık, metin ve isteğe bağlı bağlantı olan en fazla on iki sütun dizen ücretsiz bir Shopify bölümüdür. Masaüstünde 2–6 sütun, mobilde tek sütun, iki sütun ya da kaydırılabilir bir satır ve düz, dolu ya da çerçeveli kart stili seçersiniz. Yalnızca HTML ve CSS’tir; Online Store 2.0 temalarında uygulama olmadan çalışır.

- **Kategori:** İçerik ve hikâye anlatımı
- **Kullanıldığı yerler:** Ana sayfa, Ürün, Hakkımızda, Açılış sayfaları
- **Okuduğu veri:** Yalnızca içerik
- **Boyut:** 3 dosyada 28 KB, JavaScript yok
- **Lisans:** MIT, © 2026 Lintel
- **Sayfa:** https://lintelagency.com/tr/kaynaklar/shopify-bolumleri/cok-sutunlu
- **Canlı demo:** https://lintelagency.com/resources/shopify-sections/demo/lib-multicolumn.html
- **Eklenme tarihi:** 2026-10-02

## Ne işe yarar

- Ana sayfada ya da Hakkımızda sayfasında her adım için bir sütunla "nasıl yapılıyor" satırı
- Küçük ikonlarla ürün sayfasında faydalar ya da bakım talimatları
- Her biri bir sütunda rehberlere, hizmetlere ya da koleksiyonlara bağlanan açılış sayfası

## Tema düzenleyici ayarları

Bölüm tema düzenleyicide “Lib · Multicolumn” 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 | From clay to your table |  |
| `heading_tag` | `select` | Heading tag | h2 | `h1`, `h2`, `h3`, `p` |
| `heading_size` | `select` | Heading size | medium | `small`, `medium`, `large`, `xlarge` |
| `text` | `richtext` | Text | `<p>Every piece passes through the same four steps in our studio, by hand.</p>` |  |

### Button

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `button_label` | `text` | Button label | Visit the studio |  |
| `button_url` | `url` | Button link | – |  |
| `button_style` | `select` | Button style | outline | `primary`, `outline`, `text` |
| `button_new_tab` | `checkbox` | Open link in a new tab | `false` |  |

### Images and cards

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `image_ratio` | `select` | Image shape | square | `adapt`, `square`, `portrait`, `landscape`, `circle` |
| `image_width` | `select` | Image width | full | `full`, `small` |
| `card_style` | `select` | Column style | none | `none`, `filled`, `outline` |
| `corner_radius` | `range` | Corner radius | `12` | 0–40 px, step 2 |

### Layout

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `columns` | `range` | Columns on desktop | `4` | 2–6, step 1 |
| `columns_mobile` | `select` | Columns on mobile | scroll | `1`, `2`, `scroll` |
| `column_gap` | `range` | Space between columns | `32` | 8–64 px, step 4 |
| `section_width` | `select` | Width | page | `page`, `full` |
| `text_alignment` | `text_alignment` | Heading and button alignment on desktop | center |  |
| `text_alignment_mobile` | `select` | Heading and button alignment on mobile | left | `left`, `center`, `right` |
| `column_alignment` | `select` | Column text alignment | left | `left`, `center` |

### 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 | #2A2420 |  |
| `color_card` | `color` | Card | #FFFFFF |  |
| `color_accent` | `color` | Accent (links, solid button) | #9A5B3A |  |
| `color_accent_text` | `color` | Text on accent | #FFFFFF |  |

### Spacing and visibility

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

## Bloklar

Toplamda en fazla 12 blok.

### Column (`column`, en fazla 12)

| Kimlik | Tür | Etiket | Varsayılan | Seçenekler ya da aralık |
| --- | --- | --- | --- | --- |
| `media` | `select` | Media | image | `image`, `icon`, `none` |
| `image` | `image_picker` | Desktop image | – |  |
| `image_mobile` | `image_picker` | Mobile image | – |  |
| `icon` | `image_picker` | Icon | – |  |
| `heading` | `text` | Heading | Column heading |  |
| `text` | `richtext` | Text | `<p>One or two sentences about this step, feature or promise.</p>` |  |
| `link` | `url` | Link | – |  |
| `link_label` | `text` | Link label | – |  |
| `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-multicolumn.liquid` adında yeni bir dosya ekleyin, aşağıdaki kaynak koddan `sections/lib-multicolumn.liquid` içeriğini yapıştırıp kaydedin.
4. `lib-image.liquid` ve `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 · Multicolumn** 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-multicolumn.liquid https://lintelagency.com/resources/shopify-sections/files/lib-multicolumn.liquid
curl -fsSL -o snippets/lib-image.liquid https://lintelagency.com/resources/shopify-sections/files/lib-image.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-multicolumn.liquid --only snippets/lib-image.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-multicolumn.liquid](https://lintelagency.com/resources/shopify-sections/files/lib-multicolumn.liquid): `sections/` klasörüne
- [snippets/lib-image.liquid](https://lintelagency.com/resources/shopify-sections/files/lib-image.liquid): `snippets/` 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

### Kaç sütun ekleyebilirim, nasıl alt satıra geçerler?

En fazla on iki sütun bloğu. Masaüstünde satır başına 2–6 sütun ayarlayın; fazla sütunlar yeni bir satıra geçer. 750px ile 989px arasında ızgara en fazla üç sütun gösterir. Mobilde tek sütun, iki sütun ya da kaydırılabilir bir satır seçersiniz.

### Her sütunun mobilde farklı bir görseli olabilir mi?

Evet. Her sütunun bir masaüstü görseli ve 750px altında gösterilen isteğe bağlı bir mobil görseli vardır; her biri tema düzenleyicideki kendi odak noktasına uyar. Bir sütun küçük bir ikon (48px) da gösterebilir ya da hiç medya göstermeyebilir.

### Kaydırılabilir satır nasıl çalışır?

Mobilde sütunlar, bölümün içinde yakalama noktalarıyla yana kayan bir satırda durur; sayfanın kendisi yatay kaymaz. CSS scroll snapping kullanır; bölümde JavaScript yoktur.

### Bir sütundaki bağlantılar nasıl çalışır?

Bir bağlantı ve etiket ekleyin; etiket metnin altında bir okla görünür. Etiketsiz bir bağlantı eklerseniz sütun başlığı bağlantı olur. İkisi de yeni sekmede açılabilir.

### Görseller sayfayı yavaşlatır mı?

Bölüm sayfadaki ilk iki bölümden biriyse ilk satır hariç görseller lazy-load ile yüklenir. Sabit bir görsel şekliyle (kare, dikey, yatay ya da daire) her görsel yerini önceden ayırır; böylece görseller yüklenirken düzen kaymaz.

## Kaynak kod

### sections/lib-multicolumn.liquid

```liquid
{%- comment -%}
  MIT License · (c) 2026 Lintel · https://lintelagency.com/resources/shopify-sections
{%- endcomment -%}
{%- comment -%}
  Multicolumn: up to 12 columns, each with an image (separate mobile image) or a small icon,
  a heading, text and an optional link. 2 to 6 columns on desktop; 1, 2 or a swipeable row on mobile.
  Card style none / filled / outline. HTML and CSS only, no JavaScript.
  Depends on: snippets/lib-image.liquid, snippets/lib-button.liquid
{%- endcomment -%}

{%- liquid
  assign s = section.settings
  assign heading_tag = s.heading_tag | default: 'h2'
  assign col_tag = 'h3'
  if heading_tag == 'h3' or heading_tag == 'p'
    assign col_tag = 'h4'
  endif
  assign eager = false
  if section.index <= 2
    assign eager = true
  endif
  assign col_vw = 100 | divided_by: s.columns
  if s.image_width == 'small'
    assign col_vw = col_vw | divided_by: 2
  endif
  assign img_sizes = '(min-width: 990px) ' | append: col_vw | append: 'vw, (min-width: 750px) 33vw, 80vw'
-%}

<div
  class="lib-multicolumn lib-multicolumn--{{ s.section_width }}"
  {% if s.anchor_id != blank %}
    id="{{ s.anchor_id | handleize }}"
  {% endif %}
  data-show="{{ s.show_on }}"
  data-mobile="{{ s.columns_mobile }}"
  data-card="{{ s.card_style }}"
  data-img-width="{{ s.image_width }}"
  data-col-align="{{ s.column_alignment }}"
  style="
    --lib-bg: {{ s.color_bg }};
    {% if s.color_bg_gradient != blank %}--lib-bg-image: {{ s.color_bg_gradient }};{% endif %}
    --lib-text: {{ s.color_text }};
    --lib-card: {{ s.color_card }};
    --lib-accent: {{ s.color_accent }};
    --lib-accent-text: {{ s.color_accent_text }};
    --lib-cols: {{ s.columns }};
    --lib-gap: {{ s.column_gap }}px;
    --lib-radius-img: {{ 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-multicolumn__inner">
    {%- if s.heading != blank or s.text != blank -%}
      <header class="lib-multicolumn__header" data-align="{{ s.text_alignment }}" data-align-m="{{ s.text_alignment_mobile }}">
        {%- if s.heading != blank -%}
          <{{ heading_tag }} class="lib-multicolumn__heading lib-multicolumn__heading--{{ s.heading_size }}">
            {{- s.heading -}}
          </{{ heading_tag }}>
        {%- endif -%}
        {%- if s.text != blank -%}
          <div class="lib-multicolumn__intro">{{ s.text }}</div>
        {%- endif -%}
      </header>
    {%- endif -%}

    {%- if section.blocks.size > 0 -%}
      <ul class="lib-multicolumn__grid" role="list">
        {%- for block in section.blocks -%}
          {%- assign b = block.settings -%}
          <li class="lib-multicolumn__col" {{ block.shopify_attributes }}>
            {%- if b.media == 'image' -%}
              <div class="lib-multicolumn__media" data-ratio="{{ s.image_ratio }}">
                {%- liquid
                  assign img_eager = false
                  if eager and forloop.index <= s.columns
                    assign img_eager = true
                  endif
                  render 'lib-image', image: b.image, image_mobile: b.image_mobile, class: 'lib-multicolumn__img', sizes: img_sizes, eager: img_eager, placeholder: 'image'
                -%}
              </div>
            {%- elsif b.media == 'icon' and b.icon != blank -%}
              {{ b.icon | image_url: width: 192 | image_tag: class: 'lib-multicolumn__icon', loading: 'lazy', alt: '' }}
            {%- endif -%}

            <div class="lib-multicolumn__body">
              {%- if b.heading != blank -%}
                <{{ col_tag }} class="lib-multicolumn__title">
                  {%- if b.link != blank and b.link_label == blank -%}
                    <a
                      class="lib-multicolumn__title-link"
                      href="{{ b.link }}"
                      {% if b.new_tab %}
                        target="_blank" rel="noopener"
                      {% endif %}
                    >
                      {{- b.heading | escape -}}
                    </a>
                  {%- else -%}
                    {{- b.heading | escape -}}
                  {%- endif -%}
                </{{ col_tag }}>
              {%- endif -%}
              {%- if b.text != blank -%}
                <div class="lib-multicolumn__text">{{ b.text }}</div>
              {%- endif -%}
              {%- if b.link != blank and b.link_label != blank -%}
                <a
                  class="lib-multicolumn__link"
                  href="{{ b.link }}"
                  {% if b.new_tab %}
                    target="_blank" rel="noopener"
                  {% endif %}
                >
                  {{- b.link_label | escape -}}
                  <svg 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>
                </a>
              {%- endif -%}
            </div>
          </li>
        {%- endfor -%}
      </ul>
    {%- endif -%}

    {%- if s.button_label != blank -%}
      <div class="lib-multicolumn__actions" data-align="{{ s.text_alignment }}" data-align-m="{{ s.text_alignment_mobile }}">
        {%- render 'lib-button',
          label: s.button_label,
          url: s.button_url,
          style: s.button_style,
          new_tab: s.button_new_tab
        -%}
      </div>
    {%- endif -%}
  </div>
</div>

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

  /* Header: alignment per device. */
  .lib-multicolumn__header { max-width: 42rem; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
  .lib-multicolumn__header[data-align='left'] { margin-left: 0; text-align: left; }
  .lib-multicolumn__header[data-align='right'] { margin-right: 0; text-align: right; }
  @media (max-width: 749px) {
    .lib-multicolumn__header[data-align-m='left'] { margin-left: 0; margin-right: auto; text-align: left; }
    .lib-multicolumn__header[data-align-m='center'] { margin-inline: auto; text-align: center; }
    .lib-multicolumn__header[data-align-m='right'] { margin-right: 0; margin-left: auto; text-align: right; }
  }
  .lib-multicolumn__heading {
    margin: 0;
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  .lib-multicolumn__heading--small { font-size: clamp(1.4rem, 2.5vw, 2rem); }
  .lib-multicolumn__heading--large { font-size: clamp(2rem, 4.5vw, 3.5rem); }
  .lib-multicolumn__heading--xlarge { font-size: clamp(2.5rem, 6vw, 4.5rem); }
  .lib-multicolumn__intro { margin-top: 1rem; font-size: 1.0625rem; line-height: 1.6; opacity: 0.75; }
  .lib-multicolumn__intro > :first-child { margin-top: 0; }
  .lib-multicolumn__intro > :last-child { margin-bottom: 0; }

  /* Grid: columns per device, or a swipeable row on mobile. */
  .lib-multicolumn__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: min(var(--lib-gap), 1.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .lib-multicolumn[data-mobile='2'] .lib-multicolumn__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: min(var(--lib-gap), 1rem); }
  @media (max-width: 749px) {
    .lib-multicolumn[data-mobile='scroll'] .lib-multicolumn__grid {
      display: flex;
      overflow-x: auto;
      margin-inline: -1rem;
      padding: 0 1rem 0.75rem;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: 1rem;
      scrollbar-width: thin;
      overscroll-behavior-x: contain;
    }
    .lib-multicolumn[data-mobile='scroll'] .lib-multicolumn__col { flex: 0 0 78%; scroll-snap-align: start; }
    .lib-multicolumn[data-mobile='2'] { --lib-pad: 1rem; }
    .lib-multicolumn[data-mobile='2'] .lib-multicolumn__title { font-size: 1.05rem; }
    .lib-multicolumn[data-mobile='2'] .lib-multicolumn__text { font-size: 0.9375rem; }
  }
  @media (min-width: 750px) {
    .lib-multicolumn .lib-multicolumn__grid,
    .lib-multicolumn[data-mobile='2'] .lib-multicolumn__grid {
      grid-template-columns: repeat(min(var(--lib-cols), 3), minmax(0, 1fr));
      gap: var(--lib-gap);
    }
  }
  @media (min-width: 990px) {
    .lib-multicolumn .lib-multicolumn__grid,
    .lib-multicolumn[data-mobile='2'] .lib-multicolumn__grid {
      grid-template-columns: repeat(var(--lib-cols), minmax(0, 1fr));
    }
  }

  /* Column */
  .lib-multicolumn__col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    text-align: left;
  }
  .lib-multicolumn[data-col-align='center'] .lib-multicolumn__col { align-items: center; text-align: center; }

  /* Card styles: filled and outline wrap each column; a full-width image runs to the card edges. */
  .lib-multicolumn[data-card='filled'] .lib-multicolumn__col,
  .lib-multicolumn[data-card='outline'] .lib-multicolumn__col {
    padding: var(--lib-pad);
    border-radius: var(--lib-radius-img);
    overflow: hidden;
  }
  .lib-multicolumn[data-card='filled'] .lib-multicolumn__col { background: var(--lib-card); }
  .lib-multicolumn[data-card='outline'] .lib-multicolumn__col {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lib-text) 16%, transparent);
  }
  .lib-multicolumn[data-card='filled'][data-img-width='full'] .lib-multicolumn__media,
  .lib-multicolumn[data-card='outline'][data-img-width='full'] .lib-multicolumn__media {
    width: calc(100% + 2 * var(--lib-pad));
    max-width: none;
    margin: calc(-1 * var(--lib-pad)) calc(-1 * var(--lib-pad)) var(--lib-pad);
    border-radius: 0;
  }

  /* Media */
  .lib-multicolumn__media {
    position: relative;
    width: 100%;
    margin-bottom: 1.25rem;
    border-radius: var(--lib-radius-img);
    overflow: hidden;
    background: color-mix(in srgb, var(--lib-text) 6%, transparent);
  }
  .lib-multicolumn[data-img-width='small'] .lib-multicolumn__media { width: 50%; max-width: 12rem; }
  .lib-multicolumn[data-img-width='small'] .lib-multicolumn__col { align-items: center; }
  .lib-multicolumn__media[data-ratio='square'] { aspect-ratio: 1; }
  .lib-multicolumn__media[data-ratio='portrait'] { aspect-ratio: 4 / 5; }
  .lib-multicolumn__media[data-ratio='landscape'] { aspect-ratio: 3 / 2; }
  .lib-multicolumn__media[data-ratio='circle'] { aspect-ratio: 1; border-radius: 50%; }
  .lib-multicolumn__img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .lib-multicolumn__media[data-ratio='adapt'] .lib-multicolumn__img { height: auto; }
  .lib-multicolumn__img:is(svg) { fill: color-mix(in srgb, var(--lib-text) 25%, transparent); }
  .lib-multicolumn__icon {
    display: block;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.25rem;
    object-fit: contain;
  }

  /* Body */
  .lib-multicolumn__body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; width: 100%; }
  .lib-multicolumn[data-col-align='center'] .lib-multicolumn__body { align-items: center; }
  .lib-multicolumn__title { margin: 0; font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.01em; }
  .lib-multicolumn__title-link { color: inherit; text-decoration: none; }
  .lib-multicolumn__title-link:hover { text-decoration: underline; text-underline-offset: 0.2em; }
  .lib-multicolumn__text { margin-top: 0.5rem; line-height: 1.6; opacity: 0.75; }
  .lib-multicolumn__text > :first-child { margin-top: 0; }
  .lib-multicolumn__text > :last-child { margin-bottom: 0; }
  .lib-multicolumn__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    margin-top: auto;
    padding-top: 1rem;
    font-weight: 600;
    color: var(--lib-accent);
    text-decoration: none;
  }
  .lib-multicolumn__link svg { transition: transform 0.2s ease; }
  .lib-multicolumn__link:hover svg { transform: translateX(3px); }
  .lib-multicolumn__link:focus-visible,
  .lib-multicolumn__title-link:focus-visible {
    outline: 2px solid var(--lib-accent);
    outline-offset: 3px;
    border-radius: 2px;
  }

  /* Button under the grid follows the heading alignment. */
  .lib-multicolumn__actions { display: flex; justify-content: center; margin-top: clamp(2rem, 4vw, 3rem); }
  .lib-multicolumn__actions[data-align='left'] { justify-content: flex-start; }
  .lib-multicolumn__actions[data-align='right'] { justify-content: flex-end; }
  @media (max-width: 749px) {
    .lib-multicolumn__actions[data-align-m='left'] { justify-content: flex-start; }
    .lib-multicolumn__actions[data-align-m='center'] { justify-content: center; }
    .lib-multicolumn__actions[data-align-m='right'] { justify-content: flex-end; }
  }
  @media (prefers-reduced-motion: reduce) {
    .lib-multicolumn__link svg { transition: none; }
    .lib-multicolumn__link:hover svg { transform: none; }
  }
{% endstylesheet %}

{% schema %}
{
  "name": "Lib · Multicolumn",
  "tag": "section",
  "class": "lib-section",
  "max_blocks": 12,
  "settings": [
    { "type": "header", "content": "Content" },
    { "type": "inline_richtext", "id": "heading", "label": "Heading", "default": "From clay to your table" },
    {
      "type": "select",
      "id": "heading_tag",
      "label": "Heading tag",
      "info": "Use H1 only when this is the page's main heading.",
      "options": [
        { "value": "h1", "label": "H1" },
        { "value": "h2", "label": "H2" },
        { "value": "h3", "label": "H3" },
        { "value": "p", "label": "Paragraph" }
      ],
      "default": "h2"
    },
    {
      "type": "select",
      "id": "heading_size",
      "label": "Heading size",
      "options": [
        { "value": "small", "label": "Small" },
        { "value": "medium", "label": "Medium" },
        { "value": "large", "label": "Large" },
        { "value": "xlarge", "label": "Extra large" }
      ],
      "default": "medium"
    },
    { "type": "richtext", "id": "text", "label": "Text", "default": "<p>Every piece passes through the same four steps in our studio, by hand.</p>" },

    { "type": "header", "content": "Button" },
    { "type": "text", "id": "button_label", "label": "Button label", "default": "Visit the studio" },
    { "type": "url", "id": "button_url", "label": "Button link" },
    {
      "type": "select",
      "id": "button_style",
      "label": "Button style",
      "options": [
        { "value": "primary", "label": "Solid" },
        { "value": "outline", "label": "Outline" },
        { "value": "text", "label": "Text link" }
      ],
      "default": "outline"
    },
    { "type": "checkbox", "id": "button_new_tab", "label": "Open link in a new tab", "default": false },

    { "type": "header", "content": "Images and cards" },
    {
      "type": "select",
      "id": "image_ratio",
      "label": "Image shape",
      "options": [
        { "value": "adapt", "label": "Adapt to image" },
        { "value": "square", "label": "Square" },
        { "value": "portrait", "label": "Portrait" },
        { "value": "landscape", "label": "Landscape" },
        { "value": "circle", "label": "Circle" }
      ],
      "default": "square"
    },
    {
      "type": "select",
      "id": "image_width",
      "label": "Image width",
      "options": [
        { "value": "full", "label": "Full column width" },
        { "value": "small", "label": "Small, centered" }
      ],
      "default": "full"
    },
    {
      "type": "select",
      "id": "card_style",
      "label": "Column style",
      "options": [
        { "value": "none", "label": "None" },
        { "value": "filled", "label": "Filled card" },
        { "value": "outline", "label": "Outlined card" }
      ],
      "default": "none"
    },
    { "type": "range", "id": "corner_radius", "label": "Corner radius", "info": "Images, and cards when a column style is set.", "min": 0, "max": 40, "step": 2, "unit": "px", "default": 12 },

    { "type": "header", "content": "Layout" },
    { "type": "range", "id": "columns", "label": "Columns on desktop", "min": 2, "max": 6, "step": 1, "default": 4 },
    {
      "type": "select",
      "id": "columns_mobile",
      "label": "Columns on mobile",
      "info": "Between 750px and 989px the grid shows up to three columns.",
      "options": [
        { "value": "1", "label": "1 column" },
        { "value": "2", "label": "2 columns" },
        { "value": "scroll", "label": "Swipeable row" }
      ],
      "default": "scroll"
    },
    { "type": "range", "id": "column_gap", "label": "Space between columns", "min": 8, "max": 64, "step": 4, "unit": "px", "default": 32 },
    {
      "type": "select",
      "id": "section_width",
      "label": "Width",
      "options": [
        { "value": "page", "label": "Page width" },
        { "value": "full", "label": "Full width" }
      ],
      "default": "page"
    },
    { "type": "text_alignment", "id": "text_alignment", "label": "Heading and button alignment on desktop", "default": "center" },
    {
      "type": "select",
      "id": "text_alignment_mobile",
      "label": "Heading and button alignment on mobile",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "left"
    },
    {
      "type": "select",
      "id": "column_alignment",
      "label": "Column text alignment",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" }
      ],
      "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": "#2A2420" },
    { "type": "color", "id": "color_card", "label": "Card", "default": "#FFFFFF", "visible_if": "{{ section.settings.card_style == 'filled' }}" },
    { "type": "color", "id": "color_accent", "label": "Accent (links, solid button)", "default": "#9A5B3A" },
    { "type": "color", "id": "color_accent_text", "label": "Text on accent", "default": "#FFFFFF" },

    { "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": 88 },
    { "type": "range", "id": "padding_bottom", "label": "Bottom padding on desktop", "min": 0, "max": 200, "step": 4, "unit": "px", "default": 88 },
    { "type": "range", "id": "padding_top_mobile", "label": "Top padding on mobile", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 56 },
    { "type": "range", "id": "padding_bottom_mobile", "label": "Bottom padding on mobile", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 56 },
    {
      "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": "column",
      "name": "Column",
      "limit": 12,
      "settings": [
        {
          "type": "select",
          "id": "media",
          "label": "Media",
          "options": [
            { "value": "image", "label": "Image" },
            { "value": "icon", "label": "Small icon" },
            { "value": "none", "label": "None" }
          ],
          "default": "image"
        },
        { "type": "image_picker", "id": "image", "label": "Desktop image", "visible_if": "{{ block.settings.media == 'image' }}" },
        { "type": "image_picker", "id": "image_mobile", "label": "Mobile image", "info": "Optional. Shown below 750px.", "visible_if": "{{ block.settings.media == 'image' }}" },
        { "type": "image_picker", "id": "icon", "label": "Icon", "info": "Shown at 48px. A square SVG or PNG works best.", "visible_if": "{{ block.settings.media == 'icon' }}" },
        { "type": "text", "id": "heading", "label": "Heading", "default": "Column heading" },
        { "type": "richtext", "id": "text", "label": "Text", "default": "<p>One or two sentences about this step, feature or promise.</p>" },
        { "type": "url", "id": "link", "label": "Link" },
        { "type": "text", "id": "link_label", "label": "Link label", "info": "Without a label, the heading becomes the link.", "visible_if": "{{ block.settings.link != blank }}" },
        { "type": "checkbox", "id": "new_tab", "label": "Open link in a new tab", "default": false, "visible_if": "{{ block.settings.link != blank }}" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Lib · Multicolumn",
      "blocks": [
        { "type": "column", "settings": { "heading": "Thrown on the wheel", "text": "<p>Each form starts as a ball of local stoneware clay, shaped by hand on the wheel.</p>" } },
        { "type": "column", "settings": { "heading": "Dipped in glaze", "text": "<p>Our glazes are mixed in small batches, so every piece carries its own variation.</p>" } },
        { "type": "column", "settings": { "heading": "Fired twice", "text": "<p>A bisque firing, then a glaze firing, make the pieces ready for daily use.</p>" } },
        { "type": "column", "settings": { "heading": "Packed with care", "text": "<p>Wrapped in recycled paper and boxed without plastic.</p>", "link_label": "Shipping details" } }
      ]
    }
  ]
}
{% 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 %}
```

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