Migrate FooterHelp from Polaris React

Use the footer help pattern for secondary assistance at the end of a page. Put instructions required to complete the task next to the relevant control instead.

Anchor to Choose the destinationChoose the destination

Anchor to Map footer help contentMap footer help content

Anchor to Migrate the call siteMigrate the call site

1. Trace the complete feature around FooterHelp, including any data, state, actions, loading, empty, and error paths it has.

2. Implement the linked Polaris web components pattern as one coherent feature.

3. Reconnect app-owned state and backend operations, then migrate the old feature as a single slice.

4. After verification, remove the FooterHelp import and any Polaris-only state, wrappers, or helpers that no longer have a caller.

Anchor to Preserve these behaviorsPreserve these behaviors

• The data and state that determine what the feature displays.
• User actions, confirmation, and recovery behavior that apply to the feature.
• Relevant loading, empty, error, and responsive states.

Anchor to Test and remove Polaris ReactTest and remove Polaris React

Test the complete migrated FooterHelp feature with realistic data. Exercise each state transition and action result, including the loading, empty, error, and responsive paths that apply.

Don't remove @shopify/polaris while another component still imports it. Once all call sites are migrated, remove the package and its provider-level setup, then run the app's full test suite.

Anchor to Migration exampleMigration example

export function FooterHelpMigrationExample() {
  return (
    <s-stack alignItems="center">
      <s-text>
        Learn more about <s-link href="">creating puzzles</s-link>.
      </s-text>
    </s-stack>
  );
}

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


export function FooterHelpMigrationExample() {

  return (
    <FooterHelp>
      Learn more about <Link url="">creating puzzles</Link>.
    </FooterHelp>
  );
}