Check if theme is in preview mode

Solved
rexb
Excursionist
19 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
Nick
Community Moderator
Community Moderator
3769 356 740

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
rexb
Excursionist
19 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
tim
Shopify Expert
2926 143 1021

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!

Work like a charm! Thank you, @tim !

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

What a great hack!

0 Likes
mttd
Excursionist
11 0 3

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

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

 Hope this helps! 

0 Likes