Thumbnails
A strip of thumbnails above or below the main image, sized automatically to fill the row.
Layout
Below / bottom edge or Above / top edge of the main image.
Natural (uncropped), Square (1:1), Standard (4:3), Portrait (3:4) or Widescreen (16:9). Thumbnails always fill (crop) their box.
The gap between thumbnails.
How many show at once; each is sized automatically to fill the row (there is no pixel size to set). With fewer images, each one grows to fill the row. Extra thumbnails scroll sideways: drag with the mouse, swipe, scroll, or use the scroll buttons.
Active State & Appearance
| Setting | Default |
|---|---|
| Shape | Rounded (8 px corners), or Square, Circle |
| Active border color · Active border width (px) | #2563eb · 2 (0–6) |
| Inactive thumbnail opacity (%) | 100 (20–100); lower it to make the active one stand out |
Navigation
Small buttons at each end of the strip that scroll it by about a page, without changing the main image. Only useful when there are more thumbnails than fit. They use the Arrows tab's colors, shape and icons (including custom icons) and hide with its Hide on mobile. With arrows placed Inside image, they sit over the ends of the strip; otherwise beside it.
Clicking a thumbnail shows that image. With focus in the strip, ← → move between images. A product with one image has no strip. To change the count or hide the strip on phones, see Responsive.