Element with Absolute position over Map in Checkout UI Extension

Technical Q&A
1

Hi Guys. In previous versions of UI components there was a View that had absolute position so we could position overlay over Map component (see screenshot). This seems impossible with current component version since View is gone.

Does anyone know of alternative to achieve the same design in new UI Components version.

Legacy View component: View

image
image1448Ă—1818 182 KB

2 Likes
4

Hi Guys. I don’t think any of these work in Checkout UI Extensions. div element is not allowed and Block or Inline stack does not have position property :frowning:

5

Hi @Darwex

I did not test this yet but from docs:

Checkout UI extensions declare their interface using Polaris web components.

There you can see different components like s-stack, s-layout, s-grid that you may combine

Also, do use Ai assistant there, it might help but it also hallucinates a lot so double-check. Here what is said after a few tries, example but not sure it will help you

2. Valid example: s-section + s-stack + s-box in Checkout
This example is validated against the polaris-checkout-extensions API for the purchase.checkout.block.render target. It shows:

A small search card built with s-stack / s-box
A “map area” right below (here just a placeholder text box; you’d replace with your map representation if allowed).

jsx

function Extension() {
  return (
    <s-section>
      <s-stack direction="block" gap="base">
        {/* This replaces your old absolute-positioned View search box */}
        <s-box
          padding="base"
          background="subdued"
          border="base"
          borderRadius="base"
        >
          <s-stack direction="block" gap="small-100">
            <s-text type="strong">Find a pickup location</s-text>

            <s-text-field
              label="Search locations"
              placeholder="Search by city or store"
            />
          </s-stack>
        </s-box>

        {/* Map-like area under the search card */}
        <s-box border="base" borderRadius="base">
          <s-text color="subdued">Map preview goes here</s-text>
        </s-box>
      </s-stack>
    </s-section>
  );
}
What this gives you:

No div at all: only <s-section>, <s-stack>, <s-box>, <s-text>, <s-text-field>.
Vertical stacking via <s-stack direction="block">.
A “card” using <s-box> with background, padding, border radius.
A “map area” represented by another <s-box> below it.
You can adjust:

gap="base" → gap="small-100" | small-300 | large-100 | ... as per the scale values.
background="subdued" / borderRadius="base" / padding="base" to tune the card’s look