Are there any jQuery features that do not have a direct native equivalent?

$.Deferred() is replaced by native Promises. $.when() is replaced by Promise.all(). jQuery plugins with no native equivalent (complex date pickers, rich text editors) may need replacement with modern vanilla-JS alternatives or Web Components. For simple animation needs, CSS transitions and CSS animations cover 90% of jQuery animate() usage without any JavaScript.

What if a third-party app or plugin requires jQuery?

If a Shopify app or legacy plugin depends on jQuery, you may need to keep it loaded. In that case, load jQuery only conditionally on pages where the app is active, use jQuery.noConflict() to prevent $ from polluting global scope, and migrate your own theme code to native APIs even if jQuery stays for the plugin. Over time, replace jQuery-dependent plugins with modern alternatives.

How do I verify jQuery is fully removed with no regressions?

After removing jQuery, add window.jQuery = undefined; window.$ = undefined; temporarily in your theme JavaScript and test every interactive element: cart, product variant selection, filters, modals, forms. Browser console errors about 'jQuery is not defined' or '$ is not a function' will pinpoint any remaining jQuery dependency. Run this in staging before deploying to production.

performanceMarch 22, 2026

Remove jQuery From Your Shopify Theme — 87KB Saved, Zero Regressions

jQuery was a browser compatibility layer for the fragmented web of 2006. In 2025, every browser supports the native APIs jQuery once provided — fetch, querySelector, classList, addEventListener, and the DOM manipulation methods jQuery made famous. Yet thousands of Shopify themes still load jQuery as a dependency, adding 87KB (minified) to every page load. Shopify's own Dawn theme removed jQuery in 2021. This guide covers every jQuery pattern you need to replace and the native equivalent for each.

Auditing your theme for jQuery usage

Search your theme for: window.jQuery, window.$, jQuery(, $(' — these are the most common jQuery entry points. Also check for plugins that declare jQuery as a dependency in their source (look for 'requires jquery' comments or jQuery.fn references). Check whether jQuery is loaded in theme.liquid or via Shopify's script_tag filter. If you find it, check the version — jQuery 1.x and 2.x have known security vulnerabilities in addition to the performance cost.

Replacing DOM selection and manipulation

jQuery: $('.product-card') → Native: document.querySelectorAll('.product-card'). jQuery: $('.button').click(fn) → Native: document.querySelector('.button').addEventListener('click', fn). jQuery: $('.element').addClass('active') → Native: element.classList.add('active'). jQuery: $('.element').css('display', 'none') → Native: element.style.display = 'none'. jQuery: $(element).html(content) → Native: element.innerHTML = content (but sanitize user input). jQuery: $(element).text(content) → Native: element.textContent = content.

Replacing jQuery AJAX with fetch

jQuery: $.ajax({url: '/cart.js', success: callback}) → Native: fetch('/cart.js').then(r => r.json()).then(callback). jQuery: $.getJSON('/cart.js', callback) → Native: fetch('/cart.js').then(r => r.json()).then(callback). jQuery: $.post('/cart/add.js', data, callback) → Native: fetch('/cart/add.js', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(data)}).then(r => r.json()).then(callback). The native fetch API returns Promises, which work with async/await and are supported in all browsers since 2017.

Replacing jQuery event handling and document ready

jQuery: $(document).ready(fn) → Native: DOMContentLoaded event or place scripts at end of body with defer. jQuery: $(document).on('click', '.selector', fn) → Native: document.addEventListener('click', e => { if (e.target.matches('.selector')) fn(e); }) — event delegation pattern. jQuery: $.each(array, fn) → Native: array.forEach(fn). jQuery: $(element).animate({opacity: 0}, 300) → Native: CSS transitions with element.classList.add('fade-out').

The fix: before and after

// CODE_COMPARISON

// BAD_CODE — before

1// BAD: jQuery — 87KB dependency for things the browser does natively

2$(document).ready(function() {

3 $('.add-to-cart').click(function() {

4 $.ajax({

5 url: '/cart/add.js',

6 method: 'POST',

7 data: { id: $(this).data('variant-id'), quantity: 1 },

8 success: function(data) {

9 $('.cart-count').text(data.quantity);

10 }

11 });

12 });

13});

// SYPHIO_FIXED — after

1// GOOD: native browser APIs — zero dependencies, same functionality

2document.addEventListener('DOMContentLoaded', () => {

3 document.querySelector('.add-to-cart')?.addEventListener('click', async (e) => {

4 const variantId = e.currentTarget.dataset.variantId;

5 try {

6 await fetch('/cart/add.js', {

7 method: 'POST',

8 headers: { 'Content-Type': 'application/json' },

9 body: JSON.stringify({ id: variantId, quantity: 1 })

10 });

11 const cart = await fetch('/cart.js').then(r => r.json());

12 document.querySelector('.cart-count').textContent = cart.item_count;

13 } catch (error) {

14 console.error('Cart error:', error);

15 }

16 });

17});

Frequently asked questions

Are there any jQuery features that do not have a direct native equivalent?: $.Deferred() is replaced by native Promises. $.when() is replaced by Promise.all(). jQuery plugins with no native equivalent (complex date pickers, rich text editors) may need replacement with modern vanilla-JS alternatives or Web Components. For simple animation needs, CSS transitions and CSS animations cover 90% of jQuery animate() usage without any JavaScript.
What if a third-party app or plugin requires jQuery?: If a Shopify app or legacy plugin depends on jQuery, you may need to keep it loaded. In that case, load jQuery only conditionally on pages where the app is active, use jQuery.noConflict() to prevent $ from polluting global scope, and migrate your own theme code to native APIs even if jQuery stays for the plugin. Over time, replace jQuery-dependent plugins with modern alternatives.
How do I verify jQuery is fully removed with no regressions?: After removing jQuery, add window.jQuery = undefined; window.$ = undefined; temporarily in your theme JavaScript and test every interactive element: cart, product variant selection, filters, modals, forms. Browser console errors about 'jQuery is not defined' or '$ is not a function' will pinpoint any remaining jQuery dependency. Run this in staging before deploying to production.

// SCAN_YOUR_CODE

Does your theme have this bug?

Paste your code. Syphio automatically detects and fixes this error and hundreds of others — in seconds.

Audit my theme →

82% of Shopify Stores Lazy-Load Their LCP Image — Are You One of Them?→Shopify script_tag Filter Doesn't Add defer — Use This Pattern Instead→Shopify Fonts Cause FOIT — Fix Invisible Text With font-display: swap→