How to change product Thumbnail size to 1:1 - Forum | JoomShaper
Staff replied EasyStore

How to change product Thumbnail size to 1:1

Asked by MANSIONA 1 year ago Last activity 1 year ago

2 replies

Paul Frankowski Senior Staff
1 year ago · edited

Hi,

Product Photos used on your website are not square-shaped (they are rectangular to the top), so yes only additional CSS can help. A Small tip, class names used there:

.easystore-product-gallery button  {  }

.easystore-product-gallery button  img { }

Choose the Right CSS method, those are the options:

  • `overflow: hidden`: Best for static cropping with full control over placement.
  • object-fit: Ideal for responsive designs with consistent aspect ratios.
  • clip-path: Use for creative shapes and advanced cropping.
Paul Frankowski Senior Staff

For example

.easystore-product-gallery > button  {
  clip-path: inset(5% 0% 5% 0%);}

After using it
info_2979_2024.gif

Whole rest is on your hands & keyboard.

Log in to reply.