@shopify/ui-extensions

What is @shopify/ui-extensions?

@shopify/ui-extensions is a package that allows developers to create custom UI extensions for Shopify. These extensions can be used to enhance the functionality and appearance of Shopify stores by adding custom components and features.

What are @shopify/ui-extensions's main functionalities?

Custom UI Components

This feature allows developers to create custom UI components like buttons, forms, and more. The code sample demonstrates how to create a simple button that logs a message when pressed.

import { extend, Button } from '@shopify/ui-extensions';

extend('Playground', (root) => {
  const button = root.createComponent(Button, {
    onPress: () => console.log('Button pressed!')
  }, 'Click me');

  root.appendChild(button);
});

Event Handling

This feature allows developers to handle events such as user input. The code sample demonstrates how to create a text field that logs the entered text whenever it changes.

import { extend, TextField } from '@shopify/ui-extensions';

extend('Playground', (root) => {
  const textField = root.createComponent(TextField, {
    label: 'Enter text',
    onChange: (value) => console.log('Text changed:', value)
  });

  root.appendChild(textField);
});

Styling Components

This feature allows developers to style their custom components. The code sample demonstrates how to create a styled view with padding and background color.

import { extend, View, Text } from '@shopify/ui-extensions';

extend('Playground', (root) => {
  const view = root.createComponent(View, {
    style: {
      padding: '10px',
      backgroundColor: 'lightblue'
    }
  },
  root.createComponent(Text, {}, 'Styled View'));

  root.appendChild(view);
});

Other packages similar to @shopify/ui-extensions

react

React is a popular JavaScript library for building user interfaces. It allows developers to create reusable UI components and manage the state of their applications. Compared to @shopify/ui-extensions, React is more general-purpose and can be used for a wide range of web applications, not just Shopify stores.

vue

Vue.js is a progressive JavaScript framework for building user interfaces. It is designed to be incrementally adoptable and can be used to create complex single-page applications. Like React, Vue.js is more general-purpose compared to @shopify/ui-extensions and can be used for various types of web applications.

angular

Angular is a platform and framework for building single-page client applications using HTML and TypeScript. It provides a comprehensive solution for building dynamic web applications. Compared to @shopify/ui-extensions, Angular is a full-fledged framework that offers more built-in features and is suitable for larger applications.

README

@shopify/ui-extensions

This package contains the public type definitions and utilities needed to create a Shopify UI extension. This is a generalized package that is intended to be the long-term home of the surface-specific UI extension packages, like @shopify/checkout-ui-extensions and @shopify/admin-ui-extensions.

Is your extension currently using @shopify/checkout-ui-extensions? You can learn what you need to do to upgrade to this API versioned package in the migration guide.

Currently, this package only contains the extension APIs for the checkout and admin surfaces, but other Shopify surfaces will be added here soon.

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., BlockStack, Button, TextField, 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 “vanilla” JavaScript would be written as follows:

import {extension, TextField} from '@shopify/ui-extensions/checkout';

export default extension(
  'purchase.checkout.block.render',
  (root, {i18n, metafields, applyMetafieldChange}) => {
    const metafield = metafields.current.find(
      (metafield) =>
        metafield.namespace === 'custom' && metafield.key === 'gift_note',
    );

    const textfield = root.createComponent(TextField, {
      label: i18n.translate('gift_note.label'),
      value: metafield?.value ?? '',
      onChange(value) {
        textfield.updateProps({value});

        applyMetafieldChange({
          namespace: 'custom',
          key: 'gift_note',
          value,
          valueType: 'string',
        });
      },
    });

    root.appendChild(textfield);
  },
);