Examples
Use as the default size.
Use thumbnails as a visual anchor and identifier for an object. They should be used along with text to provide context.
Use as the default size.
Use when a thumbnail is a major focal point. Avoid this size in lists of like items.
Use to render an icon inside of thumbnail.
Use as the default size.
Use when a thumbnail is a major focal point. Avoid this size in lists of like items.
Use to render an icon inside of thumbnail.
On web, thumbnails should:
On Android and iOS, thumbnails should:
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}"
. For example, “Photo of black t-shirt with cartoon tiger”.alt=""
attribute ignores the image in assistive technologies such as screen readers, and may be used on decorative thumbnails.imageView.accessibilityLabel = "Photo of {product}"
. For example, “Photo of black t-shirt with cartoon tiger”.android:contentDescription="Photo of {product}"
. For example, “Photo of black t-shirt with cartoon tiger”.