Theme app extensions - how to always display in editor?

[jt274]

I have an app with a theme app extension, specifically an app block. The app block only shows when certain conditions are met. It is shown/hidden via javascript. Because of this, it never shows up in the theme editor so the user can't see changes before saving them. Is there a way to detect the theme editor to always show the app block?

[archiethedev]

Hey @jt274,

If you're still stuck i'd be happy to help.

Please could you elaborate more on the issue? It would be helpful to see the conditions you mentioned to understand why its not shown in the theme editor.

[MSohailAfzal]

I am facing an issue, i have run through the documentation & install theme app extension. Now added a js file with an alert line of code & push that code using shopify CLI extension. but i'm unable to find it on store front. Then i have added a tutorial files but these files also not appearing

[Anushka98]

Use window.Shopify.designMode in javascript file to identify whether you are viewing it from the editor, and then use that to enable or disable the element accordingly.

[ShaunStarttin]

Liquid = `{% if request.design_mode %}`

Javascript = `if (Shopify.designMode) {}`

Docs for detecting the theme editor