Skip to content

Using multiple jQuery versions with Shopify

Sometimes you install plugins, addons and tweaks to Shopify which use specific versions of jQuery. Sometimes this breaks every other script written in a theme. I’m writting this as a note to myself mostly but may help others.

A good example in my case is working on a theme which uses jquery 1.4.2 for most of the theme’s goodies.

If you try to install the latest, let’s say fancybox it may use a newer version. Instead of fixing every function in the existing theme which you should do but many people can’t afford, you can try this.
[code lang=”js”]
{{ ‘jquery-1.7.2.min.js’ | asset_url | script_tag }}

{{ ‘jquery.fancybox.css’ | asset_url | stylesheet_tag }}
{{ ‘jquery.fancybox.pack.js’ | asset_url | script_tag }}

{{ ‘jquery.fancybox-thumbs.css’ | asset_url | stylesheet_tag }}
{{ ‘jquery.fancybox-thumbs.js’ | asset_url | script_tag }}

<script type="text/javascript">

var jQuery_1_7_2 = $.noConflict(true); //open jquery 1.7.2 noconflict

(function($) { //wrap with a function

$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : ‘70%’,
height : ‘70%’,
autoSize : false,
closeClick : false,
openEffect : ‘none’,
closeEffect : ‘none’
});
});

})(jQuery_1_7_2); //close the jquery 1.7.2 wrapper function
</script>
[/code]

Share on Facebook
Share on Twitter
Share on Linkdin
Share on Pinterest