Examples
Use to let merchants know about a feature or opportunity where there is a clear, single action they need to take to move to the next step.
Callout cards are used to encourage merchants to take an action related to a new feature or opportunity. They are most commonly displayed in the sales channels section of Shopify.
Use to let merchants know about a feature or opportunity where there is a clear, single action they need to take to move to the next step.
The required title
prop gives the callout card a level 2 heading (<h2>
). This helps with readability and provides structure to screen reader users.
Illustrations included in callout cards are implemented as decorative images with empty alt
attributes (alt=""
) so that they’re skipped by screen readers.
Use actionable language to ensure that the purpose of the callout card is clear to all merchants, including those with issues related to reading and language.
Callout cards should:
Callout card titles should follow the content guidelines for headings and subheadings.
Body content should be:
Get performance data for all your sales channels.
Now you can get performance data for all your sales channels.
To buy a shipping label, you need to enter the total weight of your shipment, including packaging.
To buy a shipping label, you must enter the total weight of your shipment, including packaging.
Buttons should be:
Clear and predictable: merchants should be able to anticipate what will happen when they click a button. Never deceive merchants by mislabeling a button.
Buy shipping label
Buy
View shipping settings
View your settings
Add menu item
Add a menu item