Version API

Examples

• Description

  Access the API version string that your extension is running on. This example reads `shopify.version` and displays it in a text component.

  jsx

  import '@shopify/ui-extensions/preact';
  import {render} from 'preact';
  
  export default async () => {
    render(<Extension />, document.body);
  };
  
  function Extension() {
    const version = shopify.version;
  
    return (
      <s-text>
        Running on API version: {version}
      </s-text>
    );
  }

• Description

  Conditionally render content based on the API version to handle feature availability across versions. This example compares `shopify.version` against a minimum version string to decide which banner to display.

  jsx

  import '@shopify/ui-extensions/preact';
  import {render} from 'preact';
  
  export default async () => {
    render(<Extension />, document.body);
  };
  
  function Extension() {
    const version = shopify.version;
    const supportsNewFeature =
      version >= '2026-04';
  
    return (
      <s-stack direction="block" gap="base">
        {supportsNewFeature ? (
          <s-banner heading="New feature available">
            This extension is using the latest API
            features.
          </s-banner>
        ) : (
          <s-banner heading="Update available">
            Upgrade your API version to access new
            features.
          </s-banner>
        )}
      </s-stack>
    );
  }