Please help how to make the product images of the same height size
Store url: https://y0sqibkk2k09px3y-21603111.shopifypreview.com/collections/activewear
Please help
Topic summary
A user seeks help making product images uniform in height on their Shopify store. Two solutions are provided:
Theme Settings Approach:
- Navigate to theme settings and look for “Image crop for products” options under product/collection settings
CSS Code Solution:
- Inspect the page to identify the image wrapper class (example: “boost-pfs-filter-product-item-main-image”)
- Go to Shopify Admin > Theme > Edit Code
- Locate the base.css file
- Add CSS code at the bottom:
.boost-pfs-filter-product-item .boost-pfs-filter-product-item-main-image {
min-width: 100%;
min-height: 100%;
object-fit: cover;
}
- If this doesn’t work, specify exact height and width values for the images
The discussion includes screenshots demonstrating where to find the relevant code elements and theme settings. The issue remains open with no confirmation of resolution from the original poster.
with that theme it should be in theme settings and products and look for Image crop
Hi @Janamir
Please follow these steps:
- Step 1: Inspect the page to find the tag’s wrapper, then get the wrapper tag class. For example, for “boost-pfs-filter-product-item”, get the IMG tag’s class here as “boost-pfs-filter-product-item” -main-image"
- Step 2: Go to Shopify admin > Theme > Edit Code:
Find any .css file, which should be base.css. Then insert the following lines at the bottom of the page and save:
.boost-pfs-filter-product-item .boost-pfs-filter-product-item-main-image{
min-width: 100%;
min-height: 100%;
object-fit: cover;
}
If it is not working, you can add specific heights and widths for images.
I hope that it’s useful for you.