pos.
Renders a full-screen modal interface launched from product details menu items. Use this target for complex product workflows that require forms, multi-step processes, or detailed information displays beyond what a simple button can provide.
Extensions at this target have access to product and cart data through the Product API and support workflows with multiple screens, navigation, and interactive components.
Was this section helpful?
Create a product details action modal
jsx
import {render} from 'preact';
export default async () => {
render(<Extension />, document.body);
};
const Extension = () => {
return (
<s-page heading="Product Details">
<s-scroll-box>
<s-text>Product ID: {shopify.product.id}</s-text>
</s-scroll-box>
</s-page>
);
};
Examples
Create a product details action modal
Description
Build a full-screen modal workflow launched from a product details action menu item. This example demonstrates creating product-specific experiences with multi-step processes, forms, and product data access for operations like inventory management or product customization.
jsx
import {render} from 'preact'; export default async () => { render(<Extension />, document.body); }; const Extension = () => { return ( <s-page heading="Product Details"> <s-scroll-box> <s-text>Product ID: {shopify.product.id}</s-text> </s-scroll-box> </s-page> ); };