Is there a way to check if a theme is in preview mode?

[rexb]

Hi,

Do we have something  like this?

{% if is_theme_in_preview_mode() %}
    //---
{% else %}
    //--- 
{% endif %}

I think it would be more helpful. I need it too.

Thanks!

[Nick]

Hi @rexb,

Nick here from Shopify. 

I spoke to our theme support team. They mentioned that the best way they are aware of is doing this through your store admin. I'll show you the steps for this below: 

Store Admin > Online Store > Themes > Click on "Action" for your primary theme or any theme in your library and then click preview. You can see how this will look from the screenshot. 

This will create a new tab with the theme being previewed. Shopify also has a helpful guide on adding & previewing themes which you might find useful that you can see here. 

Hopefully, this answers your question and gives you what you need. 

All the best, Nick

[rexb]

Hi Nick,

Thank you for your prompt reply.

What I mean to this is,  if we want to set  or display an element which is on purpose for testing only during preview mode.

Something like this in my case:

{% if is_theme_in_preview_mode() %}
     {% assign api_url = 'test.api.io' %}
{% else %}
    {% assign api_url = 'live.api.io' %}
{% endif %}

Using request.host we can determine if it's in preview mode but it only applies to a shareable link like this: 

https://d4y5aatodt2vcosz-14524320.shopifypreview.com

I think that would be helpful not just for me. 

Thanks!

[tim · Accepted solution]

There is a trick to find this out.

Shopify adds code to display preview bar to the head, so you can do something like

{% if content_for_header contains "previewBarInjector.init();" %}
  Preview mode
{% elsif content_for_header contains "Shopify.designMode" %}
  Customizer
{% else %}
  Live!
{% endif %}

[jam_chan]

Work like a charm! Thank you, @tim !

[teoman]

What a great hack!

[mttd]

For anyone else coming to this solution, I had to update to use:

{% if checkout_scripts contains "previewBarInjector.init();" %}

 Hope this helps! 

[kyle_sierens]

Worth noting this has changed for v2.0 themes:

You can now detect the theme editor programmatically using Liquid and JavaScript. In Liquid, you can use request.design_mode. In JavaScript, you can use Shopify.designMode.

Workaround methods, such as content_for_header contains in Liquid, or searching the page URL in JavaScript, aren't supported and won't continue to work in the new theme editor. To make your app or theme compatible with the new theme editor, you need to update your code to use a supported method.

https://shopify.dev/changelog/detect-the-theme-editor-using-liquid-and-javascript

[darrynten]

Is there a new way to detect if a user is logged in to the Shopify admin panel without access to content_for_header?

Something like `request.logged_in_admin`?

[PaulNewton]

Use request.design_mode or the newer poorly defined request.visual_preview_mode

• https://shopify.dev/docs/themes/architecture/sections/integrate-sections-with-the-theme-editor#detec... 
• https://shopify.dev/docs/themes/architecture/sections/integrate-sections-with-the-theme-editor#detec... 
• https://shopify.dev/docs/api/liquid/objects/request#request-design_mode
• https://shopify.dev/docs/api/liquid/objects/request#request-visual_preview_mode  

If trying to do stuff specifically for staff in the admin the above could be combined with having them create a specific customer account. Then check the customer.id for gating or setting flags.

💣For things intended to be seen only in the admin avoid using only the javascript properties such as Shopify.designMode  as that javascript object can be set by anybody on the frontend with javascript and using that by itself easily leads to rendering such things by default instead of behind a liquid flag.

[Mario_]

Best official answer for 2023

[PaulNewton]

Further

https://shopify.dev/docs/themes/tools/online-editor#integrating-your-theme-with-the-theme-editor 

https://shopify.dev/docs/themes/architecture/sections/integrate-sections-with-the-theme-editor 

[jonbianco]

Shopify changed the content for header values, and this no longer works.

To get preview mode only, use this logic:

{% if content_for_header contains "preview-bar" %}

Shopify.designMode sill works for the theme editor / customizer.

To further add additional functionality, I did the following:

      <script>
      {% if content_for_header contains "preview-bar" %}
        Shopify.theme.user = "admin";
        Shopify.theme.mode = "preview";
      {% assign admin = true %}
      {% elsif content_for_header contains 'Shopify.designMode' %}
        Shopify.theme.user = "admin";
        Shopify.theme.mode = "editor";
      {% assign admin = true %}
      {% else %}
        Shopify.theme.user = "guest";
        Shopify.theme.mode = "live";
      {% endif %}
      </script>

This lets you determine if the user is logged in as admin by creating a liquid string value so you can call it by:

Liquid:

{% if admin %}

Javascript:

if (Shopify.theme.user === 'admin')

And added the mode object as well. Enjoy 🙂

[timd]

I believe the correct liquid object for this is theme.role eg.

{% if theme.role == 'unpublished' %}

[thomen]

Unfortunately theme.role doesn't seem to output anything any more as at 13/12/2021

[thomen]

Clarification: The theme object in its entirety doesn't appear to exist in app blocks/embed.

Trying to output theme.name or theme.id doesn't work either in the context of an app block or embed.

[PaulNewton]

theme.role == 'unpublished'  applies to ALL themes that are NOT the live theme i.e. theme.role == 'main' 

https://shopify.dev/docs/api/liquid/objects/theme#theme-role

Further the "theme" object is now depreciate for some silly reason with no clear replacement ; ignoring the reality that it's used in debugging workflows or in cases like a/b testing.