Image Zoom Spotlight Theme

Solved

Image Zoom Spotlight Theme

heartlessoff
Tourist
16 0 0

When using Image Zoom "Open lightbox", the zoom is very strong. Is there any way to reduce the zoom level/degree so that you can view the image without scrolling the mouse. For example: https://neuronprolapse.com/products/exo-bug-cuff when zooming in, the image is partially visible, I want to make it fully visible 

Accepted Solution (1)
Kaushik_7
Tourist
6 1 3

This is an accepted solution.

Hello! @heartlessoff  Please delete the ones I have provided and follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open "base.css"
6. Add the following code at the end of the file.

@media screen and (min-width: 750px) {
  body .product-media-modal__content > img {
    width: 55% !important;
  }
}

body .product-media-modal__content>img {
  width: 100% !important;
}

 If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.

View solution in original post

Replies 7 (7)

BSSCommerce-TC
Shopify Expert
199 43 45

Hi @heartlessoff ,

You can follows these steps

 

Step 1: Navigate to Online Store > Themes > Edit code and find base.css file

Step 2: Insert below code at the end file and Save them

 

@media screen and (min-width: 750px) {
    .product-media-modal__content > img {
        width: 20% !important;
    }
}

 

 

Hope this can help you.

If our suggestion is useful, please let us know by giving it a like and mark as solution . Thank you 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


MIDA: Heatmap, Record & Replay |BLOOP Referral Program, Reward |

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Kaushik_7
Tourist
6 1 3

Hello! @heartlessoff  Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. "section-main-product.css"
5. Add the following code at the end of the file.

 

body .product-media-modal__content > img {
    width: 50% !important;
}

 

Outputs:

Kaushik_7_1-1720287749499.png

 



Kaushik_7_0-1720287675255.png

 

 
If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.

heartlessoff
Tourist
16 0 0

Thank you it worked for me width: 55% but why does it only work on a computer from a phone it still zooms in very large.

Kaushik_7
Tourist
6 1 3

Hello! @heartlessoff  Please Try this code follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. "section-main-product.css"
5. Add the following code at the end of the file.

body .product-media-modal__content > img {
    width: 55% !important;
}

 Outputs:

Kaushik_7_0-1720287980642.pngKaushik_7_1-1720287989461.png

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.

heartlessoff
Tourist
16 0 0

If I put it in section-main-product what worked for computer in base.css stops working how to fix it? And also the problem is that if you zoom in from your phone, it does not let you reach the borders,

Kaushik_7
Tourist
6 1 3

This is an accepted solution.

Hello! @heartlessoff  Please delete the ones I have provided and follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open "base.css"
6. Add the following code at the end of the file.

@media screen and (min-width: 750px) {
  body .product-media-modal__content > img {
    width: 55% !important;
  }
}

body .product-media-modal__content>img {
  width: 100% !important;
}

 If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.

heartlessoff
Tourist
16 0 0

Thank you so much! It worked for me like this, I put it in base.css

body .product-media-modal__content>img {
width: 112% !important;
}

@media screen and (min-width: 750px) {
body .product-media-modal__content >img {
width: 53% !important;
}
}

And maybe you know a couple other things?
1 / When clicking on the slider from the computer when viewing images Zoom is removed and flipping is possible only with the mouse, is it possible to remove this so that when you click on the slider in Zoom it does not leave Zoom and only when you click on the image with (-) or crosses out of it?
2 / Is it possible to move (X) close Zoom a little higher and possibly make it a little smaller?