# request.design_mode ve request.page_type

> request.design_mode ile analitiği tema editörü dışında tutun, editör ipuçları gösterin; request.page_type ile script’leri yalnızca gereken sayfalarda yükleyin.

Sayfa: https://lintelagency.com/tr/kaynaklar/shopify-ipuclari/design-mode-ve-page-type

## Kısaca

request.design_mode, sayfa tema editörünün içinde işlendiğinde true döner; böylece analitik etiketlerini atlayabilir ya da kurulum ipuçlarını yalnızca mağaza sahibine gösterebilirsiniz. request.page_type ise product, collection, search, cart ya da index gibi sayfa türünü verir; theme.liquid içinde bir script’i yalnızca kullanıldığı yerde yüklemek için birebirdir. JavaScript tarafında Shopify.designMode ve shopify:section:load olayı editörü kapsar.

## Bilgiler

- **Editör kontrolü:** request.design_mode (Liquid), Shopify.designMode (JS)
- **Sayfa türü:** request.page_type
- **Değerler:** product, collection, search, cart, index, page, …
- **Plan:** Her plan
- **Son kontrol:** 2 Kasım 2026

## Nasıl kullanılır

1. Analitik ya da canlı destek script’lerini {% unless request.design_mode %} içine alın; editör oturumları ölçülmesin.
2. “Bir koleksiyon seçin” gibi bir ipucunu yalnızca request.design_mode true ve ayar boşken gösterin.
3. layout/theme.liquid içinde sayfaya özel script’leri {% case request.page_type %} ile yükleyin.
4. JavaScript’te, Shopify.designMode true iken slider ve sekmeleri shopify:section:load olayında yeniden başlatın.

## Kod

### editor-events.js

```js
// Theme editor JavaScript: Shopify.designMode is true in the editor and
// undefined on the live store. Re-initialise a section when the editor
// re-renders it, otherwise sliders and tabs stop working after a setting change.
function initSlider(container) {
  // ...set up the slider inside this section
}

document.querySelectorAll('[data-slider]').forEach(initSlider);

if (window.Shopify && window.Shopify.designMode) {
  document.addEventListener('shopify:section:load', (event) => {
    event.target.querySelectorAll('[data-slider]').forEach(initSlider);
  });
}
```

### design-mode.liquid

```liquid
{%- comment -%}
  request.design_mode is true only inside the theme editor. Use it for editor
  conveniences, never to change what customers get: the editor preview should
  match the live store.
{%- endcomment -%}

{%- comment -%} Don't count editor sessions in your analytics. {%- endcomment -%}
{%- unless request.design_mode -%}
  <script src="https://analytics.example.com/tag.js" defer></script>
{%- endunless -%}

{%- comment -%} Show a hint to the merchant when a required setting is empty. {%- endcomment -%}
{%- if request.design_mode and section.settings.collection == blank -%}
  <p class="editor-hint">Choose a collection in this section's settings.</p>
{%- endif -%}
```

### page-type.liquid

```liquid
{%- comment -%}
  layout/theme.liquid: load page-specific assets only where they're needed.
  request.page_type values include index, product, collection, list-collections,
  search, cart, page, blog, article, password, 404, metaobject, customers/*.
{%- endcomment -%}
{%- case request.page_type -%}
  {%- when 'product' -%}
    {{ 'product-gallery.js' | asset_url | script_tag }}
  {%- when 'collection', 'search' -%}
    {{ 'facets.js' | asset_url | script_tag }}
{%- endcase -%}

{%- comment -%} A body class for CSS hooks: page type plus alternate template suffix. {%- endcomment -%}
<body class="page-{{ request.page_type | handleize }}{% if template.suffix %} template-{{ template.suffix | handleize }}{% endif %}">
```

## Sınırlar ve özel durumlar

- Shopify, design_mode’un müşteriye dönük özellikleri değiştirmek için kullanılmamasını söylüyor: editör önizlemesi canlı mağazayla aynı olmalı.
- Alternatif şablonlar page_type’ı değiştirmez; ikisine birden ihtiyacınız varsa template.suffix ile birlikte kullanın.
- request.visual_preview_mode, editörün görsel section önizlemesinde true olur; o önizlemeyi bozan script’ler için kullanılır.
- page_type, metaobject sayfalarında metaobject, hesap sayfalarında customers/… (customers/login, customers/account vb.) değerini alır.

## Sorular

### Shopify tema editöründe olduğumu nasıl anlarım?

Liquid’de {% if request.design_mode %}, JavaScript’te if (Shopify.designMode).

### Shopify Liquid’de sayfa türü nasıl tespit edilir?

request.page_type kullanın; product, collection, search, cart ya da index gibi değerler döndürür.

### Tema editöründe bir ayarı değiştirince slider’ım neden bozuluyor?

Editör section’ı yeniden işler. shopify:section:load olayını dinleyip o section için başlatma kodunuzu tekrar çalıştırın.

## Shopify belgeleri

- [Liquid request object](https://shopify.dev/docs/api/liquid/objects/request)
- [Integrate sections with the theme editor](https://shopify.dev/docs/storefronts/themes/best-practices/editor/integrate-sections-and-blocks)

## İlgili içerikler

- [json filtresiyle Liquid hata ayıklama](https://lintelagency.com/tr/kaynaklar/shopify-ipuclari/json-filtresiyle-liquid-hata-ayiklama)
- [?view= parametresi: herhangi bir alternatif şablonu açın](https://lintelagency.com/tr/kaynaklar/shopify-ipuclari/view-parametresiyle-alternatif-sablon)
- [Kurulu uygulamalar vitrininizin yüküne ne ekler?](https://lintelagency.com/tr/blog/uygulamalar-vitrin-yukunu-nasil-artirir)
- [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.