Ecommerce Shopify WordPress Discussion

Linking custom JS to custom HTML and CSS in Shopify 2.0

I have an SVG map that I've created for my store that I would like to have on its own separate page. The HTML and CSS seem to be working fine - when I hover over a state the state becomes highlighted and loses its highlight when I hover off of it. I am trying to add custom JS to the theme.liquid file in the theme code settings so that when I hover over a state some information is displayed as a popup by the cursor. This worked perfectly for an old Shopify store I worked on with an older theme, but it doesn't seem to work with Shopify 2.0. The info is no longer displayed overtop the map as a smooth popup, but shifts the entire map down and displays at the top of the screen. How would I go about linking this custom JS to the HTML/CSS that I've put on the page for Shopify 2.0? Here is the JS, exactly how I am adding it to the theme.liquid file: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script> $("path, circle").hover(function(e) { $('#info-box').css('display','block'); $('#info-box').html($(this).data('info')); }); $("path, circle").mouseleave(function(e) { $('#info-box').css('display','none'); }); $(document).mousemove(function(e) { $('#info-box').css('top',e.pageY-$('#info-box').height()-30); $('#info-box').css('left',e.pageX-($('#info-box').width())/2); }).mouseover(); var ios = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; if(ios) { $('a').on('click touchend', function() { var link = $(this).attr('href'); window.open(link,'_blank'); return false; }); } </script> I've tried to "bundle" the JS code with the HTML/CSS on the product info page, creating a separate js.liquid file under "assets" in my theme code settings, and adding "defer='defer'" to my JQuery info.
TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.