Contain product images in a square - Canopy Theme

Store Design
, , , ,
1

Hi

Does any one know if it’s possible to make the product image stay in a square on the product page instead of constantly bouncing around depending on the image size? We also wanted to hide the carousel of images underneath. Are these possible?

Thanks in advance.

2

Hi LWSOnline,

  1. Go to “Online Store” > “Themes” in your Shopify admin.
  2. Click on “Actions” → “Edit code” for your active theme.
  3. Open the product template file (e.g., product.liquid).
  4. Add the following CSS code:
.product-single__photo img {
  width: 100%;
  height: auto;
  padding-top: 100%; /* This creates a square container */
}

.product-single__thumbnails {
  display: none;
}​

This CSS will make the product image stay in a square and hide the image carousel.

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

3

Hi

Sorry for the delay. I’ve just tried this but am getting an error when I try to save. Do I just paste it anywhere within the Product.json? I am getting the following error:

“Invalid JSON: unexpected token”

Thanks for your help.