Liquid, JavaScript, themes, sales channels
Hello,
After spending the last few days trying to implement the Zoom plugin in my Narrative theme without success, I come here to seek help !
My goal is to get the same zoom effect of the Debut theme's product page, so I thoroughly followed the tutorial from this page "Using JQuery Zoom and JavaScript Zoom for Product Images on Shopify"
but the zoom doesn't work.
Here's what I've done :
1/ Upload the "jquery.zoom.min.js" to the assets folder
2/ Link the Jquery library in theme.liquid before the </head>
3/ Link the "jquery.zoom.min.js" in theme.liquid before the </head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js" defer="defer"></script>
<script type="text/javascript" src="{{ 'jquery.zoom.min.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'lazysizes.min.js' | asset_url }}" async="async"></script>
<script src="{{ 'vendor.min.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'theme.min.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'custom.js' | asset_url }}" defer="defer"></script>
</head>
4/ Added the code from the tutorial in product-template.liquid
<div class=”image-container”>
<img class=”image-zoom” src=”{{ featured_image | img_url: '480x480' }}” alt="{{ image.alt | escape }} data-zoom="{{ featured_image | img_url: '1024x1024', scale: 2 }}>
<div class="image-details"></div>
</div>
5/ Seeing the error I corrected the quotation marks and changed "featured_image" to "featured_media"
<div class="image-container">
<img class="image-zoom" src="{{ featured_media | img_url: '480x480' }}" alt="{{ image.alt | escape }} data-zoom="{{ featured_media | img_url: '1024x1024', scale: 2 }}>
<div class="image-details"></div>
</div>
6/ I then noticed in the inspector that the url of the "zoomed" image was broken
<img class="image-zoom" src="//cdn.shopify.com/s/files/1/0576/9432/2857/products/57c399cb66f94be79274fd75f4428208_480x480.jpg?v=1623944930" alt=" data-zoom=" cdn.shopify.com="" s="" files="" 1="" 0576="" 9432="" 2857="" products="" 57c399cb66f94be79274fd75f4428208_1024x1024@2x.jpg?v="1623944930" style="display: block;">
7/ I figured that it was again coming from the quotation marks of the html bit from the tutorial, after a change this showed
<div class="image-container">
<span style="display:inline-block"><img class="image-zoom" src="//cdn.shopify.com/s/files/1/0576/9432/2857/products/57c399cb66f94be79274fd75f4428208_480x480.jpg?v=1623944930" alt="" data-zoom="//cdn.shopify.com/s/files/1/0576/9432/2857/products/57c399cb66f94be79274fd75f4428208_1024x1024@2x.jpg?v=1623944930" style="display: block;"></span>
<div class="image-details"></div>
</div>
Oh and here's the script part, put in product-template.liquid
<script>
$(document).ready(function(){
$('.image-zoom')
.wrap('<span style="display:inline-block"></span>')
.css('display', 'block')
.parent()
.zoom({
url: $(this).find('img').attr('data-zoom')
});
});
</script>
After all these steps, I can see that Jquery loads, so does the zoom plugin, the script kind of works as it adds a span in the div, but no signs of zoom on hover. Isn't the plugin supposed to create another <img></img> to contain the "zoomed" image ? I am genuinely at loss and would be so grateful for some help !
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024