Avatars are used to show a thumbnail representation of an individual or business in the interface.
Use to present an avatar for a merchant, customer, or business.
<Avatar customer name="Farrah" />
Put the merchant first by identifying the problem they face and the component that helps them solve it.
A merchant may manage multiple businesses on Shopify or may have more than one person working in a store.
Avatars visually clarify the business or the person being represented at various locations in the interface.
Avatars should be one of 3 sizes:
- Small (32 x 32 px): use when the medium size is too big for the layout, or when the avatar has less importance
- Medium (40 x 40 px): use as the default size
- Large (60 x 60 px): use when an avatar is a focal point (e.g. on a single customer card)
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 avatars, we recommend using a format that describes what will show in the image:
alt="Person’s name"if the avatar represents a person
alt="Business’s name"if the avatar represents a business
alt=""if the name of the person/business appears next to the avatar as text