Streaming live at 10am (PST)

How to embed custom code to each product (dynamic)


#1

I have a question about applying custom code to each product's photo.

1.
My client want zooming effect(magnifying) so I found this Jquery :
https://cdn.rawgit.com/dlekrud7/goralskazooming/master/jquery.zoom.js

And I want to apply this effect to detail page's each product picture. But I don't know how to do this.
Please tell me how! :-0

2.
And also, I bought a two hosts from another hosting site, and I want to connect those with my site but I can't find how to do it. Hosting site said that I have to find my site's IP or Server but I'can't find it.

this is my detail page
: http://goralska.webflow.io/olivetree/ebony-necklace-large
: https://webflow.com/design/goralska

Help me!
Please reply soon :slight_smile:
Thank you!


Ecommerce image zoom
#2

I too would like more information on installing custom code!!!!


#3

Hi, for the plugin take a look to the example I made https://webflow.com/website/zoomdemo

Could you explain a little bit more about what your trying to do :slight_smile:


#4

Thanks for quick response. But I can't understand process of applying custom code to my page yet!
Can you explain it more specifically?
Thank you!


#5

A tutorial from webflow
https://help.webflow.com/article/how-to-add-custom-head-and-body-code-to-a-webflow-site


#6

Should I just copy your code and paste it to my image?
I tried it but It didn't work.
I want to apply only hover-zooming effect to my detail page.
(http://goralska.webflow.io/element/flame-necklace-gold)
Thank you. Please reply :slight_smile:


#7

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.15/jquery.zoom.min.js'></script>

<script>
$(document).ready(function(){
$('#ex1').zoom();
});
</script>

The hover effect will be applied to all the the div's that have id #ex1 (In this case you have a div with a class called zoom and also have the #ex1 id)


#8

Thanks a lot !! I solve this problem! Thank you :slight_smile:


#9