Force product images to be square - product page

Store Design
1

Hello everyone

How can I force product media (pictures) to be displayed in a square frame in product page?

Just as I can choose to display pictures as square when viewed rows in the collections, I’d like the main image to always be square when in product page. I hope this is clear. :grinning_face_with_smiling_eyes:

I am cool with coding, using Dawn, https://by-lovisa.myshopify.com

PW: lovisabest

Thank you!

1 Like
2

Hi @Boat

Thank you for providing your website. You can try the following instructions to make your images square in your product pages.

  1. From your Admin Page, click Online Store > Themes >Actions > Edit code
  2. In the Asset folder, open the base.css
  3. Paste the code below at the very bottom of the file.
.product__media.media.media--transparent.gradient.global-media-settings {
    aspect-ratio: 1;
}
1 Like
3

Thank you @made4Uo it is aaaalmost perfect. The Images however are now huge and float over the product description. I also tried to change the setting to “small”, they were medium before.
So they need to have a fixed max width I guess.

4

oop no I tried to fiddle with the width, I did not work :frowning:

1 Like
5

Hi @Boat

You should be able to change the width of the image in dawn using the theme editor.

  1. From your Admin Page, click Online Store > Themes > Customize
  2. Go to your product page and click the Product Information
  3. Change the Desktop media size to small or medium
    made4Uo_0-1666037074902.png
    made4Uo_0-1666037074902.png1160×726 55.7 KB

If the issue still persist. I think you might have added a custom code before. Try the code below instead

  1. From your Admin Page, click Online Store > Themes >Actions > Edit code
  2. In the Asset folder, open the base.css
  3. Paste the code below at the very bottom of the file.
@media screen and (min-width: 990px) {
.product .grid__item.product__media-wrapper {
    max-width: 40%;
}
}
6

Hi! How about Sense theme ? ;/