Description
- make image change on hover Summary Block Product
- view demo – password: abc
- buy me a coffee
#1. Install Code
#1.1. First, hover on page where you use Summary Block > Click Gear icon
Click Advanced > Paste this code
<script>
function initSummaryHoverImages(){document.querySelectorAll(".sqs-block-summary-v2 .summary-item").forEach((e=>{const r=e.querySelector("a.summary-thumbnail-container");if(!r)return;const t=r.getAttribute("href").split("?")[0]+"?format=json",m=e.querySelector(".summary-thumbnail.img-wrapper");if(!m)return;if(m.querySelector(".summary-hover-image"))return;const a=e=>{if(e.item&&e.item.items&&e.item.items.length>1){const r=e.item.items[1].assetUrl,t=document.createElement("img");t.src=r+"?format=750w",t.className="summary-hover-image",m.appendChild(t)}};window._hvCache[t]?a(window._hvCache[t]):fetch(t).then((e=>e.json())).then((e=>{window._hvCache[t]=e,a(e)})).catch((e=>console.log("Error loading summary hover image:",e)))}))}window._hvCache=window._hvCache||{},window.addEventListener("load",initSummaryHoverImages),document.addEventListener("mercury:load",initSummaryHoverImages);
</script>
<style>
.sqs-block-summary-v2 .summary-thumbnail.img-wrapper{position:relative!important;overflow:hidden!important}.summary-hover-image{position:absolute!important;top:0;left:0;width:100%!important;height:100%!important;object-fit:cover!important;opacity:0;transition:opacity .6s ease-in-out!important;z-index:10;pointer-events:none}.sqs-block-summary-v2 .summary-item:hover .summary-hover-image{opacity:1}.sqs-block-summary-v2 .summary-thumbnail-image{transition:transform .8s!important}
</style>
#1.2. Make sure you added > 2 images to Product Images
