Product Image Zoom Effect for Dawn 5.0 - No APP or External Library

Product Image Zoom Effect for Dawn 5.0 - No APP or External Library

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

For people who have used Debut theme, how we wish to have the hover effect in Dawn theme as well. This is possible without an APP or external library. Just follow the steps below. 

To start:

1. Go to your Admin store > Online Store > Themes > Actions > Edit code.

2. Open the main-product.liquid file under the Sections folder. 

3. We need to enhance the slider-component. To do that we need to replace the first <slider-component> to <product-zoom>. Also the closing tag </slider-component> to </product-zoom>.

4. Next, we will need to add a little CSS code for the zoom effect to work. Open the Asset folder and find the 'section-main-product.css.' Then add the code below. 

 .product .product__media-icon {
display: none;
}

.product .product__media-toggle {
display: none;
}

.product__media {
cursor: pointer;
background-position: 50% 50%;
}

.product__media > img {
opacity: 1;
will-change: opacity;
transition: opacity .6s ease;
}

.product__media:hover > img {
opacity: 0;
}

 

5. Last thing to add is the script code. Open the global.js, still at the Asset folder. Then add the code below. 

class ProductZoom extends SliderComponent {
constructor() {
super();
this.zoomItems = this.querySelectorAll('modal-opener');
this.zoom()
}

zoom() {
this.zoomItems.forEach(item => {
item.style.overflow = 'hidden';
const zoomImg = item.querySelector('.product__media');;

item.addEventListener("mouseout", function() {
zoomImg.style.background = '';
});

item.addEventListener("mouseover", function() {
const background = item.querySelector('img').src.replace('https:', '');
zoomImg.style.background = `url(${background})`;
zoomImg.style.backgroundRepeat = 'no-repeat';
zoomImg.style.backgroundSize = '150%';
})

item.addEventListener("mousemove", function(e) {
const itemWidth =zoomImg.getBoundingClientRect().width;
const itemLeft = zoomImg.getBoundingClientRect().left;
const itemHt = zoomImg.getBoundingClientRect().height;
const itemTop = zoomImg.getBoundingClientRect().top + window.scrollY;
const translateX = Math.round((e.pageX - itemLeft ) / itemWidth * 100);
const translateY = Math.round((e.pageY - itemTop) / itemHt * 100);
zoomImg.style.backgroundPosition = `${translateX}% ${translateY}%`;

});

});
}
}

customElements.define('product-zoom', ProductZoom);

 

That is it (",)

Copied!
Back to blog

Leave a comment