How can I improve the zoom feature on my product pictures?

Shopify Discussion
1

Hello! I really need some help with this when i use the zoom feature on my product pictures it dousn’t zoom in enough. I would like the images to zoom in alot more. Any ideas?

2

Extending zoom functionality on product pictures typically refers to allowing users to zoom in on product images for a closer view. This can be a valuable feature for e-commerce websites, as it enables customers to examine products in detail before making a purchase. Here’s a general guide on how to implement this feature on your website:

1. Choose a JavaScript Library:

Select a JavaScript library or plugin that provides zoom functionality for images. Some popular options include:

  • elevateZoom: This is a jQuery plugin commonly used for image zoom effects.
  • CloudZoom: Another jQuery-based zoom plugin that provides various zooming options.
  • Zoom.js: A lightweight vanilla JavaScript library for image zooming.

Choose the one that best suits your website’s technology stack and requirements.

2. Add the Library to Your Website:

Include the chosen library’s JavaScript and CSS files on your web pages. You can typically link to these files using and tags in the HTML head or include them in your project’s build process if you’re using a bundler like Webpack.

3. Markup Your Product Images:

For each product image you want to enable zoom on, add appropriate HTML markup. Typically, you’ll wrap the image in a container element and give it a specific class or data attributes that the zoom library will recognize.

Product Image

4. Initialize the Zoom Plugin:

In your JavaScript code, initialize the zoom plugin on the selected image containers. This usually involves calling a function provided by the plugin and specifying the settings you want.

$(document).ready(function () {
$(‘.product-image-zoom’).elevateZoom({
zoomType: ‘inner’,
cursor: ‘crosshair’,
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 500
});
});

3

this is the website: antonbjarkiolsen.com

It already has a zoom feature when you click on product pictures but i want it to zoom in more.

4

Hi @AntonBjarki

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above tag
  5. And paste the below code

If this solution will not fits your requirement for you then DM me.

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Rock Technolabs

5

Hello! I added the code and changed padding to 0px and it zoomed the picture in a little bit but not as much as i would want. Here is a refrence of what i want it to look like:

https://amiri.com/en-is/collections/mens-ready-to-wear/products/satin-cropped-varsity-jacket-black

6

Hi @AntonBjarki Please add this CSS code

.mfp-content img.mfp-img {
    max-height: 1000px !important;
}

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Rock Technolabs

7

Hello! I inserted the code but nothing happened mabey i put it in the wrong place?