Product image size

Store Design
,
1

how to make all product photos same size?

2

Hi @Nu89

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

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

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file → Save

a.collection-card.collection-card–reverse-transition.shadow.is-selected,

.content-over-media.group.rounded-sm {

height: 100%;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

1 Like
3

Thank you, I appreciate it

May you help me with my other questions please

4

Sure!

1 Like
5

hello,

sorry the code isnt working anymore?

6

Hi,
To make all product photos the same size in Shopify, you can follow a step-by-step approach to ensure consistency and improve the visual appeal of your store.

  1. : Go to Online Store > Themes > Customize.
  2. Edit CSS: Access the theme’s CSS by going to Theme Actions > Edit Code and find the theme.scss.liquid or similar file.
  3. CSS Code: Add CSS rules to target product images and ensure they’re displayed uniformly. Here’s a simple example:
.product-image {
  width: 100%;
  height: auto;
  object-fit: cover; /* This ensures the image covers the area nicely without distortion */
}
​

Replace .product-image with the actual class used by your Shopify theme for product images. The object-fit: cover; property ensures that your images will cover the area without stretching, but you might lose some parts of the image if its aspect ratio differs from the container.

7

Yes, you can use the app: https://apps.shopify.com/image-precision-ai for bulk operations. Follow the instructions in this document: https://github.com/huangcong12/image_precision_ai_document/blob/main/How%20to%20Adjust%20Shopify%20Store%20Product%20Image%20Resolution.md