Main issue: Product thumbnails in Shopify’s Dawn theme are forced square, cropping the top/bottom of non-square images. The built-in “Adapt to image” ratio setting applies to collection cards, not product-page thumbnails, and did not prevent oversized/cropped thumbnails.
Context: OP provided a product URL (with password) and a screenshot to illustrate the cropping.
Fix implemented: Add custom CSS to section-main-product.css:
.thumbnail img { object-fit: contain !important; }
Explanation: object-fit: contain scales the entire image to fit within the square thumbnail container without cropping, preserving the original aspect ratio.
Outcome: OP confirmed the change worked immediately. No additional changes were needed.
Status: Resolved. Key takeaway: Adjusting product-page thumbnail behavior in Dawn may require a CSS override, as theme settings for image ratio primarily affect collection cards, not product thumbnails.
I have asked this several times, and I cannot believe that nobody else has had this issue and there is a fix. Can anyone please help me?
I am using the Dawn theme and the product thumbnails are square. I have no problem with the shape necessarily, but if my image is not square, it cuts off the top and bottom of the image. Is there a way to have the thumbnails either change to the ratio of the image or have it scale the image to fit? Here is what it looks like.
Hi @sweetstash , there is an option in the dawn theme that controls the image ratio to adapt :
I have that option selected, and it still blows it up above 100%, and that is for the cards in the collection, not thumbnails on a product page.
Hi @sweetstash
Could you drop your product page link here to check?
https://x-stitch-boutique.myshopify.com/products/crystal-mermaid-aquabella
password: Snapdragon0204
Add this code at the bottom of section-main-product.css file
.thumbnail img {
object-fit: contain !important;
}
Beautiful!! It worked! Thank you, thank you! You are a lifesaver!
You are very welcome