Choose a version:

Popover

Popovers are similar to tooltips. They are small overlays that open on demand after a user interaction. The difference is that the popover can contain more content, without cluttering the page. They must be specified inside the overlay prop of an activator component (Button, Link or Pressable).

The library takes care of applying the WAI-ARIA Popover Widget pattern automatically for the activator and the popover content.

Anchor to popoverpropsPopoverProps

Anchor to position position Default: 'blockStart': Position the Popover relative to the activator.
Anchor to alignment alignment Default: 'center': Align the Popover in the axis determined by the position.
Anchor to onOpen onOpen () => void: Callback to run when the Popover is opened
Anchor to onClose onClose () => void: Callback to run when the Popover is closed
Anchor to id id string: A unique identifier for the component.
Anchor to maxInlineSize maxInlineSize < number | `${number}%` | 'fill' >: Adjust the maximum inline size.

number: size in pixels.

`${number}%`: size in percentages.

fill: takes all the available space.

See MDN explanation of maxInlineSize.
Anchor to minInlineSize minInlineSize < number | `${number}%` | 'fill' >: Adjust the minimum inline size.

number: size in pixels.

`${number}%`: size in percentages.

fill: takes all the available space.\

See MDN explanation of minInlineSize.
Anchor to padding padding <<>>: Adjust the padding.

To shorten the code, it is possible to specify all the padding properties in one property.

Examples:

base means blockStart, inlineEnd, blockEnd and inlineStart paddings are base

[base, none] means blockStart and blockEnd paddings are base, inlineStart and inlineEnd paddings are none

[base, none, loose, tight] means blockStart padding is base, inlineEnd padding is none, blockEnd padding is loose and blockStart padding is tight

PopoverProps

position
Position the Popover relative to the activator.
```
PopoverPosition
```
alignment
Align the Popover in the axis determined by the position.
```
Alignment
```
onOpen
Callback to run when the Popover is opened
```
() => void
```
onClose
Callback to run when the Popover is closed
```
() => void
```
id
A unique identifier for the component.
```
string
```
maxInlineSize
Adjust the maximum inline size. `number`: size in pixels. `` `${number}%` ``: size in percentages. `fill`: takes all the available space. See [MDN explanation of maxInlineSize](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).
```
MaybeResponsiveConditionalStyle<
    number | `${number}%` | 'fill'
  >
```
minInlineSize
Adjust the minimum inline size. `number`: size in pixels. `` `${number}%` ``: size in percentages. `fill`: takes all the available space.\ See [MDN explanation of minInlineSize](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).
```
MaybeResponsiveConditionalStyle<
    number | `${number}%` | 'fill'
  >
```
padding
Adjust the padding. To shorten the code, it is possible to specify all the padding properties in one property. Examples: - `base` means blockStart, inlineEnd, blockEnd and inlineStart paddings are `base` - [`base`, `none`] means blockStart and blockEnd paddings are `base`, inlineStart and inlineEnd paddings are `none` - [`base`, `none`, `loose`, `tight`] means blockStart padding is `base`, inlineEnd padding is `none`, blockEnd padding is `loose` and blockStart padding is `tight`
```
MaybeResponsiveConditionalStyle<MaybeShorthandProperty<Spacing>>
```

export interface PopoverProps
  extends IdProps,
    Pick<SizingProps, 'maxInlineSize' | 'minInlineSize'>,
    Pick<SpacingProps, 'padding'> {
  /**
   * Position the Popover relative to the activator.
   * @defaultValue 'blockStart'
   */
  position?: PopoverPosition;
  /**
   * Align the Popover in the axis determined by the position.
   * @defaultValue 'center'
   */
  alignment?: Alignment;
  /**
   * Callback to run when the Popover is opened
   */
  onOpen?: () => void;
  /**
   * Callback to run when the Popover is closed
   */
  onClose?: () => void;
}

PopoverPosition

'inlineStart' | 'inlineEnd' | 'blockStart' | 'blockEnd'

Alignment

'start' | 'center' | 'end'

MaybeResponsiveConditionalStyle

