product image size

Nu89
Tourist
39 0 1

how to make all product photos same size?

Replies 6 (6)

PageFly-Henry
Astronaut
946 269 212

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Nu89
Tourist
39 0 1

Thank you, I appreciate it

May you help me with my other questions please

PageFly-Henry
Astronaut
946 269 212

Sure!

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Nu89
Tourist
39 0 1

hello,

sorry the code isnt working anymore? 

Mizan-devs
Shopify Partner
3 0 1

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.

 

Mizan

huangcong12
Shopify Partner
4 0 0