Help content

    ​ Help content is educational text that describes interactive elements or offers information about concepts in the UI.

    The goal of help content is to teach merchants:

    • How to complete a task or make a good decision for their business
    • Important information related to the current workflow
    • How to optimize the way they use Shopify

    When to use less, when to use more

    ​ The choice of whether or not to use help content depends on the kind of experience you’re designing.

    Productivity areas

    ​ Productivity areas include tasks that merchants do regularly, like adding products and fulfilling orders. These pages are used often and become familiar quickly.

    When designing productivity experiences, prioritize experienced merchants. This is their space to get work done and we can keep out of their way by offering a clean, streamlined UI. This means minimal help content. ​

    Educational areas

    ​ Educational areas include tasks that merchants do infrequently, like adjusting tax or payments settings. Most of these settings aren’t changed very often, so merchants doing these tasks are often seeing them for the first time.

    When designing for educational experiences, prioritize merchants who are unfamiliar with the task or workflow. Offer context and guidance to help them make the right decisions for their business. This means making use of help content.


    Place help where it’s needed

    ​ Help content belongs as close as possible to the part of the UI it references. If it’s teaching merchants about the purpose of a card, put it at the top of the card as a description. If it’s teaching merchants about a particular field, put it beneath the field as help text.

    The following is an example of help content that was originally a card description, but felt easier to parse after moving closer to the upload actions it helps with.

    Before

    Before: help text as a card description

    After

    After: help text close to the upload action


    Avoid a marketing tone

    ​ Using help content to promote new features can erode trust with merchants. Not every feature is the best choice for every merchant at every point in time, and we shouldn’t assume that they want or need it.

    There are times when our motivations and our merchants’ are highly aligned, and encouraging a certain action through help content might be appropriate. An example of this is discounted annual billing. It’s good for Shopify because of the long-term merchant commitment and up-front payment. It’s good for merchants who are long-term committed to Shopify and can pay up front.

    This example also illustrates that there’s still only a subset of merchants that are at the right place to adopt it. Keep this in mind when suggesting how a feature might help someone’s business.


    ​ “Learn more” links take merchants to the Shopify Help Center for more detailed information than we can offer in the UI.

    Make sure “learn more” links go to a Help Center page or heading that’s specific to the topic.

    The Help Center is a rich resource, but for a merchant it’s not always a convenient time to read documentation. Landing on a dense page of information without knowing where to start is frustrating and disorienting. If there isn’t a page or heading specific to the topic you’re providing help for, work with the documentation team to create the right content.

    “Learn more” badges for settings

    ​ “Learn more” badges show an information icon that takes you to the Help Center. These are different from tooltips. On large screens, they expand on hover to reveal a “Learn more” link.

    “Learn more” badge interaction pattern

    Use “learn more” badges: ​

    • Only in settings experiences, and only in card headers
    • When the linked Help Center topic is relevant to the entire card

    Best practices:

    • Use regular “learn more” links for help topics specific to only a part of a card
    • Some cards benefit from a “learn more” badge in the heading in combination with “learn more” links or other help content in the card body