Check if theme is in preview mode

Solved
Tourist
8 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
Community Manager
Community Manager
2498 171 376

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 | Social Care @ 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
Tourist
8 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

Success.

Shopify Expert
2676 65 665

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!
2 Likes