Products: Smaller product image size

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

Result after:

Before:

How to:

Option 1: Product pages and homepage featured product

This version will change the size on all your product pages and if you have any homepage featured products.

/* -- code to make product image smaller -- */
.product__slides.product-single__photos.slick-slider.slick-dotted, .product__slides.product-single__photos.slick-slider {
    max-width:400px; margin: auto !important;
}
/* - end - */

Option 2: Homepage featured product only

This version will only change the size for the homepage featured product leaving the production pages at the regular size.

/* -- code to make product image smaller -- */
.template-index .product__slides.product-single__photos.slick-slider.slick-dotted, .template-index .product__slides.product-single__photos.slick-slider {
    max-width:400px; margin: auto !important;
}
/* - end - */

The value 400px; can be adjusted to your preference.

Where do I add the code?

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code