Shopify API Update: ScriptTags Javascript Insertion

Hi folks, my name is Edward. I’m Shopify’s Developer Advocate – the link between 3rd party developers and Shopify. I’d like to introduce you to a hot new feature in the Shopify API called ScriptTags.

This post is targeted at Shopify developers, so for the technically curious out there, join us! If you want to know how this makes your life better as a shop owner, just know that Shopify Apps will now be faster, easier to install and uninstall and won’t have compatibility issues with themes.

We’ve heard from developers about how it’s a pain to ask shop owners to cut & paste code into their themes during installation. It’s error-prone and it’s one more thing to do. Let’s fix that.

Introducing the ScriptTags API

With a single API call, you can now inject arbitrary Javascript into shop’s front-end themes and the last step of checkout. No more copypasta screenshots during install. No more new theme installations stomping over your pasted code and breaking your app.

Here’s how to use it:

1) A merchant just hit your app’s install button. Win! Let’s add our Javascript to their shop’s frontend so that it appears on load.

2) Authenticate with the shop, then make this call:

HTTP POST http://their-shop.myshopify.com/admin/scripttags

  <?xml version="1.0" encoding="UTF-8"?>
  <script-tag>
    <src>http://example.com/your-awesome-script.js</src>
    <event>onload</event>
  </script-tag>

3) There is no step 3. All requests for the shop will now include

http://example.com/your-awesome-script.js

Particularly awesome things about this:

• Shopify injects the Javascript after parsing the theme’s Liquid, so shop owners don’t have to worry about being careful not to delete your code, and you don’t have to worry about things breaking after a new theme is dropped in.
• When your app is uninstalled, Shopify removes the auto-inserted Javascript
• Your Javascript is injected inside of a closure, so you don’t have to worry about scope clobbering of variables.

Want more? The official docs are up here: http://api.shopify.com/scripttag.html

Jump into the Shopify Apps forum if you’ve got any questions or comments.