# request.design_mode and request.page_type

> Use request.design_mode to keep analytics out of the theme editor and show editor hints, and request.page_type to load scripts only on the pages that need them.

Page: https://lintelagency.com/resources/shopify-tricks/design-mode-and-page-type

## In short

request.design_mode is true when a page renders inside the theme editor, so you can skip analytics tags or show setup hints only to the merchant. request.page_type returns the kind of page, such as product, collection, search, cart or index, which is handy in theme.liquid for loading a script only where it’s used. In JavaScript, Shopify.designMode and the shopify:section:load event cover the editor side.

## Facts

- **Editor check:** request.design_mode (Liquid), Shopify.designMode (JS)
- **Page type:** request.page_type
- **Values:** product, collection, search, cart, index, page, …
- **Plan:** Every plan
- **Last checked:** 2 November 2026

## How to use it

1. Wrap analytics or chat scripts in {% unless request.design_mode %} so editor sessions aren’t tracked.
2. Show a hint like “Choose a collection” only when request.design_mode is true and the setting is empty.
3. In layout/theme.liquid, use {% case request.page_type %} to load page-specific scripts.
4. In JavaScript, re-initialise sliders and tabs on shopify:section:load when Shopify.designMode is true.

## Code

### 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 %}">
```

## Limits and edge cases

- Shopify warns not to use design_mode to change customer-facing features: the editor preview should match the live store.
- Alternate templates don’t change page_type; combine it with template.suffix when you need both.
- request.visual_preview_mode is true in the editor’s visual section preview, for scripts that break that preview.
- page_type is metaobject on metaobject pages and customers/… (customers/login, customers/account and so on) on account pages.

## Questions

### How do I check if I’m in the Shopify theme editor?

In Liquid, {% if request.design_mode %}. In JavaScript, if (Shopify.designMode).

### How do I detect the page type in Shopify Liquid?

Use request.page_type; it returns values such as product, collection, search, cart or index.

### Why does my slider break after changing a setting in the theme editor?

The editor re-renders the section. Listen for shopify:section:load and run your init code again for that section.

## Shopify documentation

- [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)

## Related

- [Debug Liquid with the json filter](https://lintelagency.com/resources/shopify-tricks/debug-liquid-with-json-filter)
- [The ?view= parameter: render any alternate template](https://lintelagency.com/resources/shopify-tricks/alternate-templates-view-parameter)
- [What installed apps add to your storefront’s load](https://lintelagency.com/journal/what-apps-add-to-storefront-load)
- [Core Web Vitals and INP on Shopify: what moves them](https://lintelagency.com/journal/shopify-core-web-vitals-inp)

License: MIT. Free to use in your own store and in client work.