Migrate MediaCard from Polaris React

Use the media card pattern when media, supporting content, and an action form one composition. Use a normal section and image when the media is simply page content.

Anchor to Choose the destinationChoose the destination

Anchor to Map media card contentMap media card content

Anchor to Migrate the call siteMigrate the call site

1. Trace the complete feature around MediaCard, 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 MediaCard 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 MediaCard 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 MediaCardMigrationExample() {
  return (
    <s-section padding="none">
      <s-grid gridTemplateColumns="2fr 3fr" gap="none" alignItems="center">
        <s-image
          alt="Colorful summer clothing"
          src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400'%3E%3Crect width='600' height='400' fill='%23f6d7c3'/%3E%3Ccircle cx='470' cy='85' r='48' fill='%23f7b84b'/%3E%3Cpath d='M0 310 145 170l105 105 82-86 268 211H0Z' fill='%236aa57a'/%3E%3Cpath d='M0 350 180 225l92 82 76-61 252 154H0Z' fill='%233f7652'/%3E%3C/svg%3E"
          aspectRatio="3/2"
          objectFit="cover"
        ></s-image>
        <s-box padding="base">
          <s-stack gap="base">
            <s-heading>Summer collection</s-heading>
            <s-paragraph>Explore seasonal products.</s-paragraph>
            <s-button>View collection</s-button>
          </s-stack>
        </s-box>
      </s-grid>
    </s-section>
  );
}

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


export function MediaCardMigrationExample() {

  return (
    <MediaCard
      title="Summer collection"
      primaryAction={{content: 'View collection'}}
      description="Explore seasonal products."
    >
      <img
        alt="Colorful summer clothing"
        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400'%3E%3Crect width='600' height='400' fill='%23f6d7c3'/%3E%3Ccircle cx='470' cy='85' r='48' fill='%23f7b84b'/%3E%3Cpath d='M0 310 145 170l105 105 82-86 268 211H0Z' fill='%236aa57a'/%3E%3Cpath d='M0 350 180 225l92 82 76-61 252 154H0Z' fill='%233f7652'/%3E%3C/svg%3E"
        style={{width: '100%', height: '100%', objectFit: 'cover'}}
      />
    </MediaCard>
  );
}