Actionable language

Merchants use Shopify to get things done. Content should be written and structured to help them understand and take the most important actions.


Sentences

Start sentences with imperative verbs when telling merchants what actions they can take (especially when introducing something new).

When a merchant reads a sentence that starts with an imperative verb it should sound like they’re being instructed what to do. Don’t use permissive language like “you can”.

Do

Add your first product and see how it looks in your store.

Don’t

  • Products appear in your store after you add them.

  • Add your first product so you can see how it looks in your store.


Buttons

Buttons should always lead with a strong verb that encourages action. To provide enough context to merchants use the {verb} + {noun} content formula on buttons except in the case of common actions like “Done”, “Close”, “Cancel”, or “OK”. Always write button text in sentence case, which means the first word is capitalized and the rest is lowercase (unless a term is a proper noun).

Learn more about buttons.

  • Buy new domain

  • Explore free themes

  • Upload theme

  • Buy New Domain

  • Free themes

  • Upload a theme



Confirmations

Confirmations are presented for actions that can’t be undone or are difficult to undo.

Confirmation messages should:

  • Always give merchants the option to either confirm or cancel their action
  • Be used for a single, primary task
  • Keep body content to one line of text and not use more than two calls to action

Confirmation titles should:

  • Ask if merchants want to continue, using a concise {verb}+{noun} question
  • Be one sentence and avoid using punctuation, with the exception of question marks
  • Avoid articles (the, a, an) to keep content short and actionable
  • Be written in sentence case (the first word is capitalized, and the rest is lowercase)
  • Discard unsaved changes?

  • Delete 2 collections?

  • Delete Dark Blue Tee?

  • Leave page with unsaved changes?

  • Discard?

  • Are you sure you want to delete?

  • Are you sure you want to delete Dark Blue Tee?

  • This page has unsaved changes are you sure you want to leave?

Confirmation body content should:

  • Clearly explain if the action is irreversible or difficult to undo, using plain language.
  • Be concise: use only one line of text. Don’t start the sentence with, “Are you sure?”.
  • This can’t be undone.

  • This will delete all edits since you last saved.

  • Leaving this page will delete all unsaved changes.

  • Are you sure you want to delete the variant Dark Blue Tee/Small/Silk? This action cannot be reversed.

  • If you discard changes, you’ll delete any edits you made since you last saved.

  • If you leave this page, all unsaved changes will be lost. Are you sure you want to leave this page?

Confirmation primary and secondary actions should:

  • Be clear and predictable: merchants should be able to anticipate what will happen when they click a button
  • Scannable: avoid unnecessary words and articles such as the, an, or a

Since confirmation messages are placed in modals, the call to action in the title is in close context to the buttons. Because of this, the call to action text on the buttons doesn’t have to follow the {verb}+{noun} pattern. Instead, one word calls to action can be used, for example, [Cancel] [Delete].

Deletions

Before merchants can delete objects like collections, transfers, products, and variants, we present them with a confirmation message that has two calls to action, one to [Cancel] and one to [Delete]. We keep it short and don’t use {verb}+{noun} button copy.

Primary action:

  • Delete

  • Remove

  • Erase

  • Discard

Secondary action:

  • Cancel

  • Discard

Discarding changes while on a page

Primary action:

  • Discard

  • Cancel

Secondary action:

  • Keep editing

  • Go back

  • Cancel

Leaving a page with unsaved changes

Primary action:

  • Leave page

  • Exit

  • Delete changes

Secondary action:

  • Stay

  • Go back

  • Cancel

  • Discard

  • Keep editing


Save vs. done

Use “Save” when a change is saved immediately to a database and “Done” for deferred saves.

Saving immediately to a database

Use “Save” for web and iOS as the default for any action that saves immediately to a database. For Android, use a check mark.

Saving using the context bar component

When merchants make changes on a page they’re sometimes presented with a context bar at the top. This context bar displays a status message on the left to indicate the state of the changes, like “Unsaved discount”. Since the status message provides context around the action being taken, the button doesn’t need to follow the common {verb} + {noun} content formula. For example, [Save] instead of [Save product]. In the context bar component, use the verb “Save” for web and iOS, and a check mark in Android.

  • For web, use the verb “Save” in the context bar

    web context bar

  • Done

  • Apply

  • Save discount

Status messages in the context bar should be descriptive and follow the {adjective} + {noun} content formula.

  • Unsaved discount

  • Unsaved product

  • Unsaved customer

  • Unsaved shipping zone

  • Unsaved changes

  • For Android, use a check mark to indicate “Save” in the context bar.

    Note: When merchants press and hold on the “X” in Android, a tooltip appears with “Cancel”. For the check mark, the tooltip displays “Save”.

    android context bar

  • Done

  • Apply

  • Save discount

  • For iOS, use the verb “Save” in the context bar

    iOS context bar

  • Done

  • Apply

  • Save discount

