General

Image Variant Thumbnail

A selectable image variant thumbnail component

Overview

The ImageVariantThumbnail component shows a small image for a product variant and supports selection state, so users can pick variants by image in buyboxes, galleries, or filters.

Key Business & UX Benefits

Lets customers choose variants by sight instead of name alone.
Keeps variant selection compact and consistent in buyboxes and lists.
Makes the selected variant obvious with a clear selected state.
Reuses one component across product cards, filters, and galleries.

Pro-Tip from Larry: Use it in the buybox so customers see the exact variant they're selecting.

Usage

ImageVariantThumbnail

Feature List

Displays variant image at thumbnail size
Selectable state with clear visual indicator
Consistent sizing and aspect ratio
Suitable for buybox, product cards, and filter UIs

API Reference

Prop	Default	Type
`id`required		`string`
`label`required		`string`
`media`required		`Media`
`isSelected`required		`boolean`
`notAvailable`		`{ isNotAvailable, notAvailableTooltip }`

Event	Type
`select`	`(event: "select"): void`

Edit this pageorReport an issue

Image Contrast Overlay

A utility component that enhances text readability over images through customizable gradient or solid color overlays with adjustable opacity.

Loading Spinner

An animated spinner indicating loading or processing state.