How to Add JavaScript to Shopify Modules (Without Breaking Your Store)

If you’re wondering how to add JavaScript to Shopify modules, I’ve been there too.

Here’s the short answer: you can inject custom JavaScript into Shopify either globally using the theme.liquid file, section-specific by editing Liquid templates, or dynamically using Shopify’s Script Tags API.

Each method has its place, depending on what you need.

And believe me, getting it right can seriously upgrade your store’s functionality and performance without killing your load speed.

Let’s dive into exactly how to do it.

Why Add JavaScript to Shopify Modules at All?

When I first started tweaking Shopify stores, I thought Liquid was enough.

Turns out, JavaScript is the secret sauce behind:

• Interactive product galleries
• Instant search features
• Upsell popups after “Add to Cart”
• Real-time inventory updates
• Personalised recommendations

Without JavaScript, your store feels static and old-school.
With it, you create experiences that feel modern and alive — and customers buy more because of it.

In my experience, even small script tweaks have led to 5–10% jumps in conversion rates across Shopify stores I’ve worked on.

Here’s what JavaScript unlocks:

But there’s a right way and wrong way to do it.

Method 1: Adding JavaScript Globally Using theme.liquid

When to use it:
When you need a script running on every single page.

I usually use this for:

Here’s exactly how I add JavaScript globally:

Step-by-Step

1. Go to Shopify Admin > Online Store > Themes.
2. Click Actions > Edit code.
3. Find layout/theme.liquid.
4. Insert your JavaScript inside either the or right before the closing tag.

htmlCopyEdit

htmlCopyEdit