Glossary · Web design
Hero image
A hero image is the single lead picture that represents a product or page, usually the first and largest image a visitor sees; on a marketplace listing it is normally the main image.
The term comes from web design, where the hero is the large banner image at the top of a home page or landing page. In e-commerce it is used more loosely for the lead product shot: the MAIN image on Amazon, the first photo on Etsy, the first product image in a Shopify theme.
On marketplaces the hero is the main image, so the main-image rules apply. Amazon asks for a pure white background (RGB 255, 255, 255) and the product filling 85% of the frame. TikTok Shop asks for a front physical view on pure white with no added text, logos or graphics. Etsy asks for a first photo of at least 635 px in both directions, horizontal or square, and warns that thumbnails crop to square, portrait or landscape, so shoot wider and centre the subject.
The mistake is using "hero" to mean the most attractive shot, which is often a styled lifestyle scene, and putting it first. On Amazon and TikTok Shop that breaks the main-image rules. On Etsy and Shopify a styled hero is allowed, but it still has to crop cleanly. Shopify's media guide suggests keeping one aspect ratio per collection, so a portrait hero in a grid of square images looks out of place.
A useful habit is to separate the two jobs: a compliant product photo for the marketplace main image, and a styled scene for store banners, social posts and later gallery slots.
PicBarn's gallery pack follows that split, with your own photo in slot one and lifestyle scenes after it.
See also
- Main imageThe main image is the first photo in a product listing, the one buyers see in search results, and on most marketplaces it must show the real product alone on a plain white background.
- Lifestyle imageA lifestyle image shows the product in use or in a real-looking setting, such as a kitchen, desk or garden, to show scale, context and who the product is for.
- Aspect ratioAspect ratio is the proportion of an image's width to its height, written as 1:1 for square or 4:5 for portrait, and it decides how a photo is cropped in grids and thumbnails.
Related
- AI product photography — lifestyle scenes from one photoPlace your product in a kitchen, living room, desk or outdoor scene. The product stays pixel-exact; the scene, light and shadows are generated around it.
- Shopify product image sizes and how to export every one from a single photoShopify’s official limits (5,000 × 5,000 px, 25 MP, 20 MB), the 2,048 × 2,048 size that displays best, how the CDN serves every other size from one master, and how to get the Amazon, TikTok Shop and Etsy sizes from the same photo.
- Etsy listing photo requirements: sizes, formats, the unedited-photo rule, and how to export them from one photoEtsy’s photo rules from its own help pages: 2,000 px recommended, 635 px floor for the first photo, 20 photos and 2 videos per listing, jpg/png/gif/svg/heic, the new rule that most listings need one unedited real photo, and what AI edits are allowed.