How do I make make the whole product image visible on the Ride theme

Store Design
,
1

I’m trying to get my product images to be fully visible on my shop and front page, but instead They’re showing up zoomed in and when I hover over they zoom in further. I would like the full product image to be available and disable the additional zoom when hovered over. Any and all help is greatly appreciated.

2

Hi @Trainersmail

Would you mind to share your Store URL website? with password if its protected. Thanks!

3

Not at all! Do I share that here or should I message you somehow?

4

Its up to you where youll be comfortable.

5

Try this one. Im not sure if this enough.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.card .media.media--hover-effect>img:only-child, .card-wrapper .media.media--hover-effect>img:only-child {
    transition: none;
    object-fit: scale-down;
}
.media.media--transparent.media--hover-effect img {
  padding: 5px;
}
  • And Save.

I hope it help.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

6

YES! Oh my gosh, I’ve been trying to figure this out for the past week, thank you so much!

7

Also, do you know how to shrink the image on the product pages? Thanks again!

8

Hello

This very helpful, Thank you for this code.

It is not working for ‘featured collection’ and ‘you might also like’ collection. Do you have solution for this as well ?