Best approach to inject custom Javascript to the storefront?

Highlighted
New Member
3 0 0

I'd like to clarify the best approach to inject custom Javascript to the storefront. In few other threads I read that the recommended option is to use ScriptTag resource. I tested this and it seems like there's a significant delay in loading the custom Javascript added through ScriptTag because it's being requested asynchronously after the page is fully loaded.

It does not quite seem to suit my requirement because I need to dynamically replace some content in store with some enriched content generated from my app. Due to the delay to load my custom Javascript, it shows the original content to the user for few seconds (time depends on network speed) before it gets replaced by enriched content – not a good user experience.

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!

0 Likes
Highlighted
Shopify Partner
1777 211 370

Hey Chuck,

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.

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
Highlighted
New Member
3 0 0

Hey Sergiu,

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).

0 Likes
Highlighted
Shopify Partner
1777 211 370

It is not possible to control the way third party scripts are loaded in case of a ScriptTag.

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
Highlighted
New Member
3 0 0

Thanks Sergiu.

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?

0 Likes
Highlighted
Shopify Partner
1777 211 370

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

b. "void" your JavaScript for the store you've received the uninstall message from; the reference will still be there, but at least it won't waste traffic

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes