Callout card

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.

Drag to resize example
  title="Customize the style of your checkout"
  primaryAction={{content: 'Customize checkout', url: ''}}
  <p>Upload your store’s logo, change colors and fonts, and more.</p>
The content to display inside the callout card.
The title of the card
URL to the card illustration
Primary action for the card
Secondary action for the card


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


Merchants may not know about Shopify features designed to help them run their business.


Callout cards introduce features and give merchants a way to take action.

Best practices

Callout cards should:

  • Clearly articulate the benefit of the feature and what it does
  • Provide merchants with a clear call to action
  • Be targeted to merchants who will most benefit from the feature
  • Be dismissable so merchants can get rid of cards about features they’re not interested in
  • Use an illustration that helps to communicate the subject or merchant benefit

Content guidelines


Headings should be:

  • Descriptive: help merchants understand what they’ll find in the callout card
  • Concise and scannable:
    • Use simple, clear language that can be read at a glance
    • Keep headings to a single sentence and avoid using punctuation such as periods, commas, or semicolons
    • Sentence case (first word capitalized, the rest lowercase)
  • Messenger

  • Chat with customers on Messenger

  • Get help from a Shopify Expert

  • Get Help From a Shopify Expert!

Body content

Body content should be:

  • Actionable: start sentences with imperative verbs when telling a merchant what actions are available to them (especially something new). Don’t use permissive language like “you can”.
  • Get performance data for all your sales channels.

  • Now you can get performance data for all your sales channels.

  • Structured for merchant success: always put the most critical information first
  • Clear: use the verb “need” to help merchants understand when they’re required to do something
  • 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.

Call to action

Buttons should be:

Clear and predictable: merchants should be able to anticipate what will happen when they click a button. Never deceive a merchant by mislabeling a button.

  • Buy shipping label

  • Buy

  • Action-led: buttons should always lead with a strong verb that encourages action. To provide enough context to merchants use the {verb}+{noun} format on buttons except in the case of common actions like Save, Close, Cancel, or OK.
  • View shipping settings

  • View your settings

  • Scannable: avoid unnecessary words and articles such as the, an, or a.
  • Add menu item

  • Add a menu item