App Bridge Ui
UiModal
Full-screen modal outside the iframe. Wraps the App Bridge <ui-modal> web component.
Usage
<script setup>
const shopify = useAppBridge()
function openModal() {
shopify.modal.show('my-modal')
}
function closeModal() {
shopify.modal.hide('my-modal')
}
function handleSave() {
// ...save logic
closeModal()
}
</script>
<template>
<ShButton @click="openModal">Open Modal</ShButton>
<ShUiModal id="my-modal" variant="large" @hide="closeModal">
<p>This content renders outside the iframe.</p>
<template #title-bar>
<ShUiTitleBar
title="Edit Product"
:primary-action="{ label: 'Save', onClick: handleSave }"
/>
</template>
</ShUiModal>
</template>
ShUiModal renders outside your app's iframe in the Shopify Admin shell. For an in-iframe modal, use ShModal.Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
id | string | Yes | — | Unique identifier |
variant | 'small' | 'base' | 'large' | 'max' | No | 'base' | Modal size |
src | string | No | — | URL to load in an iframe inside the modal |
Events
| Event | Payload | Description |
|---|---|---|
show | Event | Emitted when the modal opens |
hide | Event | Emitted when the modal closes |
Slots
| Slot | Description |
|---|---|
default | Modal body content |
title-bar | <ShUiTitleBar> for modal header |
save-bar | <ShUiSaveBar> for modal actions |
App Bridge API
| Method | Description |
|---|---|
shopify.modal.show(id) | Shows the modal |
shopify.modal.hide(id) | Hides the modal |
shopify.modal.toggle(id) | Toggles modal visibility |
App Bridge Element
Renders as <ui-modal>. See App Bridge Modal docs.