creative designer

Let this opening paragraph serve as due warning. Don't attempt to add JavaScript to your Shopify checkout using this method if you are not painfully aware of how to do it, and the potential risk it brings. If you break your site, and lose revenue you only have yourself to blame. Changes to the checkout (which are out of your control) and how certain scripts are added could not only break your code, it could make it impossible for your customers to checkout. Just because it might work today doesn't mean anything for the future. Don't take this warning lightly.

This method is nothing new. It's been known for some time that you can inject JavaScript by making use of the custom JavaScript section for Google Analytics. If you don't know what section in the admin I'm talking about, it's this:

For the most part everyone seems to have respected the "no js on checkout" line of thought but recently there's been a string of apps that have popped onto the scene exploiting this loophole and charging a pretty penny for it. I suspect that none of these apps are making any potential risk known, but will of course happily take your cash. I am not expecting those apps to be in the store for long.

Whilst it's true that the GA JavaScript code is wrapped in a try...catch statement (to help protect checkout page from errors) don't assume that will always be the case. Also don't assume that Shopify will add your code exactly as you've added it. You can hope, but that's about it.

I don't care about breaking my checkout. How do I do it?

This isn't some step by step process and I've been vague on purpose. If you don't know basic JavaScript you shouldn't be trying to attempt this at all.

First step is to make sure that you've linked up Google Analytics into your store. There's some instructions available to get you started. Once you've got that far you'll see a link that lets you "Add Custom JavaScript" (see previous pic). Click that, and you'll see something very much like the below.

It might make perfect sense to just dump whatever script in there as you please but remember that GA will run on every page of your site. You first need to limit this js to only run on checkout by looking for specific JavaScript variables: Checkout (object) and Checkout.$ (function). You don't need to check for both, but the more checks the better. Inside those conditional statements is where you'll add your custom script. For this example, let's just use a basic alert function. 

You'll see that I put a comment top and tail of the JavaScript to help mark the code. It's pretty easy to forget or lose track about what was added so making that clear will help you later. Consider it best practice. Pasting that into the Additional Google Analytics JavaScript box should make an alert box popup on the Checkout. Boom - there's your proof that you can run custom JavaScript on checkout.

If this seems pretty interesting to you, and you want to give it a try - go for it. If you want me to craft a custom solution for you - also cool. Either option however requires that you head back to that first paragraph and gauge if that's a risk you're willing to take.

[update:27/05/15]. If you're wondering if this still works on the new checkout - it does.


Like to work with me?

Let's talk