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.

Compatibility: Only works in Dawn version 5.0 and  Shopify 2.0 FREE themes.

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. 

Check DEMO store here 💻. Password: made4uo

What you are buying:

  • Product image zoom when hovered in product page
  • Script written in javascript, no jquery. 

What makes our code better:

  • We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
  • We do not leave or add codes use to advertise for our website
  • Our code is mobile friendly

Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away. 

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-zoom .product__media-icon {
display: none;
}

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

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

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

 product-zoom .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!
Voltar para o blogue

Deixe um comentário