# Section Rendering API: ?sections= ve ?section_id=

> Shopify section’larının HTML’ini ?sections= ile beşe kadar, ?section_id= ile tek tek, istediğiniz sayfanın bağlamında çekin; sayfayı yenilemeden güncelleyin.

Sayfa: https://lintelagency.com/tr/kaynaklar/shopify-ipuclari/section-rendering-api

## Kısaca

Herhangi bir vitrin adresine ?sections=<id>,<id> eklediğinizde Shopify, o sayfanın bağlamında işlenmiş en fazla beş section’ın HTML’ini JSON olarak döndürür; ?section_id=<id> ise tek bir section’ı düz HTML olarak verir. Temalar bunu filtrelemeden sonra ürün listesini yenilemek, sayfa yenilemeden sayfalamak ya da sepet çekmecesini güncellemek için kullanır. q ve page gibi parametreler geçerliliğini korur. Section ID’si section.id’den gelir.

## Bilgiler

- **Birden fazla:** ?sections=a,b (JSON, en fazla 5)
- **Tek:** ?section_id=a (HTML)
- **Bağlam:** Çağırdığınız adres
- **Plan:** Her plan
- **Son kontrol:** 2 Kasım 2026

## Nasıl kullanılır

1. Section ID’sini bulun: Liquid’de {{ section.id }} ya da HTML’de id="shopify-section-…" sarmalayıcısı.
2. Section’ı, ihtiyaç duyduğu verinin bulunduğu sayfada isteyin: /collections/summer?sections=<id>&page=2.
3. shopify-section-<id> öğesini dönen HTML ile değiştirin.
4. Sepet değişikliklerinde section’ları /cart/add.js ya da /cart/change.js çağrısının içinde isteyin (bundled section rendering).

## Kod

### refresh-section.js

```js
// Re-renders one section in the context of the current page (for example a
// product grid after a filter change) without reloading the page.
// A section that fails to render comes back as null with HTTP 200.
async function refreshSection(sectionId, search = window.location.search) {
  const params = new URLSearchParams(search);
  params.set('sections', sectionId);
  const response = await fetch(`${window.location.pathname}?${params}`);
  if (!response.ok) throw new Error(`Section Rendering API: HTTP ${response.status}`);
  const sections = await response.json();
  const html = sections[sectionId];
  if (html == null) throw new Error(`Section ${sectionId} did not render`);
  document.getElementById(`shopify-section-${sectionId}`).outerHTML = html;
}

refreshSection('template--5678__main').catch((error) => console.error(error.message));
```

### urls.txt

```text
# Up to five sections as JSON, rendered in the context of the page you call
https://your-store.com/?sections=header,footer
https://your-store.com/collections/summer?sections=template--5678__main&page=2
https://your-store.com/products/example-product?sections[]=template--5678__main&sections[]=sections--1234__header

# One section as plain HTML (404 if the section ID doesn't exist)
https://your-store.com/products/example-product?section_id=template--5678__main

# Section IDs
static section file sections/social.liquid   ->  social
JSON template section                        ->  template--5678__image_banner
section group section                        ->  sections--1234__header
in Liquid: {{ section.id }}   in HTML: id="shopify-section-<section ID>"
```

## Sınırlar ve özel durumlar

- JSON şablonlarındaki ve section gruplarındaki section’ların ID’leri template--5678__main gibi otomatik üretilir; sabit yazmak yerine section.id’den okuyun.
- ?sections= ile işlenemeyen bir section HTTP 200 içinde null olarak gelir; ?section_id= bilinmeyen bir ID için 404 döndürür.
- Ayar değeri gönderemezsiniz; section kayıtlı ayarlarıyla ya da varsayılanlarıyla işlenir.
- Pazarın dil yolu korunsun diye adresleri Shopify.routes.root ya da location.pathname üzerinden kurun.

## Sorular

### Shopify’da sayfayı yenilemeden tek bir section nasıl yenilenir?

Sayfa adresini ?sections=<section id> ile çekin ve dönen HTML’i shopify-section-<id> öğesinin yerine koyun.

### Aynı anda kaç section isteyebilirim?

sections parametresiyle tek istekte en fazla beş.

### sections ile section_id arasındaki fark nedir?

sections bir ile beş arası section için JSON döndürür; section_id tek bir section’ı düz HTML olarak verir.

### Section ID’sini nerede bulurum?

Liquid’de section.id. Sayfa HTML’inde sarmalayıcının id’sindeki shopify-section- ifadesinden sonraki kısım. Statik bir section için dosya adı.

## Shopify belgeleri

- [Section Rendering API](https://shopify.dev/docs/api/ajax/section-rendering)
- [Bundled section rendering (Cart API)](https://shopify.dev/docs/api/ajax/reference/cart)

## İlgili içerikler

- [Ürün .js, cart.js ve diğer JSON adresleri](https://lintelagency.com/tr/kaynaklar/shopify-ipuclari/urun-js-ve-json-adresleri)
- [?view= parametresi: herhangi bir alternatif şablonu açın](https://lintelagency.com/tr/kaynaklar/shopify-ipuclari/view-parametresiyle-alternatif-sablon)
- [Ücretsiz kargo çubuğu Shopify bölümü](https://lintelagency.com/tr/kaynaklar/shopify-bolumleri/ucretsiz-kargo-cubugu)
- [Shopify’da Core Web Vitals ve INP: neyle iyileşir?](https://lintelagency.com/tr/blog/shopify-core-web-vitals-ve-inp)

Lisans: MIT. Kendi mağazanızda da müşteri işlerinizde de ücretsiz kullanabilirsiniz.