Thumbnail

Use thumbnails as a visual anchor and identifier for an object. They should be used along with text to provide context.


Examples

Use as the default size (medium).

Drag to resize example
<Thumbnail source="https://burst.shopifycdn.com/photos/black-leather-choker-necklace_373x@2x.jpg" alt="Black choker necklace" />
Name
Type
Description
size
enum
Size of thumbnail
source*
string
URL for the avatar image
alt*
string
Alt text for the thumbnail image

Purpose

Put the merchant first by identifying the problem they face and the component that helps them solve it.

Problem

Merchants are scanning the page, orienting themselves or searching visually for a particular item.

Solution

Thumbnails provide a visual anchor and help structure the page. Because they are a visual representation, thumbnails make individual items identifiable at a glance.


Best practices

Thumbnails should:

  • Be one of 3 sizes:
    • Small (40 × 40 px): Use when the medium size is too large for the layout, or when the thumbnail has less importance
    • Medium (60 × 60 px): Use as the default size
    • Large (80 × 80 px): Use when an thumbnail is a major focal point. Avoid this size in lists of like items.

Content guidelines

Any time you use an image to communicate a concept on Shopify, it’s important to use descriptive alt text. Doing this is important for accessibility because it allows screen readers to describe what’s in the image to people who may not be able to see it.

For thumbnails, we recommend using a format that describes what will show in the image:

  • alt="Photo of {product}", e.g. "Photo of black t-shirt with cartoon tiger"
  • An empty alt="" attribute ignores the image in assistive technologies such as screen readers, and may be used on decorative thumbnails