request.design_mode ve request.page_type

// 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);
  });
}

{%- 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 -%}

{%- 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 %}">