Check if theme is in preview mode

Solved
Highlighted
Excursionist
15 0 0

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!

0 Likes
Highlighted
Community Moderator
Community Moderator
3393 252 612

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

 

Nick | Community Moderator @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Excursionist
15 0 0

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!

0 Likes
Highlighted
Shopify Expert
2684 67 846

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

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
Highlighted

Work like a charm! Thank you, @tim !

SPO - SEO App to research keywords & edit social link preview
Highlighted
New Member
2 0 0

What a great hack!

0 Likes