Re: How To Stop Image Preview Being Zoomed In? (Refresh Theme)

Solved

How To Stop Image Preview Being Zoomed In? (Refresh Theme)

wderge3rt54
Excursionist
18 0 5

My product previews are getting zoomed in and zoom in even more when you hover over them on desktop.

I would like to disable both of these features and just have the image displayed in it's full, regular size.

 

You can check my site freundapparel.com and see the socks I just posted are zoomed in on the home page.

Accepted Solution (1)
EBOOST
Shopify Partner
1085 290 323

This is an accepted solution.

hi @wderge3rt54 

May I suggest these steps:

1. Go to Store Online-> theme -> edit code
2. Assets/base.css
3. Copy code below to bottom of file

 

 

.card__media .media img {
  object-fit: contain!important;
}

 

 

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

EBOOST

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips

View solution in original post

Replies 11 (11)

EBOOST
Shopify Partner
1085 290 323

hi @wderge3rt54 

May I suggest these steps:

1. Go to Store Online-> theme -> edit code
2. Assets/base.css
3. Copy code below to bottom of file

.card:hover .media.media--hover-effect>img:first-child:only-child, 
.card-wrapper:hover .media.media--hover-effect>img:first-child:only-child {
	transform: none!important;
}


Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

EBOOST

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
wderge3rt54
Excursionist
18 0 5

This fixed the zoom on mouse hover, however the initial zoom on the product preview is still there. I mostly want to fix this initial zoomed version that the product is displayed at, it looks horrible. 

 

So please if you have a code that makes it so the product preview is not zoomed in when displayed.

GemPages
Shopify Partner
5625 1261 1232

Hello @wderge3rt54 

 

It's GemPages support team and glad to support you today.

I would like to give you a solution to support you.

1. Go to Online Store -> Theme -> Edit code.

2. Open your theme.liquid theme file.

3. Paste the below code before </body>:

 

<style>
   .card__media img{
     transform: scale(1) !important;
  }
</style>

 

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
wderge3rt54
Excursionist
18 0 5

I didn't say anything about wanting to change the color, I want to change the zoom in on my product previews on the home page. And the zoom on hover.

GemPages
Shopify Partner
5625 1261 1232

@wderge3rt54 

 

Sorry, I have updated the answer again and removed the zoom image on the Refresh theme when hovered

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
wderge3rt54
Excursionist
18 0 5

My main issue is the initial zoom that the preview is displayed at even without the hover. The hover i would also like to possibly get rid of, but does not bother me as much.

 

Please just let me know how can I make it so the product preview thumbnails are not zoomed in (I don't mean when you hover, just when you load the page)

 

Thank you. 

EBOOST
Shopify Partner
1085 290 323

This is an accepted solution.

hi @wderge3rt54 

May I suggest these steps:

1. Go to Store Online-> theme -> edit code
2. Assets/base.css
3. Copy code below to bottom of file

 

 

.card__media .media img {
  object-fit: contain!important;
}

 

 

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

EBOOST

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
wderge3rt54
Excursionist
18 0 5

thanks this did what I needed 🙂

mxaxm
Visitor
2 0 0

hi EBOOST - I am trying to turn off the automatic slight magnification/zoom on all my 

photos in the Craft theme. 

 

I tried adding your suggested code, but it did not turn off this feature. 

 

Would you take a look at my website Moira California https://moiracalifornia.com/

password: tylerfoote

 

To see if you have recommendation on how to change this code 

 

Thank you, Moira

mxaxm
Visitor
2 0 0

P.S. I am new to adding code to files. Would you guide me about where to put the code

- inside or outside existing brackets?

thank you

EBOOST
Shopify Partner
1085 290 323

Hi @mxaxm,


May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code

EBOOST_1-1672356985580.png
2. Assets/base.css
3. Add code below to end of file

.card__media .media img {
  object-fit: contain !important;
  transform: scale(1) !important;
}

 

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips