@shopify/ui-extensions

@shopify/ui-extensions

This package contains the public type definitions and utilities needed to create Shopify UI extensions.

This package supports the development of UI extension for Admin, Customer account, POS, and Checkout surfaces.

All extensions, regardless of where they appear in Shopify, make use of the same underlying technology, and most of the same “core” components (e.g., s-block, s-button, s-text-field, etc) and capabilities (e.g., direct API access, session tokens). Separating APIs by surface makes it easier for a developer to see what is available to them in each context, and gives us a flexible system for introducing components and APIs available in only some areas of Shopify.

A checkout extension using Preact would be written as follows:

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return (
    <s-text>Line item title: {shopify.target.value.merchandise.title}</s-text>
  );
}