A type that represents a value that can be a conditional style. The conditions are based on the viewport size. We highly recommend using the `Style` helper which simplifies the creation of conditional styles. To learn more check out the [conditional styles](/api/checkout-ui-extensions/components/utilities/stylehelper) documentation.

T | ConditionalStyle<T, ViewportSizeCondition>

ConditionalStyle

default
The default value applied when none of the conditional values specified in `conditionals` are met.
```
T
```
conditionals
An array of conditional values.
```
ConditionalValue<T, AcceptedConditions>[]
```

export interface ConditionalStyle<
  T,
  AcceptedConditions extends BaseConditions = Conditions,
> {
  /**
   * The default value applied when none of the conditional values
   * specified in `conditionals` are met.
   */
  default?: T;
  /**
   * An array of conditional values.
   */
  conditionals: ConditionalValue<T, AcceptedConditions>[];
}

ConditionalValue

conditions
The conditions that must be met for the value to be applied. At least one condition must be specified.
```
AcceptedConditions
```
value
The value that will be applied if the conditions are met.
```
T
```

export interface ConditionalValue<
  T,
  AcceptedConditions extends BaseConditions = Conditions,
> {
  /**
   * The conditions that must be met for the value to be applied. At least one
   * condition must be specified.
   */
  conditions: AcceptedConditions;
  /**
   * The value that will be applied if the conditions are met.
   */
  value: T;
}

ViewportSizeCondition

viewportInlineSize
```
{ min: ViewportInlineSize; }
```

export interface ViewportSizeCondition {
  viewportInlineSize: {min: ViewportInlineSize};
}

ViewportInlineSize

'small' | 'medium' | 'large'

MaybeShorthandProperty

T | ShorthandProperty<T>

ShorthandProperty

[T, T] | [T, T, T, T]

Spacing

'none' | 'extraTight' | 'tight' | 'base' | 'loose' | 'extraLoose'

Was this section helpful?

Basic Popover

import {

reactExtension,

Pressable,

Popover,

View,

TextBlock,

} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(

'purchase.checkout.block.render',

() => <Extension />,

);

function Extension() {

return (

<Pressable

overlay={

<View

maxInlineSize={200}

padding="base"

A thoughtful way to pay

</TextBlock>

Shop Pay remembers your important

details, so you can fill carts, not

forms. And everything is encrypted

so you can speed safely through

checkout.

</TextBlock>

</View>

</Popover>

}

More info

</Pressable>

);

}

examples

Basic Popover

React

import {
  reactExtension,
  Pressable,
  Popover,
  View,
  TextBlock,
} from '@shopify/ui-extensions-react/checkout';

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

function Extension() {
  return (
    <Pressable
      overlay={
        <Popover>
          <View
            maxInlineSize={200}
            padding="base"
          >
            <TextBlock>
              A thoughtful way to pay
            </TextBlock>
            <TextBlock>Tap don’t type</TextBlock>
            <TextBlock>
              Shop Pay remembers your important
              details, so you can fill carts, not
              forms. And everything is encrypted
              so you can speed safely through
              checkout.
            </TextBlock>
          </View>
        </Popover>
      }
    >
      More info
    </Pressable>
  );
}

JS

import {
  extension,
  Pressable,
  Popover,
  View,
  TextBlock,
} from '@shopify/ui-extensions/checkout';

export default extension('purchase.checkout.block.render', (root) => {
  const popoverFragment = root.createFragment();
  const popover = root.createComponent(Popover, {}, [
    root.createComponent(View, {maxInlineSize: 200, padding: 'base'}, [
      root.createComponent(TextBlock, {}, 'A thoughtful way to pay'),
      root.createComponent(TextBlock, {}, 'Tap don’t type'),
      root.createComponent(
        TextBlock,
        {},
        'Shop Pay remembers your important details, so you can fill carts, not forms. And everything is encrypted so you can speed safely through checkout.',
      ),
    ]),
  ]);
  popoverFragment.appendChild(popover);
  const pressable = root.createComponent(
    Pressable,
    {overlay: popoverFragment},
    'More info',
  );

  root.appendChild(pressable);
});

Preview

Anchor to best-practicesBest Practices

Use popovers if:

The intent is to ask the customer for information.
It’s possible to use at most two rows of input fields to get the information.

Was this section helpful?