Actionable language

Headings and subheadings

Headings and subheadings are titles and subtitles that refer to sections of the interface.

Basic structure

Headings and subheadings should be:

Informative and descriptive:

• Highlight the most important concept or piece of information for merchants
• Help merchants understand what they’ll find in the section below

Concise and scannable:

• Use simple, clear language
• Keep headings to a single sentence
• Avoid using punctuation such as periods, commas, or semicolons
• Write in sentence case (capitalize the first word and proper nouns only)

Do

• Online store dashboard
• Custom reports
• Sell your products in person

Don't

• This is your online store dashboard
• Custom Reports
• Sell your products in person!

Articles

Whether or not to use articles (“the,” “a,” “an”) in headings and subheadings depends on the type of message.

Conversational headings

For more conversational areas of the product, like Home cards, sell pages, and empty states, use articles. It makes the language more approachable and helps people to understand new, complex concepts.

Do

• Secure your account with two-step authentication

Don't

• Two-step authentication

Microcopy headings

For labels, titles, and microcopy, avoid articles to keep content short and actionable. This increases readability and encourages immediate action.

Do

• Create collection

Don't

• Create a collection

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 need to be clear and predictable. Merchants should be able to anticipate what will happen when they select a button. Never mislead someone by mislabeling a button.

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

Do

• Activate Apple Pay
• Explore free themes
• View shipping settings

Don't

• Try Apple Pay
• Free themes
• Settings

Always write button text in sentence case, which means the first word is capitalized and the rest are lowercase (unless a term is a proper noun).

Do

• Buy new domain

Don't

• Buy New Domain

Avoid unnecessary words and articles such as “the,” “an,” or “a.”

Do

Add menu item

Don't

Add a menu item

Links

Links need to be clear and predictable. Merchants should be able to anticipate what will happen when they select a link. Never mislead someone by mislabeling a link.

Do

• Get started with the Ultimate Guide to Dropshipping.

Don't

• Want to learn more about dropshipping? Click here.

Links should never use “click here” or “here” as link text.

Links in a sentence

Links in full sentences shouldn’t link the entire sentence, only the text that describes where merchants go when they select the link.

It’s better for internationalization to have only single terms or small parts of phrases linked. Linking a full phrase is problematic because the word order might change, which would break the link into two parts.

Do

• Avoid chargeback costs with Shopify Protect.
• Manage the channels you use to sell products and services.

Don't

• Learn more about Shopify Protect.
• Manage the channels you use to sell products and services.

Links outside of a sentence

Links that aren’t in full sentences should use the {verb + noun} pattern and not be punctuated, with the exception of question marks.

Do

• Learn more
• Forgot password?

Don't

• Learn more.
• Forgot password

“Learn more” links

When linking out to documentation from help text in the admin, link the relevant key words. In general, don’t add another sentence starting with “Learn more...”, because it’s repetitive and takes up unnecessary space.

Do

• This is a read-only environment variable. It can’t be edited or deleted.

Don't

• This is a read-only environment variable. It can’t be edited or deleted. Learn more about read-only environment variables.

Only add a “Learn more...” sentence if the help text addresses more than one concept, each of which could be linked to their own help doc. In that situation, pick the most appropriate link and contextualize it with “Learn more...”.

Do

• Storefront API tokens are unique per Hydrogen storefront but their permission scopes are shared by all Hydrogen storefronts. Learn more about Storefront API tokens.

Don't

• Storefront API tokens are unique per Hydrogen storefront but their permission scopes are shared across all Hydrogen storefronts.

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)

Do

• Discard unsaved changes?
• Delete 2 collections?
• Delete Dark Blue Tee?
• Leave page with unsaved changes?

Don't

• 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?”

Do

• This can’t be undone.
• This will delete all edits since you last saved.
• Leaving this page will delete all unsaved changes.

Don't

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

Do

• Delete

Don't

• Remove
• Erase
• Discard

Secondary action:

Do

• Cancel

Don't

• Discard

Discarding changes while on a page

Primary action:

Do

• Discard

Don't

• Cancel

Secondary action:

Do

• Keep editing

Don't

• Go back
• Cancel

Leaving a page with unsaved changes

Primary action:

Do

• Leave page

Don't

• Exit
• Delete changes

Secondary action:

Do

• Stay

Don't

• Go back
• Cancel
• Discard
• Keep editing

Directional language

In the same way that links should never say “click here,” avoid using directional language such as “above/below” or “right/left.”

Directional language is confusing and unhelpful when spoken aloud by a screen reader. It creates challenges for internationalization (for example, right to left languages) and can conflict with mobile design patterns.

Directional language often indicates a lack of visual or content hierarchy. Whenever possible, keep instructional copy and related actions close together so that directional language isn’t needed.

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” as the default for any action that saves immediately to a database.

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

Do

Use the verb “Save” in the context bar

Don't

• Done
• Apply
• Save discount

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

Do

• Unsaved discount
• Unsaved product
• Unsaved customer
• Unsaved shipping zone

Don't

• Unsaved changes

Saving in modals and sheets

Use the verb “Save” in modals and sheets when saving directly to the database.

Do

Use the verb “Save” in modals and sheets

Don't

• Edit
• Done
• Apply

Saving at the bottom of a page

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.

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

DoDon't

• Create discount
• Save
• Done
• Apply

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

DoDon't

• Add
• Edit
• Manage
• Select
• Apply
• Save

Datepickers

Use the adjective “Done” for datepickers.

DoDon't

• Apply
• Select
• Save

Close vs. accept

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

Don't use "OK". "OK" is an exclamation, not an action. When merchants click the "Close" button, they’re not saying “OK”, they’re doing a specific action.

DoDon't

• OK
• Ok
• O.k.
• Okay
• Done
• Accept
• Continue

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

Do

Accept

Don't

• Ok
• Done
• Close
• Continue

Close vs. cancel

Use the back arrow button 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)

DoDon't

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

Do

Use the verb “Cancel” as the action for merchants to back out of changes

Don't

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

Do

• Select your country of residence
• Select image
• Select countries

Don't

• 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

Do

• Choose a theme
• Choose a pricing plan.

Don't

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

Do

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

Don't

• Use “Edit” if multiple actions can be taken after. “Manage” is more suitable.
• 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.

Do

• In this example, “Manage” is the correct call to action because it opens a modal where merchants can select channels to display their products Here are the options that become available after the “Manage” button is selected
• Manage multiple blog posts and comments

Don't

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

Do

• Change image Here are the options that become available after the “Change” button is selected

Don't

• Use the verb “change” if a selection must be made between only two options

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.

Do

Don't

• Switch images

Create vs. add

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

Do

• Create order
• Create collection
• Create discount

Don't

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

Do

• Add product
• Add customer

Don't

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

Do

• View invoices
• View all {x}
• View details
• View report
• Try clearing your filters to view all results.

Don't

• See invoices
• See all {x}
• See details
• See report

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

Do

• Add your first product and see how it looks on your store.
• Customers will see this name at checkout.

Don't

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

Do

To buy a shipping label, you need to enter the total weight of your shipment, including packaging.

Don't

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.

Do

• Export CSV file

Don't

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

Do

• Download shipping label
• Download PDF

Don't

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

Do

• Import CSV file

Don't

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

Do

• Upload image
• Upload file

Don't

• Upload CSV file