The Shopify platform has been steadily moving away from theme-based app integration — ScriptTag, theme app extensions with direct liquid edits, and app proxy patterns — towards sandboxed Shopify app extensions that are managed independently of merchant themes. Understanding which extension type to use for which use case is the foundation of any modern Shopify app architecture. This guide covers all four major Shopify app extensions types, their APIs, targets, and build workflows.

Shopify app extensions — four types: Checkout UI Extension, Post-purchase Extension, Admin UI Extension and Web Pixel with build workflow by CodeAtoZ

Checkout UI Extensions are the most widely used type of Shopify app extensions. They allow you to render React components directly inside the Shopify checkout — above the payment button, below the order summary, on the thank-you page, and at dozens of other targets. Unlike the legacy ScriptTag approach, Checkout UI Extensions run in a sandboxed environment with no access to the parent checkout DOM, making them more secure and consistently rendered. All merchants on Shopify Plus and Basic plans can use Checkout UI Extensions. Refer to the Shopify Checkout UI Extensions API documentation for the full component and target reference.

import { extension, Banner, Button, useSettings } from '@shopify/ui-extensions-react/checkout';

export default extension('purchase.checkout.block.render', (root, { settings }) => {
  root.appendChild(
    root.createComponent(Banner, { title: 'Gift wrapping available', status: 'info' })
  );
});

// Or using React hooks with @shopify/ui-extensions-react/checkout:
export default reactExtension('purchase.checkout.block.render', () => <GiftWrapBlock />);

function GiftWrapBlock() {
  const { gift_message_enabled } = useSettings();
  return gift_message_enabled ? (
    <BlockStack>
      <Heading>Add gift wrapping</Heading>
      <Button>Add to order (+£3.99)</Button>
    </BlockStack>
  ) : null;
}

The shopify.extension.toml file configures which targets your Shopify app extensions render at, the extension name, and any merchant-configurable settings. Settings defined here appear in the Shopify Theme Editor under Checkout, letting merchants customise the extension without touching code.

[[extensions]]
name = "Gift Wrap Block"
handle = "gift-wrap-block"
type = "ui_extension"

[[extensions.targeting]]
module = "./src/index.tsx"
target = "purchase.checkout.block.render"

[extensions.settings]
  [[extensions.settings.fields]]
  key = "gift_message_enabled"
  type = "boolean"
  name = "Enable gift message input"

Post-purchase Shopify app extensions render immediately after the order confirmation, before the thank-you page. This is the highest-converting upsell placement in the entire Shopify funnel — the customer has just committed to a purchase and their card is still active. A one-click accept adds the upsell product to the existing order without re-entering payment details. Post-purchase extensions are available on all Shopify plans and are one of the highest-ROI Shopify app extensions for apps in the upsell, cross-sell, and subscription space.

• Render an offer using @shopify/post-purchase-ui-extensions-react
• Call Actions.Render to display the offer, Actions.AcceptOffer to process
• Use the useExtensionInput() hook to access order data and initial purchase
• Configure eligible offers server-side via the ShouldRender endpoint — only show relevant offers
• One-click charge uses the customer’s saved payment method — no re-authentication
• Test using shopify app dev with a development store — post-purchase renders after test orders

Admin UI Shopify app extensions let you add panels and blocks to the Shopify merchant admin — on the product detail page, order detail page, customer detail page, and the main app page. They are built with Shopify Polaris components, so they match the native admin UI exactly. Admin extensions use the same sandboxed architecture as Checkout UI Extensions — no direct DOM access, communication only via the Shopify Admin API through the extension’s authenticated context.

A common Admin UI extension pattern is adding a custom data panel to the product page — displaying supplier information, sync status from an ERP, or custom metafield data. The extension reads and writes data via the Admin GraphQL API using the access token provided by the extension context, with no separate OAuth flow needed. Our Shopify development team regularly builds Admin UI extensions as part of larger ERP and OMS integrations, and our Shopify custom app development guide covers the full architecture context.

Web Pixel Shopify app extensions replace the legacy ScriptTag for analytics and tracking. They run in a sandboxed browser context with access to Shopify’s standard customer events — page_viewed, product_added_to_cart, checkout_completed, and more. This sandboxed model is required for GA4, Meta Pixel, and other tracking integrations on Shopify stores post-iOS 14, as direct cookie access is increasingly restricted. Web Pixels are the only way to reliably implement Shopify app extensions for tracking on stores using Shopify’s Customer Privacy API. The Shopify Web Pixels API documentation lists all available events and the sandbox API.