Solved

How To Add Zoom On Hover Animation on Product Page

AryavK
Trailblazer
219 9 29

How to remove zoom in button and actually show the part where the cursor is/ zoom on hover

For example:

AryavK_0-1702109411784.png

 

And:

 

AryavK_1-1702109409930.png

 

AryavK_2-1702109413232.png

 

Instead of:

AryavK_3-1702109411775.png

store url: www.faithandyou.in

theme: refresh

 

faith&you
Accepted Solution (1)

BSS-Commerce
Shopify Expert
3380 447 498

This is an accepted solution.

Hi @AryavK ,

Please follow these steps:

1. Delete the default zoom button, and delete the code content circled in red as shown below in the product-thumbnail.liquid file:

view - 2023-12-12T140630.518.png

2. Add the codes circled in red below to the media-gallery.js file

view - 2023-12-12T140726.048.pngview - 2023-12-12T140730.772.png

// step 1
let image = document.querySelector(".product__media-list.contains-media.grid.grid--peek.list-unstyled.slider.slider--mobile .product__media.media.media--transparent img")

// step 2
image = activeMedia.querySelector('.product__media.media.media--transparent img')

// step 3
const ratio = 3
function mouseMove(e) {
  const rect = e.currentTarget.getBoundingClientRect()
  const offsetX = e.pageX - (rect.x + window.scrollX)
  const offsetY = e.pageY - (rect.y + window.scrollY)
  let { naturalHeight, naturalWidth } = image
  naturalHeight = naturalHeight * ratio
  naturalWidth = naturalWidth * ratio
    image.style.width = naturalWidth + 'px'
    image.style.height = naturalHeight + 'px'
    image.style.maxWidth = 'unset'
    const top = offsetY * (1 - naturalHeight / rect.height)
    const left = offsetX * (1 - naturalWidth / rect.width)
    image.style.top = top + 'px'
    image.style.left = left + 'px'
}

function mouseOut() {
  image.removeAttribute('style')
}

const x = document.querySelector(".product__media-list.contains-media.grid.grid--peek.list-unstyled.slider.slider--mobile")
x.addEventListener('mousemove', mouseMove)
x.addEventListener('mouseleave', mouseOut)

Tutorial: https://www.loom.com/share/d67ebf6050c04ab8a5b2478fb73f5b33 

Hope it helps @AryavK 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

Replies 2 (2)

BSS-Commerce
Shopify Expert
3380 447 498

This is an accepted solution.

Hi @AryavK ,

Please follow these steps:

1. Delete the default zoom button, and delete the code content circled in red as shown below in the product-thumbnail.liquid file:

view - 2023-12-12T140630.518.png

2. Add the codes circled in red below to the media-gallery.js file

view - 2023-12-12T140726.048.pngview - 2023-12-12T140730.772.png

// step 1
let image = document.querySelector(".product__media-list.contains-media.grid.grid--peek.list-unstyled.slider.slider--mobile .product__media.media.media--transparent img")

// step 2
image = activeMedia.querySelector('.product__media.media.media--transparent img')

// step 3
const ratio = 3
function mouseMove(e) {
  const rect = e.currentTarget.getBoundingClientRect()
  const offsetX = e.pageX - (rect.x + window.scrollX)
  const offsetY = e.pageY - (rect.y + window.scrollY)
  let { naturalHeight, naturalWidth } = image
  naturalHeight = naturalHeight * ratio
  naturalWidth = naturalWidth * ratio
    image.style.width = naturalWidth + 'px'
    image.style.height = naturalHeight + 'px'
    image.style.maxWidth = 'unset'
    const top = offsetY * (1 - naturalHeight / rect.height)
    const left = offsetX * (1 - naturalWidth / rect.width)
    image.style.top = top + 'px'
    image.style.left = left + 'px'
}

function mouseOut() {
  image.removeAttribute('style')
}

const x = document.querySelector(".product__media-list.contains-media.grid.grid--peek.list-unstyled.slider.slider--mobile")
x.addEventListener('mousemove', mouseMove)
x.addEventListener('mouseleave', mouseOut)

Tutorial: https://www.loom.com/share/d67ebf6050c04ab8a5b2478fb73f5b33 

Hope it helps @AryavK 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

AryavK
Trailblazer
219 9 29

anyway to make it less blurry and more sharp on hover @BSS-Commerce , pls reply quick,  I plan to launch my store in 2 days

faith&you