pos.
Renders a custom information section within the product details screen. Use this target for displaying supplementary product data like detailed specifications, inventory status, or related product recommendations alongside standard product details.
Extensions at this target appear as persistent blocks within the product details interface and support interactive elements that can launch modal workflows using for more complex product operations.
Was this section helpful?
Create a product details information block
jsx
import {render} from 'preact';
export default async () => {
render(<Extension />, document.body);
};
const Extension = () => {
return (
<s-pos-block>
<s-button
slot="secondary-actions"
onClick={() => shopify.action.presentModal()}
>
Open action
</s-button>
<s-text>This is a block extension</s-text>
<s-text>Product ID for this product: {shopify.product.id}</s-text>
</s-pos-block>
);
};
Examples
Create a product details information block
Description
Add a custom information section to the product details screen for displaying supplementary product data. This example shows how to create a block that provides additional product information, inventory status, or custom product attributes alongside standard product details.
jsx
import {render} from 'preact'; export default async () => { render(<Extension />, document.body); }; const Extension = () => { return ( <s-pos-block> <s-button slot="secondary-actions" onClick={() => shopify.action.presentModal()} > Open action </s-button> <s-text>This is a block extension</s-text> <s-text>Product ID for this product: {shopify.product.id}</s-text> </s-pos-block> ); };