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.
- 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
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.
How to use it
- Wrap analytics or chat scripts in {% unless request.design_mode %} so editor sessions aren’t tracked.
- Show a hint like “Choose a collection” only when request.design_mode is true and the setting is empty.
- In layout/theme.liquid, use {% case request.page_type %} to load page-specific scripts.
- In JavaScript, re-initialise sliders and tabs on shopify:section:load when Shopify.designMode is true.
Code
editor-events.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{%- 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{%- 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 %}">
Written by Lintel. MIT license: free to use in your own store and in client work.
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
- Checked on a Shopify store on the date shown. Shopify changes its admin often; if a step looks different, the idea usually still works.
- Examples use placeholder IDs and your-store.myshopify.com. Replace them with your own.
- MIT license for the code snippets.
Need this built, tested and maintained for your store? See Shopify development.
