Image Display Issues

💡 In this guide, you will identify whether an image is cropped, stretched, or using the wrong source ratio, then adjust its display mode. Estimated time: 5 minutes.

If product images, gallery images, or homepage module images are incomplete, the module is usually using a crop-to-fill mode. Try Fit inside first.

If images are not uploaded yet, start with the guide

If your images are not ready yet, read Image Guidelines first, prepare the right size for each use case, then upload.

First Check

What you see	Common cause	Try first
Image edges are cropped	Crop-to-fill mode	Change to Fit inside
Image is distorted	Stretch mode	Do not use Stretch
Product list is uneven	Source image ratios differ	Use consistent ratios
Banner is blurry	Source image too small	Use a larger landscape image

1. Change Mode

Open the page designer:

1. Click the module that contains the image.
2. Find Media or image display mode in the right properties panel.
3. Change it to Fit inside.
4. Publish and refresh the frontend.

2. Know Modes

Mode	Best for
Crop to fill	Filling cards evenly, but edges may be cropped
Fit inside	Showing full product images
Stretch	Usually not recommended, can distort images
Original size	A few special images
Scale down	Large images that should not be enlarged

3. Replace Image

If the image still looks wrong after changing mode, the source ratio may not fit the module.

Suggestions:

• Use square product images.
• Use landscape images for banners.
• Keep the subject away from the edge.
• Compress before uploading.

Pitfalls

Mistake	Result	How to avoid it
🟡 Mixed product ratios	Product list looks messy	Use square images
🔴 Using Stretch	Image becomes distorted	Use Fit inside
🟡 Vertical image as banner	First screen looks weak	Use landscape image
🟡 Source image too large	Page loads slowly	Compress before upload

Next

📚 Image Guidelines - prepare image sizes and formats by use case.