Every image I upload to the featured collection is blurry. This may be because I limited each row to one product. I’d love some help figuring out why it’s blurry though.
Website - evrenclothing.com
Password - chewno
Topic summary
A user is experiencing blurry product images in the Featured Collection section of their Shopify store using the North theme. This issue may be related to limiting each row to display only one product.
Proposed Solutions:
-
Adjust theme settings: Navigate to Online Store > Themes > Customize > Featured Collection settings > Theme settings > Image ratio, then select “Adapt to image” and save changes.
-
Apply custom CSS: Add the following code to the theme’s CSS file or create a new custom CSS file:
.products .product .product_thumbnail img {
width: 100%;
object-fit: scale-down;
object-position: center center;
}
- Image quality check: Consider uploading higher-quality product images, as the current images may inherently lack sharpness.
A before/after screenshot comparison was provided showing the visual improvement after implementing the CSS changes.
Hi @isaacdob
Please open your Online Store > Themes > Customize, select Featured collection section > open Theme settings > Image ratio > select Adapt to image, save changes and check again.
Hello @isaacdob , Please try to put one better image of this product because it’s looks little bit a blurry also. But you can also put the CSS code like below. Please try and see the image.
.products .product .product_thumbnail img {
width: 100%;
object-fit: scale-down;
object-position: center center;
}
Put it in where your CSS of this section is called or make a new custom file for it.
See the screenshot below after make the above changes.
Thanks.