Solved

Check if theme is in preview mode

rexb
Shopify Partner
29 1 9

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!

Accepted Solution (1)
tim
Shopify Expert
3318 248 1196

This is an 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 %}

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.

View solution in original post

Replies 15 (15)

Nick
Shopify Staff (Retired)
4531 434 1025

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. 

 

20-01-0wge3-g867d

 

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

 

To learn more visit the Shopify Help Center or the Community Blog.

rexb
Shopify Partner
29 1 9

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
Shopify Expert
3318 248 1196

This is an 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 %}

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
jam_chan
Shopify Partner
894 23 175

Work like a charm! Thank you, @tim !

BYOB - Build Your Own Bundles, SPO - SEO App to research keywords & edit social link preview
teoman
Visitor
2 0 0

What a great hack!

mttd
Shopify Partner
21 0 12

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

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

 Hope this helps! 

kyle_sierens
Shopify Partner
2 0 3

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
Shopify Partner
44 3 14

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`?

@darrynten
PaulNewton
Shopify Partner
6275 574 1324

Use request.design_mode or the newer poorly defined 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.

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


Mario_
Shopify Partner
8 0 4

Best official answer for 2023

PaulNewton
Shopify Partner
6275 574 1324

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 

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


timd
Shopify Expert
121 6 74

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

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

 

thomen
Tourist
5 0 4

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

thomen
Tourist
5 0 4

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
Shopify Partner
6275 574 1324

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.

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org