Saving in modals and sheets

For web and iOS, use the verb “Save” in modals and sheets when saving directly to the database. For Android, use a check mark to indicate “Save”.

  • For web, use the verb “Save” in modals and sheets

    web save modal in edit state

  • Edit

  • Done

  • Apply

  • For Android, use a check mark to indicate “Save” in modals and sheets.

    Note: When merchants press and holds on the “X” in Android, a tooltip appears with “Cancel”. For the check mark, the tooltip displays “Save”.

    Android save modal in edit state

  • Edit

  • Done

  • Apply

  • For iOS, use the verb “Save” in modals and sheets

    iOS save modal in edit state

  • Edit

  • Done

  • Apply

Saving at the bottom of a page in web

Use the {Save} + {noun} content formula when a save action doesn’t have the surrounding context of a modal or context bar. This applies to the save action at the bottom of pages in web.

For example, the action at the bottom of the Create discount page in web uses [Save discount]:

  • web save page action

  • Create discount

  • Save

  • Done

  • Apply

  • Android and iOS have one save action at the top of the screen in the nav bar. These platforms don’t use a save bar at the bottom of a page like in web.

Android save modal in edit state

iOS save modal in edit state

Deferred saves

Sometimes, when merchants confirm a set of changes inside a modal or sheet, these changes are applied as unsaved changes to the current page. In other words, the changes made weren’t immediately saved to the database. When this happens, don’t use the verb “Save” as the call to action because it would be misleading.

Use the adjective “Done” in web, Android, and iOS for deferred saves. When the modal or sheet closes, then merchants can save all of the changes they made.

Most deferred saves happen when confirming changes in Add, Edit, Manage, and Select modals and sheets.

  • deferred save modal with done button

  • Add

  • Edit

  • Manage

  • Select

  • Apply

  • Save

Datepickers

Use the adjective “Done” in web, Android, and iOS for datepickers.

  • Web

    datepicker with done button

  • Apply

  • Select

  • Save


OK vs. accept

Use the adjective “OK” when merchants need to confirm they’ve read something, but aren’t required to legally accept terms of service before continuing. For example, use “OK” when presenting a security notification in a modal or sheet.

  • modal with okay button spelled with capitalized letter O and K, no punctuation

  • Ok

  • O.k.

  • Okay

  • Done

  • Accept

  • Continue

Use the adjective “Accept” when terms of service require legal confirmation before merchants can continue.

  • Accept

  • Ok

  • Done

  • Continue


Close vs. cancel

Use “Close” in web and iOS, and an “X” in Android, as the call to action for modals and screens when:

  • the content is in a view-only state

Don’t use “Close” as the call to action when there’s the option for merchants to:

  • make any changes to the modal or screen
  • confirm they’ve read something or accept terms of service (see OK vs. accept)
  • web modal with close button

  • Cancel

  • Exit

  • OK

  • Android modal with x button

  • Close

  • Cancel

  • Exit

  • OK

  • iOS modal with close button

  • Cancel

  • Exit

  • OK

Use “Cancel” as the option for merchants to back out of any changes made on a page, modal, or sheet. When the cancel button is pressed, changes automatically get discarded. “Cancel” is often paired with “Save” and “Done” actions (and is always placed to the left).

  • For web, use the verb “Cancel” as the action for merchants to back out of changes

    web save modal in edit state

  • Exit

  • Close

  • Done

  • For Android, use an “X” as the action for merchants to back out of changes

    Note: When merchants presses and holds on the “X” in Android, a tooltip appears with “Cancel”. For the check mark, the tooltip displays “Save”.

    Android save modal in edit state

  • Cancel

  • Exit

  • Close

  • Done

  • For iOS, use the verb “Cancel” as the action for merchants to back out of changes

    iOS save modal in edit state

  • Exit

  • Close

  • Done


Select vs. choose

Use the verb “select”:

  • When telling merchants to pick something from a limited number of options of the same kind
  • When merchants need to make an easy or obvious decision that doesn’t require deep reflection or analysis
  • For defined lists and dropdown menus
  • When merchants are given the option to pick from a list of already existing objects, like products

Pair Select modals and screens with the “Done” call to action.

  • Select your country of residence

  • Select image

  • modal with list of selectable countries and a done button as the call to action

  • Select a pricing plan.

  • Choose countries

