Footer help

Footer help component examples

import {FooterHelp, Link} from '@shopify/polaris';
import React from 'react';

function FooterHelpExample() {
  return (
    <FooterHelp>
      Learn more about{' '}
      <Link url="https://help.shopify.com/manual/orders/fulfill-orders">
        fulfilling orders
      </Link>
    </FooterHelp>
  );
}

Best practices

Footer help should:

• Be positioned at the bottom of the interface
• Provide links to help that’s related to the experience on the screen
• Not be used to promote features or provide explanations for how something works
• Never link to information designed to upsell to merchants
• In rare cases, link to blog posts when there isn’t any help documentation to help merchants with the most logical next step in the workflow

It’s recommended to link your footer help component to help documentation. Linking directly to your contact information might result in receiving a higher number of emails or calls.

Content guidelines

Footer help

By default, footer help should link to information in the Shopify Help Center and should follow this content pattern:

• Learn more about {X}

Links should be:

Clearly labeled: Merchants shouldn’t need to guess where they’ll end up if they click on an action link. Never use “click here” as a link because it doesn’t set expectations about what’s next.

Links should not be:

Marked as external: Do not set the external prop on the Link component to force open a new tab.

Related components and documentation

• To learn how to embed a link in a piece of text, use the link component
• To learn how to provide support for an app, use the guide on supporting your app