Product Box Designer: Block — Thumbnail
Block — Thumbnail
Thumbnail displays the product's main image on the card. It is usually the first thing a customer notices and the most common top block on a product card.
What the block does
The block retrieves the product's main image and displays it on the card. If the product has multiple images, the card switches between them when the customer hovers the mouse over it — with small dots below the image indicating how many images there are. If the product lacks an image, a neutral placeholder icon is displayed instead, so the card never collapses.
The entire image is a link to the product page.
Settings
Setting | What it does |
|---|---|
Image size | The height the image is displayed in. A lower value results in more compact cards; a higher value highlights the image. |
Object fit | How the image fills the area. Cover crops the image so it fills the entire area without distortion. Contain displays the entire image, but may leave space on the sides. |
Inner padding | Distance between the image and the edges of the block. |
Outer padding | Distance around the block, towards the rest of the card. |
How to use it
- Select Cover when product images are cropped uniformly and you want a consistent, grid-like front page. This provides the tidiest result.
- Select Contain when it is important that the entire product is always visible — for example, furniture or products in different formats.
- Keep the image size consistent across templates you compare, so the cards have the same height in the category list.
Tips
- Consistent image quality in the catalog means more for how the card looks than any setting here. Switch to dummy data mode if uneven product images make it difficult to assess the design.
- Hover images automatically fetch the product's additional images — you don't need to do anything beyond uploading more images to the product.
- Energy label and variant buttons can be displayed on top of the image if those functions are enabled in the store.