Use the verb “choose” when:

  • Encouraging merchants to make a decision that is more subjective, strategic, emotional, or open-ended
  • Merchants have to pick from a large inventory of items, like themes, or options that require strategic decision making, like pricing plans
  • Choose a theme

  • Choose a pricing plan.

  • Select a theme

  • Select a pricing plan

  • Choose a province.

  • Pick a province.

  • Pick a pricing plan.


Edit vs. manage

Use the verb “edit” when you can change the input of a field (letters, numbers, properties). Place as link text next to the field or area that is being edited. There’s no need for a noun unless it’s unclear what’s being edited.

  • In this example, “Edit” is the correct call to action because it opens a modal where merchants update customer contact information modal where merchants can edit contact information Here are the editing actions that become available after the “Edit” button is selected modal where merchants can edit customer information

  • Edit an individual blog post

  • In this screen, the call to action should be “Manage” because it opens up a section where multiple actions can be taken payment providers page under Settings where merchants can view payments and manage other settings. Here the button has the incorrect verb, “edit” Here are the options that become available after the “Edit” button is selected options to edit payout schedule, and select options like using test mode, email payout notifications, or decline potentially fraudulent orders

  • In this screen, the call to action should be “Manage” because it opens up a section where multiple actions can be taken edit call to action within the domestic shipping zone section Here are the options that become available after the “Edit” button is selected domestic shipping zone page with options to edit zone name, and add countries and rates

  • Modify

Use the verb “manage” at a higher level to convey that multiple actions can be done, or sections and settings can be updated. Pair this verb with a noun if it’s in a button or if it’s unclear what is being managed.

  • In this example, “Manage” is the correct call to action because it opens a modal where merchants can select channels to display their products manage button on the product page in the product availability section Here are the options that become available after the “Manage” button is selected modal where merchants can select sales channels

  • Manage multiple blog posts and comments manage blogs button and manage comments button at the top of the blog posts page

  • Edit

  • Modify


Change vs. switch

Use the verb “change” when merchants can replace an option, but not edit it. For example, they can change an image or theme, but the action doesn’t include editing its properties. Place as link text next to the field or area that is being changed. There’s no need for a noun unless it’s unclear what is being changed.

  • Change image change button at the bottom of the image display on the slideshow page of the theme editor Here are the options that become available after the “Change” button is selected images library with an upload drop zone

  • In this screen, the call to action should be “Switch provider” because a selection must be made between two options change provider page where merchants can select between two payment providers

Use the verb “switch” when it’s important for merchants to know what they’re switching between, like users, accounts, locations, or modes. When the switch happens, the previous option is turned off, logged out, or deactivated. Always pair with a noun to prevent confusion.

  • Title that says, switch from your third party provider to shopify payments, with a card below that says, payment processing rate of 2.4% plus 0.25 euros”

  • Modal that says, switch locations to ‘new space’? You will only be able to sell inventory set to this location. Tax rates may also change. At the bottom there are two buttons. One says, cancel and one says, switch.

  • Switch images


Create vs. add

Use the verb “create” when you’re encouraging merchants to generate something from scratch, like a collection.

  • Create order

  • Create collection

  • Create discount

  • Add order

  • Add collection

  • Add discount

Use the verb “add” when you’re encouraging merchants to bring something that already exists into Shopify, like a product.

  • Add product

  • Add customer

  • Create product

  • Create customer


View vs. see

Use the verb “view” when you’re encouraging merchants to go to a specific page or section for more details, or to reveal more information. Use “view” in buttons, calls to action, and link text.

  • View invoices

  • View all {x}

  • View details

  • View report

  • Try clearing your filters to view all results.

  • See invoices

  • See all {x}

  • See details

  • See report

Use the verb “see” in more general, conversational descriptions without a specific call to action.

  • Add your first product and see how it looks on your store.

  • Customers will see this name at checkout.

  • Add your first product and view how it looks on your store.

  • Customers will view this name at checkout.


Need vs. must

Use the verb “need” when you’re telling merchants something they’re required to do or should do.

  • 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.


Export vs. download

Use “export” as the call to action when merchants needs to transfer data from Shopify and convert it into a different format.

  • Export CSV file

  • Download CSV file

Use “download” as the call to action when merchants need to copy data (of the same format) from Shopify to a computer system.

  • Download shipping label

  • Download PDF

  • Export shipping label

  • Export PDF


Import vs. upload

Use “import” as the call to action when merchants need to transfer data and convert it into a different format so it can be used in Shopify.

  • Import CSV file

  • Download CSV file

Use “upload” as the call to action when merchants need to copy data of the same format from a computer system into Shopify.

  • Upload image

  • Upload file

  • Upload CSV file