Skip to main content

pos.product-details.action.render

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>
);
};