Force product images to be square - product page

Boat
Shopify Partner
14 0 5

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. 😄

 

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

PW: lovisabest

 

Thank you!

Replies 5 (5)

made4Uo
Shopify Partner
3805 713 1127

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;
}

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
Boat
Shopify Partner
14 0 5

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. 

Boat
Shopify Partner
14 0 5

oop no I tried to fiddle with the width, I did not work ☹️

made4Uo
Shopify Partner
3805 713 1127

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 mediummade4Uo_0-1666037074902.png

 

 

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%;
}
}

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
Jevgenij
New Member
7 0 0

Hi! How about Sense theme ? ;/