diff --git a/components/product/ImageList.vue b/components/product/ImageList.vue
index f346bcbc..ffc37872 100644
--- a/components/product/ImageList.vue
+++ b/components/product/ImageList.vue
@@ -18,6 +18,7 @@
           quality="80"
           :placeholder="img(image.large?.src, { h: 548, f: 'webp', blur: 2, q: 10 })"
           format="webp"
+          :data-zoom-src="image.xlarge?.src"
         />
       </div>
     </div>
diff --git a/models/ProductImageSet.ts b/models/ProductImageSet.ts
index b8223e75..f9e24b70 100644
--- a/models/ProductImageSet.ts
+++ b/models/ProductImageSet.ts
@@ -4,11 +4,13 @@ export class ProductImageSet extends Model {
   small: ProductImage | null
   medium: ProductImage | null
   large: ProductImage | null
+  xlarge: ProductImage | null
 
   constructor(data: any) {
     super(data)
     this.small = data && data.small ? new ProductImage(data.small) : null
     this.medium = data && data.medium ? new ProductImage(data.medium) : null
     this.large = data && data.large ? new ProductImage(data.large) : null
+    this.xlarge = data && data.xlarge? new ProductImage(data.xlarge) : null
   }
 }
diff --git a/plugins/medium-zoom.client.ts b/plugins/medium-zoom.client.ts
index fc4a37ea..fe27882c 100644
--- a/plugins/medium-zoom.client.ts
+++ b/plugins/medium-zoom.client.ts
@@ -3,7 +3,11 @@ import mediumZoom, { Zoom } from "medium-zoom";
 
 export default defineNuxtPlugin((nuxtApp) => {
   const selector = ".image-zoom";
-  const zoom: Zoom = mediumZoom(selector, { background: "#0f0f0f87" });
+  const innerWidth = window.innerWidth
+  const zoom: Zoom = mediumZoom(selector, {
+    margin: innerWidth < 640 ? 45 : innerWidth < 1024 ? 24 : innerWidth < 1536 ? 96 : 150,
+    background: "#0f0f0f87"
+   });
 
   // (re-)init for newly rendered page, also to work in SPA mode (client-side routing)
   nuxtApp.hook("page:finish", () => {