I’m working on a Shopify app that injects a JavaScript file through the ScriptTag API after users install it. My script needs jQuery and Shopify’s AJAX API to work properly.
The main problems I’m running into:
- jQuery and Shopify’s AJAX library might not be loaded in every theme
- Even if they are available, the loading order could mess things up
- The ScriptTag API only works with external scripts, so I can’t reference Shopify’s CDN directly
- When I tried using liquid files through the API, they only have access to settings data which is pretty limited
Right now I’m thinking about just giving merchants a code snippet they need to manually add to their theme files. But this feels like extra work for them and not very user friendly.
Am I missing something obvious here? What’s the best practice for managing JavaScript dependencies when using Shopify’s ScriptTag feature?
Bundle your dependencies right into your external script file instead of hoping the theme has what you need. I learned this the hard way after months of dealing with the same issues. Use webpack or rollup to create one minified file with jQuery and whatever else you need. This kills the uncertainty around loading order and availability. The bigger file size is nothing compared to actually having things work reliably. For Shopify’s AJAX API, just use the standard fetch API with Shopify’s cart endpoints instead of depending on their AJAX library. You’ll have full control over dependencies and your app will work consistently across all themes without making merchants mess with their code.
Use a Promise-based approach for dependency loading. I created a wrapper function that returns promises for each dependency check, then used Promise.all() to wait for everything before my main code runs. This lets you handle missing dependencies by loading them from external CDNs when needed. Make your script async-aware from the start - don’t try to run everything synchronously. I’d also set up a fallback where you can swap Shopify’s AJAX API with vanilla JavaScript fetch calls if their library isn’t available. Gives you more control and cuts down on dependencies while keeping the ScriptTag approach working.
Check if the required libraries exist before running your main code. I set up a dependency checker that polls for jQuery and Shopify objects until they load or timeout. Just check window.jQuery and window.Shopify at intervals - works great. If they’re missing, dynamically load them from CDN before your code runs. This way you can stick with ScriptTag API without making merchants mess with their themes. Make your script self-contained and defensive - don’t assume anything about the environment. I’ve found this way more reliable than bundling everything since you can use cached versions when they’re already there.
Honestly, just use a script loader like RequireJS or write your own simple one. I had the same headaches and ended up creating a small dependency manager that loads what’s needed asynchronously. Way cleaner than bundling everything or doing manual checks. Shopify’s script tag works fine with this approach - just make sure your main script waits for dependencies before executing.