Shopify : How to add custom javascript into checkout pages

Shopify is a very powerful tool. It is possible to create online shops very easily, thanks to a large collection of templates. It is also very easy for developers to create their own templates.

Nevertheless, it is difficult to add new functionalities to Shopify. I recently worked on a project where I needed to change a little the source code of checkout pages. Unfortunately, Shopify doesn’t allow developers to change those pages, for safety purposes.

Then, I tried to add javascript to the checkout pages, hoping it would help me to change the source code. After a bit of research, I finally found a solution.

Before we start

Please keep in mind that adding javascript custom code to Shopify checkout might cause safety issues. Check that your code is valid before adding it to Shopify.

Go into the administration interface

Go to Online Store > Préférences, then scroll down to Google Analytics. Add your Google Analytics tracking code, then save.

You should see this :

Shopify google analytics javascript

Click on Add Custom Javascript.  This is where the magic happens. Paste your javascript source code, then save. You can only add pure javascript : no jQuery.

Shopify google analytics add javascript

Check for the checkout pages

The code you just pasted will be included on every pages of your website. There is a solution to check if the page requested by the user is one of the checkout pages : with a simple if.

if(typeof Checkout === 'object'){
    if(typeof Checkout.$ === 'function'){
        // your code
        console.log('Checkout pages);
    }
}

By doing so, your code will be executed only on the checkout pages.

Conclusion

The solution to add custom javascript to Shopify checkout pages is pretty easy. however, always keep in mind that the code added to the checkout might cause safety issues. Always check that your code is valid before pasting it on Shopify.