Blurry or pixelated
The picture is smaller than the space it fills, so the browser stretches it.
Check the picture's size in ContentFiles: select it to see its width.
Upload a larger version: at least 2400 px wide for full-width banners and heroes, 2048 px for product photos (all sizes).
Replace it in the section. Shopify makes the smaller copies for phones by itself.
Also check the picture was not compressed before upload, for example by a messaging app.
Cropped or cut off
Most sections fill a fixed shape, and a picture of a different shape is trimmed at the edges.
- Set a focal point. Select the picture in the section, then Edit > focal point, and select the important part. It stays in view when the picture is trimmed.
- Change the shape. Many sections have Image ratio or Height settings. Choose one closer to your picture's shape.
- Product photos: in Product information, Image fill set to Contain (never crop) shows the whole bottle.
Product photos of different sizes
A grid looks untidy when photos have different shapes. Set Image ratio to Square (1:1) or Portrait (4:5) in the Collection section and product sections, and every card takes the same shape. For the cleanest result, shoot or crop every product photo to the same shape.
Was this guide helpful?
Still need help?Write to us with your shop's address and a screenshot. We reply within two business days, Monday to Friday, usually sooner.
Contact support