Choose a version:

Device API

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.

Anchor to Use casesUse cases

Responsive design: Adapt interface layouts based on device form factor (tablet compared to phone).
Device info: Display device-specific information for troubleshooting or support.
Device-aware features: Implement functionality like optimized touch targets for different screen sizes.
Usage analytics: Track device usage patterns for analytics or feature optimization.

Support

Targets (28)

Supported targets

Anchor to PropertiesProperties

The shopify global object provides device details and capabilities. Access the following properties on shopify to get device information, check form factors, and manage device registration.

Anchor to getDeviceId 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. Note: While Shopify POS attempts to maintain a stable identifier, it is not guaranteed to be permanent and may change.
Anchor to isTablet 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.
Anchor to name 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.
Anchor to registerName registerName string required: A short, unique identifier for the device, assigned by Shopify.

Examples

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}

);

};

Examples

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

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}
    />
  );
};

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

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}
    />
  );
};

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
```
import {render} from 'preact';

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

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

Anchor to Best practicesBest 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.

Was this page helpful?