Products: Smaller product image size

To reduce the size of your main product image, you can make this code customization:

On a blank new line, add the following line of code the bottom of this file:

https://myshopify.com/admin/themes/current?key=assets/style.scss.liquid&line=9999

/* -- code to reduce product image size -- */
    .product__photo,.product__photo img {
        max-height: 400px;
    }
/* - end - */

Adjust the size you want from 400px - Original is based on the type of image uploaded. This would restrict how large the image can be. 

If you'd like to only target mobile devices, use a media query:

/* -- code to reduce product image size mobile only -- */
@media only screen and (max-width: $small) {
    .product__photo,.product__photo img {
        max-height: 250px;
    }
}
/* - end - */

Still need help? Contact Us Contact Us