Hello, on product page, pictures carousel thumbnails does not show full product, product is cut off in square. What can we do to see the full product in the carousel pictures?
Topic summary
Issue: On a product page using the Dawn theme, thumbnail images in the carousel were cropped into squares, cutting off parts of the product.
Context: The store wasn’t live initially; a Shopify preview link was later shared. A screenshot illustrated the cropping issue.
Fix implemented: Edited theme CSS (section-main-products.css) to set the thumbnail images to contain within their frames:
- .thumbnail img { object-fit: contain !important; }
Explanation: The CSS property “object-fit: contain” scales the entire image to fit inside the thumbnail without cropping, which may introduce letterboxing (empty space) but preserves the full product view.
Outcome: The change resolved the issue. No further actions or open questions. Images/screenshot and code snippet were central to the resolution.
Hi @DaivaHappy , can you share your store url?
Hello, our page is not live yet
Oh, here is the link https://f00yyocs38g71pfx-83798229333.shopifypreview.com
1 Like
@DaivaHappy , go to section-main-products.css :
.thumbnail img {
object-fit: contain !important;
}
it worked, thank you!
1 Like