I'm wondering how to cater this kind of a requirement in Shopify – Is it possible to inject a script tag to the top of the page that load before rest of the content loads through ScriptTag? What are the other alternatives I could try?
Thanks in advance!
Usually, the scripts are injected into the <head> section within theme.liquid for such cases and creating the ScriptTag with the "order_status" scope only (default is "all"), if you need your script to be executed during checkout. You have to be careful if you want your script loaded in a synch/blocking way then it might have a negative impact on the overall user experience, but I think you know that.
My requirement is to inject the custom script to the <head> section in all storefront pages. I'm aware of the impact on overall user experience, so will make sure to keep the file size to a minimum. However, due to the nature of app I'm building it is essetial to load the script synchronosly to avoid the delay.
Is it possible to achieve this using ScriptTag resource? It seems the "display_scope" property controls in which pages the script gets loaded, but not how the script it loaded (async vs sync).
It is not possible to control the way third party scripts are loaded in case of a ScriptTag.
I believe the best option for me is to modify the theme.liquid using Asset API. I know how to inject the script during the app installation, handle the theme switching etc. I also tried to cleanup the injected script by listening to app/uninstalled webhook. However, that doesn't seem to work because I can't invoke Asset API – looks like the webhook is received after my Shopify access token is revoked. Any suggestions to cleanup theme.liquid during uninstall?
I hear you, the cleanup is one of the features that would help app developers a lot. By the time uninstall webhook is sent by Shopoify the token is already invalidated.
I see two options:
a. provide instructions for store owners with steps to cleanup the liquid files manually