---
title: Device API
description: >-
  The Device API provides access to device information and capabilities,
  allowing you to retrieve device details, check device types, and adapt your
  extension behavior based on the POS hardware characteristics. The API enables
  device-aware functionality and responsive design based on device form factors.
api_version: 2025-10
api_name: pos-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/pos-ui-extensions/latest/target-apis/platform-apis/device-api
  md: >-
    https://shopify.dev/docs/api/pos-ui-extensions/latest/target-apis/platform-apis/device-api.md
---

# Device APIAPIs

The Device API provides access to device information and capabilities, allowing you to retrieve device details, check device types, and adapt your extension behavior based on the POS hardware characteristics. The API enables device-aware functionality and responsive design based on device form factors.

## DeviceApi

The `DeviceApi` object provides access to device information and capabilities. Access these properties and methods through `shopify.device` to retrieve device details and check device characteristics.

* getDeviceId

  () => Promise\<string>

  required

  Retrieves the unique string identifier for the device. Returns a promise that resolves to the device ID. Use for device-specific data storage, analytics tracking, or implementing device-based permissions and configurations.

* isTablet

  () => Promise\<boolean>

  required

  Determines whether the device is a tablet form factor. Returns a promise that resolves to `true` for tablets, `false` for other device types. Use for implementing responsive design, optimizing touch targets, or providing device-appropriate user experiences.

* name

  string

  required

  The name of the device as configured by the merchant or system. Use for displaying device information in interfaces, logging, or support contexts where device identification is helpful.

## Best practices

* **Implement responsive design:** Use device type information to adapt your interface layouts, component sizes, and interaction patterns based on the device form factor and capabilities.
* **Handle async device queries:** Handle the Promise-based device methods with async/await or `.then()` patterns, and implement appropriate error handling for device query failures.
* **Cache device information appropriately:** Consider caching device information after the initial query to avoid repeated async calls, but ensure you handle cases where device characteristics might change during the session.
* **Provide device-appropriate experiences:** Design different user experiences for tablets versus other devices, taking advantage of larger screens while ensuring functionality works across all supported device types.

## Examples

Learn how to access device information and adapt your extension based on device characteristics.

### Examples

* #### Check if the device is a tablet

  ##### Description

  Check if the POS device is running on tablet hardware to adapt your UI accordingly. This example shows how to use \`shopify.device.isTablet()\` to determine the device form factor. This enables responsive layouts and touch-optimized interfaces for tablet devices versus traditional POS terminals.

  ##### jsx

  ```jsx
  import {render} from 'preact';
  import {useState} from 'preact/hooks';

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

  const Extension = () => {
    const [isTablet, setIsTablet] = useState(false);
    shopify.device.isTablet().then((isTablet) => {
      setIsTablet(isTablet);
    });
    return (
      <s-tile
        heading="My App"
        disabled={!isTablet}
      />
    );
  };
  ```

* #### Retrieve the device ID

  ##### Description

  Access the unique identifier of the current POS device. This example demonstrates using \`shopify.device.id\` to retrieve the device ID. This enables device-specific configurations, analytics tracking, or multi-device coordination features.

  ##### jsx

  ```jsx
  import {render} from 'preact';
  import {useState} from 'preact/hooks';

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

  const Extension = () => {
    const [deviceId, setDeviceId] = useState('');
    shopify.device.getDeviceId().then((deviceId) => {
      setDeviceId(deviceId);
    });
    return (
      <s-tile
        heading="My App"
        subheading={deviceId}
      />
    );
  };
  ```

* #### Retrieve the device name

  ##### Description

  Retrieve the name of the current POS device. This example shows how to use \`shopify.device.name\` to get the device name configured in POS settings. This is useful for device identification, multi-device workflows, or displaying location-specific information.

  ##### jsx

  ```jsx
  import {render} from 'preact';

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

  const Extension = () => {
    return (
      <s-tile
        heading="My App"
        subheading={shopify.device.name}
      />
    );
  };
  ```