How can I resize product menu images without altering the original?

Store Design
, , ,
1

Screenshot 2023-07-31 092831.png
Screenshot 2023-07-31 092831.png931Ă—520 64.2 KB

Is there a way to resize images on a product menu page so that all thumbnails are the same size without cutting off or resizing the original product image?

2

Hi,

Could you specify the theme you’re using? It’s possible they have a setting in the Theme Editor for this, otherwise it can be achieved with some CSS.

3

I’m using the Dawn theme (before the most recent 11.0 updates)

The theme editor allows you to have small, medium, or adapt to image as options on the product page. The first two options cut out parts of the image and the last option is as shown in my original post.

4

One quick solution would be the following:

  1. On the section and select either of the two other options.
  2. At the bottom of the section open the “Custom CSS” accordion.
  3. Add the following CSS code:
.product-card-wrapper img {
  object-fit: contain;
}

Note: It may show a colored or gray background for certain images. In that case:

  1. Go to Theme settings and open “Product cards”.
  2. Change “Color scheme” to “Background 1”.

Any further questions just let me know.

1 Like
5

This worked! THANK YOU!!! :slightly_smiling_face:

1 Like
6

Happy to help! Feel free to reach out any time if you need further assistance.