Migrate CalloutCard from Polaris React

Use the callout card pattern for a focused recommendation with a clear action. If the content is ordinary page information, use a section instead of preserving the promotional treatment.

Anchor to Choose the destinationChoose the destination

Anchor to Map the callout cardMap the callout card

Anchor to Migrate the call siteMigrate the call site

1. Trace the complete feature around CalloutCard, 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 CalloutCard 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 CalloutCard 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 CalloutCardMigrationExample() {
  return (
    <><s-section heading="Grow your business"><s-paragraph>Advertise on social media.</s-paragraph><s-button>Get started</s-button></s-section></>
  );
}

import {CalloutCard} from '@shopify/polaris';


export function CalloutCardMigrationExample() {

  return (
    <CalloutCard
      title="Grow your business"
      illustration=""
      primaryAction={{content: 'Get started', onAction: () => {}}}
    >
      <p>Advertise on social media.</p>
    </CalloutCard>
  );
}