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.
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
- 出售你的产品的人!
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 theUltimate 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 forinternationalizationto 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.
Don’t
- Learn more about Fraud Protect.
- Manage the channelsyou 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.
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?
- 删除2 collections?
- 删除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, usingplain 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
- 删除
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
- 删除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” fordeferred 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]:
Do
Don’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.
Do
Don’t
- Add
- Edit
- Manage
- Select
- Apply
- Save
Datepickers
Use the adjective “Done” for datepickers.
Do
Don’t
- 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.
Do
Don’t
- Ok
- O.k.
- Okay
- Done
- Accept
- Continue
Use the adjective “Accept” when terms of service require legal confirmation before merchants can continue.
Do
Accept
Don’t
- Ok
- Done
- 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 (seeOK vs. accept)
Do
Don’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
使用动词“编辑”当你可以改变输入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 informationHere 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 productsHere 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 imageHere 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
在更一般的使用动词“看”,有限公司nversational 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
使用“下载”当商人的行动呼吁s 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