Best Practices
Habits that make any layout look better: photo sizes and shapes, consistent styling, alt text, and keeping pages fast.
Most of what makes a product gallery look professional happens before you open the settings page. It's in the photos themselves. Get these right and every layout looks good. Get them wrong and no setting will fully fix it.
Use one shape for every photo
Pick an aspect ratio and stick to it across your store: square (1:1) or portrait (4:5 or 3:4) for clothing, landscape (4:3) for furniture.
Why it matters: in a slider, a mix of shapes makes the gallery jump in height as shoppers click through. In a grid, mixed shapes leave ragged rows. If you can't reshoot, crop your existing photos to one shape before uploading them.
Upload photos larger than they're shown
Aim for at least 1200px on the long side, and 1600–2000px if you use zoom.
Why it matters: zoom can only show detail that's in the file. A gallery that's 600px wide, showing a 600px photo, has nothing extra to magnify. On high-density screens (most phones and many laptops), a too-small photo also looks soft even without zoom.
Don't go huge, though. A 6000px straight-from-camera file makes the page slow for no visible gain. Resize to about 2000px before uploading.
Keep backgrounds and lighting consistent
Use the same background color (often white or a light neutral), the same lighting and the same framing for every product.
Why it matters: in grid layouts and thumbnail strips, shoppers see several photos side by side. Consistent photos read as one tidy set. Inconsistent ones look like a jumble, even when each photo is good on its own.
Put your best photo first
The featured image is the first thing in the gallery and the photo shoppers see in the shop grid. Make it the clearest, most flattering shot: the whole product, front-on. Put close-ups, the back and lifestyle shots after it.
Give variations their own photos
If a product comes in several colors, add photos to each color's variation in FluentCart. Shoppers who pick "Green" expect to see green. Gallery per Variation →
Write alt text
Alt text is a short description of an image, read aloud by screen readers and used by search engines. Smart Product Gallery uses each image's title from the Media Library as its alt text, and falls back to the product's name.
So give your images meaningful titles in Media → Library: "Navy leather strap watch, front view", not "IMG_4471". It helps shoppers using screen readers and helps your images show up in search. Captions & Alt Text →
Pick the right image sizes
Under Gallery → Product Image, Image Size controls the file used for the main image. Under General, Thumbnails Size does the same for thumbnails.
- For the main image, keep Original uploaded image if you resize your photos before uploading, as suggested above. Otherwise choose Large.
- For thumbnails, the default Thumbnail (150x150) is plenty. A thumbnail rarely displays bigger than about 150px. Loading full-size photos as thumbnails wastes bandwidth.
Keep it fast
- Leave Lazy Load on On Demand (the default). Images further down the gallery then load only when they're needed.
- Compress your photos. WebP files are usually much smaller than JPEGs at the same quality.
- If you use a caching or optimization plugin, clear it after changing settings.
Change one setting at a time
When you're fine-tuning, change one thing, Save Settings, and refresh a product page. When you change five things at once, it's hard to tell which one caused what you're seeing. If a tab gets into a muddle, Reset Tab puts it back to the defaults.
Where to go next
- Layouts Overview — choose a layout that suits your photos
- Troubleshooting — if something looks wrong