Contain product images in a square - Canopy Theme

LWSOnline
New Member
9 0 0

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.

Replies 2 (2)

topnewyork
Trailblazer
212 25 27

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!

 

Need a Shopify developer?
Hire us at topnewyorkwebdesign.com
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel
LWSOnline
New Member
9 0 0

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.