Tile

Examples

• Show a smart grid tile

  Description

  Display an interactive button on the POS smart grid for quick actions. This example shows how to create a tile that provides merchants with customizable shortcuts, displaying contextual information through titles, subtitles, and badges while supporting tap interactions and dynamic state changes.

  React

  import React from 'react'
  import { Tile, reactExtension, useApi } from '@shopify/ui-extensions-react/point-of-sale'
  
  const TileComponent = () => {
    const api = useApi()
    return (
      <Tile
        title="My app"
        subtitle="Hello world!"
        onPress={() => {
          api.action.presentModal()
        }}
        enabled
      />
    )
  }
  
  export default reactExtension('pos.home.tile.render', () => {
    return <TileComponent />
  })

  TS

  import {
    Tile,
    extension,
  } from '@shopify/ui-extensions/point-of-sale';
  
  export default extension(
    'pos.home.tile.render',
    (root, api) => {
      const tile = root.createComponent(Tile, {
        title: 'My app',
        subtitle: 'Hello world!',
        enabled: true,
        onPress: () => {
          api.action.presentModal();
        },
      });
  
      root.append(tile);
    },
  );