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)
Online store dashboard
Custom reports
Sell your products in person
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.
Secure your account with two-step authentication
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.
Create collection
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.
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.
Get started with the Ultimate Guide to Dropshipping.
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.
Learn more about Fraud Protect.
Manage the channels you use to sell products and services.
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.
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
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” 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
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”.
Done
Apply
Save discount
For iOS, use the verb “Save” in the 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
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”.
Edit
Done
Apply
For iOS, use the verb “Save” in modals and sheets
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]:
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.
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.
Add
Edit
Manage
Select
Apply
Save
Datepickers
Use the adjective “Done” in web, Android, and iOS for datepickers.
Web
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.
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 the back arrow button in web, “Close” in 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)
Cancel
Exit
OK
Close
Cancel
Exit
OK
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
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”.
Cancel
Exit
Close
Done
For iOS, use the verb “Cancel” as the action for merchants to back out of changes
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
Select countries
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
Here are the editing actions that become available after the “Edit” button is selected
Edit an individual blog post
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.
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
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
Here are the options that become available after the “Change” button is selected
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.
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