Migrate MapPopover to the Polaris popover component

The previous MapPopover component has been replaced by the general-purpose <s-popover> component in API versions 2025-10 and newer. Use <s-popover> as a sibling of <s-map-marker> and activate it with the command and commandFor props on the marker.

Anchor to Updated propertiesUpdated properties

The following properties are different in the Polaris popover component.

Anchor to onOpenonOpen

The previous MapPopover onOpen prop is now called onShow. The handler now receives an Event instead of being called with no arguments.

Anchor to onCloseonClose

The previous MapPopover onClose prop is now called onHide. The handler now receives an Event instead of being called with no arguments.

Anchor to Updated patternsUpdated patterns

Anchor to ActivationActivation

The previous pattern of nesting MapPopover inside a MapMarker overlay prop has been replaced with command and commandFor on the <s-map-marker> targeting a sibling <s-popover> by ID.

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return (
    <s-map
      apiKey="YOUR_API_KEY"
      latitude={43.6532}
      longitude={-79.3832}
      accessibilityLabel="Store location"
    >
      <s-map-marker
        latitude={43.6532}
        longitude={-79.3832}
        accessibilityLabel="Flagship store"
        command="--toggle"
        commandFor="store-details"
      ></s-map-marker>
      <s-popover id="store-details">
        <s-text>620 King Street West, Toronto</s-text>
      </s-popover>
    </s-map>
  );
}

import {
  reactExtension,
  Map,
  MapMarker,
  MapPopover,
  Text,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <Map
      apiKey="YOUR_API_KEY"
      latitude={43.6532}
      longitude={-79.3832}
      accessibilityLabel="Store location"
    >
      <MapMarker
        latitude={43.6532}
        longitude={-79.3832}
        accessibilityLabel="Flagship store"
        overlay={
          <MapPopover>
            <Text>620 King Street West, Toronto</Text>
          </MapPopover>
        }
      />
    </Map>
  );
}