---
title: Cart API
description: >-
  The Cart API enables UI Extensions to manage and interact with POS cart
  contents, such as discounts, line items, and customer details. It provides a
  comprehensive set of functions for adding and removing items, alongside a
  subscribable object that keeps the UI Extension updated with real-time changes
  to the cart.
api_version: 2024-04
api_name: pos-ui-extensions
source_url:
  html: 'https://shopify.dev/docs/api/pos-ui-extensions/2024-04/apis/cart-api'
  md: 'https://shopify.dev/docs/api/pos-ui-extensions/2024-04/apis/cart-api.md'
---

# Cart APIAPIs

Requires pos.home.tile.render

The Cart API enables UI Extensions to manage and interact with POS cart contents, such as discounts, line items, and customer details. It provides a comprehensive set of functions for adding and removing items, alongside a subscribable object that keeps the UI Extension updated with real-time changes to the cart.

## CartApi

* subscribable

  RemoteSubscribable\<Cart>

  required

  Provides a subscription to POS cart changes. Provides an initial value and a callback to subscribe to value changes. Currently supports only one subscription. You can utilize `makeStatefulSubscribable` on a `RemoteSubscribable` to implement multiple subscriptions. Using `makeStatefulSubscribable` or the corresponding hooks counts as a subscription.

* applyCartDiscount

  (type: CartDiscountType, title: string, amount?: string) => Promise\<void>

  required

  Apply a cart level discount

* addCartCodeDiscount

  (code: string) => Promise\<void>

  required

  Add a code discount to the cart

* removeCartDiscount

  () => Promise\<void>

  required

  Remove the cart discount

* removeAllDiscounts

  (disableAutomaticDiscounts: boolean) => Promise\<void>

  required

  Remove all cart and line item discounts

* clearCart

  () => Promise\<void>

  required

  Clear the cart

* setCustomer

  (customer: Customer) => Promise\<void>

  required

  Set the customer in the cart

* removeCustomer

  () => Promise\<void>

  required

  Remove the current customer from the cart

* addCustomSale

  (customSale: CustomSale) => Promise\<void>

  required

  Add a custom sale to the cart

* addLineItem

  (variantId: number, quantity: number) => Promise\<void>

  required

  Add a line item by variant ID to the cart

* removeLineItem

  (uuid: string) => Promise\<void>

  required

  Remove the line item at this uuid from the cart

* addCartProperties

  (properties: Record\<string, string>) => Promise\<void>

  required

  Adds custom properties to the cart

* removeCartProperties

  (keys: string\[]) => Promise\<void>

  required

  Removes the specified cart properties

* addLineItemProperties

  (uuid: string, properties: Record\<string, string>) => Promise\<void>

  required

  Adds custom properties to the specified line item

* bulkAddLineItemProperties

  (lineItemProperties: SetLineItemPropertiesInput\[]) => Promise\<void>

  required

  Adds custom properties to multiple line items at the same time.

* removeLineItemProperties

  (uuid: string, keys: string\[]) => Promise\<void>

  required

  Removes the specified line item properties

* setLineItemDiscount

  (uuid: string, type: LineItemDiscountType, title: string, amount: string) => Promise\<void>

  required

  Add a discount on a line item to the cart

* bulkSetLineItemDiscounts

  (lineItemDiscounts: SetLineItemDiscountInput\[]) => Promise\<void>

  required

  Set line item discounts to multiple line items at the same time.

* setAttributedStaff

  (staffId: number) => Promise\<void>

  required

  Sets an attributed staff to all line items in the cart.

* setAttributedStaffToLineItem

  (staffId: number, lineItemUuid: string) => Promise\<void>

  required

  Sets an attributed staff to a specific line items in the cart.

* removeLineItemDiscount

  (uuid: string) => Promise\<void>

  required

  Remove all discounts from a line item

* addAddress

  (address: Address) => Promise\<void>

  required

  Add an address to the customer (Customer must be present)

* deleteAddress

  (addressId: number) => Promise\<void>

  required

  Delete an address from the customer (Customer must be present)

* updateDefaultAddress

  (addressId: number) => Promise\<void>

  required

  Update the default address for the customer (Customer must be present)

### Cart

* subtotal

  ```ts
  string
  ```

* taxTotal

  ```ts
  string
  ```

* grandTotal

  ```ts
  string
  ```

* note

  ```ts
  string
  ```

* cartDiscount

  ```ts
  Discount
  ```

* cartDiscounts

  ```ts
  Discount[]
  ```

* customer

  ```ts
  Customer
  ```

* lineItems

  ```ts
  LineItem[]
  ```

* properties

  ```ts
  Record<string, string>
  ```

```ts
export interface Cart {
  subtotal: string;
  taxTotal: string;
  grandTotal: string;
  note?: string;
  cartDiscount?: Discount;
  cartDiscounts: Discount[];
  customer?: Customer;
  lineItems: LineItem[];
  properties: Record<string, string>;
}
```

### Discount

* amount

  ```ts
  number
  ```

* discountDescription

  ```ts
  string
  ```

* type

  ```ts
  string
  ```

```ts
export interface Discount {
  amount: number;
  discountDescription?: string;
  type?: string;
}
```

### Customer

* id

  ```ts
  number
  ```

* email

  ```ts
  string
  ```

* firstName

  ```ts
  string
  ```

* lastName

  ```ts
  string
  ```

* note

  ```ts
  string
  ```

```ts
export interface Customer {
  id: number;
  email?: string;
  firstName?: string;
  lastName?: string;
  note?: string;
}
```

### LineItem

* uuid

  ```ts
  string
  ```

* price

  ```ts
  number
  ```

* quantity

  ```ts
  number
  ```

* title

  ```ts
  string
  ```

* variantId

  ```ts
  number
  ```

* productId

  ```ts
  number
  ```

* discounts

  ```ts
  Discount[]
  ```

* taxable

  ```ts
  boolean
  ```

* sku

  ```ts
  string
  ```

* vendor

  ```ts
  string
  ```

* properties

  ```ts
  { [key: string]: string; }
  ```

* isGiftCard

  ```ts
  boolean
  ```

```ts
export interface LineItem {
  uuid: string;
  price?: number;
  quantity: number;
  title?: string;
  variantId?: number;
  productId?: number;
  discounts: Discount[];
  taxable: boolean;
  sku?: string;
  vendor?: string;
  properties: {[key: string]: string};
  isGiftCard: boolean;
}
```

### CartDiscountType

```ts
'Percentage' | 'FixedAmount' | 'Code'
```

### CustomSale

* quantity

  ```ts
  number
  ```

* title

  ```ts
  string
  ```

* price

  ```ts
  string
  ```

* taxable

  ```ts
  boolean
  ```

```ts
export interface CustomSale {
  quantity: number;
  title: string;
  price: string;
  taxable: boolean;
}
```

### SetLineItemPropertiesInput

Parameters for adding custom properties to a line item.

* lineItemUuid

  The uuid belonging to the line item which should receive the custom properties.

  ```ts
  string
  ```

* properties

  The custom properties to apply to the line item.

  ```ts
  Record<string, string>
  ```

```ts
export interface SetLineItemPropertiesInput {
  /**
   * The uuid belonging to the line item which should receive the custom properties.
   */
  lineItemUuid: string;
  /**
   * The custom properties to apply to the line item.
   */
  properties: Record<string, string>;
}
```

### LineItemDiscountType

```ts
'Percentage' | 'FixedAmount'
```

### SetLineItemDiscountInput

Parameters for adding a line item discount.

* lineItemUuid

  The uuid belonging to the line item which should receive the discount.

  ```ts
  string
  ```

* lineItemDiscount

  The discount to be applied to the line item.

  ```ts
  LineItemDiscount
  ```

```ts
export interface SetLineItemDiscountInput {
  /**
   * The uuid belonging to the line item which should receive the discount.
   */
  lineItemUuid: string;
  /**
   * The discount to be applied to the line item.
   */
  lineItemDiscount: LineItemDiscount;
}
```

### LineItemDiscount

* title

  The title of the line item discount.

  ```ts
  string
  ```

* type

  The discount type.

  ```ts
  "Percentage" | "FixedAmount"
  ```

* amount

  The percentage or fixed amount for the discount.

  ```ts
  string
  ```

```ts
export interface LineItemDiscount {
  /**
   * The title of the line item discount.
   */
  title: string;
  /**
   * The discount type.
   */
  type: 'Percentage' | 'FixedAmount';
  /**
   * The percentage or fixed amount for the discount.
   */
  amount: string;
}
```

### Address

* address1

  ```ts
  string
  ```

* address2

  ```ts
  string
  ```

* city

  ```ts
  string
  ```

* company

  ```ts
  string
  ```

* firstName

  ```ts
  string
  ```

* lastName

  ```ts
  string
  ```

* phone

  ```ts
  string
  ```

* province

  ```ts
  string
  ```

* country

  ```ts
  string
  ```

* zip

  ```ts
  string
  ```

* name

  ```ts
  string
  ```

* provinceCode

  ```ts
  string
  ```

* countryCode

  ```ts
  CountryCode
  ```

```ts
export interface Address {
  address1?: string;
  address2?: string;
  city?: string;
  company?: string;
  firstName?: string;
  lastName?: string;
  phone?: string;
  province?: string;
  country?: string;
  zip?: string;
  name?: string;
  provinceCode?: string;
  countryCode?: CountryCode;
}
```

## Examples

Examples of using the Cart API

### Examples

* #### Subscribe to cart changes.

  ##### React

  ```tsx

  import React from 'react';
  import {
    reactExtension,
    useApi,
    Tile,
    useCartSubscription
  } from '@shopify/ui-extensions-react/point-of-sale';

  const SmartGridTile = () => {
    const cart = useCartSubscription();

    return (
      <Tile 
        title='My App' 
        subtitle={`${cart.lineItems.length} line items in cart`} 
        enabled
      />
    );
  };

  export default reactExtension(
    'pos.home.tile.render',
    () => <SmartGridTile />
  );
  ```

  ##### TS

  ```ts
  import {Cart, 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: `${api.cart.subscribable.initial.lineItems.length} line items in cart`,
      enabled: true,
    });

    api.cart.subscribable.subscribe((newCart: Cart) => {
      tile.updateProps({
        subtitle: `${newCart.lineItems.length > 0} line items in cart`,
      });
    });

    root.append(tile);
  });
  ```

* #### Apply a cart level discount

  ##### React

  ```tsx
  import React from 'react';
  import {
    reactExtension,
    useApi,
    Tile
  } from '@shopify/ui-extensions-react/point-of-sale';

  const SmartGridTile = () => {
    const api = useApi<'pos.home.tile.render'>();

    return (
      <Tile 
        title='My App' 
        subtitle='Call cart function' 
        enabled 
        onPress={() => api.cart.applyCartDiscount('Percentage', 'Summer discount', '10')}
      />
    );
  };

  export default reactExtension(
    'pos.home.tile.render',
    () => <SmartGridTile />
  );
  ```

  ##### TS

  ```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: 'Call cart function',
      enabled: true,
      onPress: () => {
        api.cart.applyCartDiscount('Percentage', 'Summer discount', '10');
      },
    });

    root.append(tile);
  });
  ```

* #### Apply a cart level discount code

  ##### React

  ```tsx
  import React from 'react';
  import {
    reactExtension,
    useApi,
    Tile
  } from '@shopify/ui-extensions-react/point-of-sale';

  const SmartGridTile = () => {
    const api = useApi<'pos.home.tile.render'>();

    return (
      <Tile 
        title='My App' 
        subtitle='Call cart function' 
        enabled 
        onPress={() => api.cart.addCartCodeDiscount('SUMMER_2024')} 
      />
    );
  };

  export default reactExtension(
    'pos.home.tile.render',
    () => <SmartGridTile />
  );
  ```

  ##### TS

  ```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: 'Call cart function',
      enabled: true,
      onPress: () => {
        api.cart.addCartCodeDiscount('SUMMER_2024');
      },
    });

    root.append(tile);
  });
  ```

* #### Remove all the discounts on the cart and line items

  ##### React

  ```tsx

  import React from 'react';
  import {
    reactExtension,
    useApi,
    Tile
  } from '@shopify/ui-extensions-react/point-of-sale';

  const SmartGridTile = () => {
    const api = useApi<'pos.home.tile.render'>();

    return (
      <Tile 
        title='My App' 
        subtitle='Call cart function' 
        enabled 
        onPress={() => api.cart.removeAllDiscounts(true)}
      />
    );
  };

  export default reactExtension(
    'pos.home.tile.render',
    () => <SmartGridTile />
  );
  ```

  ##### TS

  ```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: 'Call cart function',
      enabled: true,
      onPress: () => {
        api.cart.removeAllDiscounts(true);
      },
    });

    root.append(tile);
  });
  ```

* #### Set a custom discount on a line item

  ##### React

  ```tsx

  import React from 'react';
  import {
    reactExtension,
    useApi,
    Tile
  } from '@shopify/ui-extensions-react/point-of-sale';

  const SmartGridTile = () => {
    const api = useApi<'pos.home.tile.render'>();

    return (
      <Tile 
        title='My App' 
        subtitle='Call cart function' 
        enabled 
        onPress={() => api.cart.setLineItemDiscount('aa-1234567', 'Percentage', 'Summer discount', '10')}
      />
    );
  };

  export default reactExtension(
    'pos.home.tile.render',
    () => <SmartGridTile />
  );
  ```

  ##### TS

  ```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: 'Call cart function',
      enabled: true,
      onPress: () => {
        api.cart.setLineItemDiscount(
          'aa-1234567',
          'Percentage',
          'Summer discount',
          '10',
        );
      },
    });

    root.append(tile);
  });
  ```

* #### Set a custom discount on multiple line items

  ##### React

  ```tsx

  import React from 'react';
  import {
    reactExtension,
    useApi,
    Tile
  } from '@shopify/ui-extensions-react/point-of-sale';

  const SmartGridTile = () => {
    const api = useApi<'pos.home.tile.render'>();

    return (
      <Tile 
        title='My App' 
        subtitle='Call cart function' 
        enabled 
        onPress={() => api.cart.bulkSetLineItemDiscounts([
          {
            lineItemUuid: 'aa-1234567',
            lineItemDiscount: {
              title: 'Summer 2024',
              amount: '10',
              type: 'Percentage',
            },
          },
          {
            lineItemUuid: 'bb-1234567',
            lineItemDiscount: {
              title: 'Shorts sale',
              amount: '15',
              type: 'FixedAmount',
            },
          },
        ])}
      />
    );
  };

  export default reactExtension(
    'pos.home.tile.render',
    () => <SmartGridTile />
  );
  ```

  ##### TS

  ```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: 'Call cart function',
      enabled: true,
      onPress: () => {
        api.cart.bulkSetLineItemDiscounts([
          {
            lineItemUuid: 'aa-1234567',
            lineItemDiscount: {
              title: 'Summer 2024',
              amount: '10',
              type: 'Percentage',
            },
          },
          {
            lineItemUuid: 'bb-1234567',
            lineItemDiscount: {
              title: 'Shorts sale',
              amount: '15',
              type: 'FixedAmount',
            },
          },
        ]);
      },
    });

    root.append(tile);
  });
  ```

* #### Remove a discount on a line item

  ##### React

  ```tsx

  import React from 'react';
  import {
    reactExtension,
    useApi,
    Tile
  } from '@shopify/ui-extensions-react/point-of-sale';

  const SmartGridTile = () => {
    const api = useApi<'pos.home.tile.render'>();

    return (
      <Tile 
        title='My App' 
        subtitle='Call cart function' 
        enabled 
        onPress={() => api.cart.removeLineItemDiscount('aa-1234567')}
      />
    );
  };

  export default reactExtension(
    'pos.home.tile.render',
    () => <SmartGridTile />
  );
  ```

  ##### TS

  ```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: 'Call cart function',
      enabled: true,
      onPress: () => {
        api.cart.removeLineItemDiscount('aa-1234567');
      },
    });

    root.append(tile);
  });
  ```

* #### Clear the entire cart

  ##### React

  ```tsx
  import React from 'react';
  import {
    reactExtension,
    useApi,
    Tile
  } from '@shopify/ui-extensions-react/point-of-sale';

  const SmartGridTile = () => {
    const api = useApi<'pos.home.tile.render'>();

    return (
      <Tile 
        title='My App' 
        subtitle='Call cart function' 
        enabled 
        onPress={() => api.cart.clearCart()}
      />
    );
  };

  export default reactExtension(
    'pos.home.tile.render',
    () => <SmartGridTile />
  );
  ```

  ##### TS

  ```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: 'Call cart function',
      enabled: true,
      onPress: () => {
        api.cart.clearCart();
      },
    });

    root.append(tile);
  });
  ```

* #### Set the customer in the cart

  ##### React

  ```tsx

  import React from 'react';
  import {
    reactExtension,
    useApi,
    Tile
  } from '@shopify/ui-extensions-react/point-of-sale';

  const SmartGridTile = () => {
    const api = useApi<'pos.home.tile.render'>();

    return (
      <Tile 
        title='My App' 
        subtitle='Call cart function' 
        enabled 
        onPress={() => api.cart.setCustomer({
          id: 1,
        })}
      />
    );
  };

  export default reactExtension(
    'pos.home.tile.render',
    () => <SmartGridTile />
  );
  ```

  ##### TS

  ```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: 'Call cart function',
      enabled: true,
      onPress: () => {
        api.cart.setCustomer({
          id: 1,
        });
      },
    });

    root.append(tile);
  });
  ```

* #### Remove the customer in the cart

  ##### React

  ```tsx

  import React from 'react';
  import {
    reactExtension,
    useApi,
    Tile
  } from '@shopify/ui-extensions-react/point-of-sale';

  const SmartGridTile = () => {
    const api = useApi<'pos.home.tile.render'>();

    return (
      <Tile 
        title='My App' 
        subtitle='Call cart function' 
        enabled 
        onPress={() => api.cart.removeCustomer()}
      />
    );
  };

  export default reactExtension(
    'pos.home.tile.render',
    () => <SmartGridTile />
  );
  ```

  ##### TS

  ```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: 'Call cart function',
      enabled: true,
      onPress: () => {
        api.cart.removeCustomer();
      },
    });

    root.append(tile);
  });
  ```

* #### Add a custom sale to the cart

  ##### React

  ```tsx

  import React from 'react';
  import {
    reactExtension,
    useApi,
    Tile
  } from '@shopify/ui-extensions-react/point-of-sale';

  const SmartGridTile = () => {
    const api = useApi<'pos.home.tile.render'>();

    return (
      <Tile 
        title='My App' 
        subtitle='Call cart function' 
        enabled 
        onPress={() => api.cart.addCustomSale({
          title: 'New product',
          quantity: 1,
          price: '10.00',
          taxable: true,
        })}
      />
    );
  };

  export default reactExtension(
    'pos.home.tile.render',
    () => <SmartGridTile />
  );
  ```

  ##### TS

  ```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: 'Call cart function',
      enabled: true,
      onPress: () => {
        api.cart.addCustomSale({
          title: 'New product',
          quantity: 1,
          price: '10.00',
          taxable: true,
        });
      },
    });

    root.append(tile);
  });
  ```

* #### Add a line item to the cart

  ##### React

  ```tsx

  import React from 'react';
  import {
    reactExtension,
    useApi,
    Tile
  } from '@shopify/ui-extensions-react/point-of-sale';

  const SmartGridTile = () => {
    const api = useApi<'pos.home.tile.render'>();

    return (
      <Tile 
        title='My App' 
        subtitle='Call cart function' 
        enabled 
        onPress={() => api.cart.addLineItem(12345678, 1)}
      />
    );
  };

  export default reactExtension(
    'pos.home.tile.render',
    () => <SmartGridTile />
  );
  ```

  ##### TS

  ```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: 'Call cart function',
      enabled: true,
      onPress: () => {
        api.cart.addLineItem(12345678, 1);
      },
    });

    root.append(tile);
  });
  ```

* #### Remove a line item from the cart

  ##### React

  ```tsx

  import React from 'react';
  import {
    reactExtension,
    useApi,
    Tile
  } from '@shopify/ui-extensions-react/point-of-sale';

  const SmartGridTile = () => {
    const api = useApi<'pos.home.tile.render'>();

    return (
      <Tile 
        title='My App' 
        subtitle='Call cart function' 
        enabled 
        onPress={() => api.cart.removeLineItem('aa-1234567')}
      />
    );
  };

  export default reactExtension(
    'pos.home.tile.render',
    () => <SmartGridTile />
  );
  ```

  ##### TS

  ```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: 'Call cart function',
      enabled: true,
      onPress: () => {
        api.cart.removeLineItem('aa-1234567');
      },
    });

    root.append(tile);
  });
  ```

* #### Add custom properties to the cart

  ##### React

  ```tsx

  import React from 'react';
  import {
    reactExtension,
    useApi,
    Tile
  } from '@shopify/ui-extensions-react/point-of-sale';

  const SmartGridTile = () => {
    const api = useApi<'pos.home.tile.render'>();

    return (
      <Tile 
        title='My App' 
        subtitle='Call cart function' 
        enabled 
        onPress={() => api.cart.addCartProperties({Engraving: 'John Doe'})}
      />
    );
  };

  export default reactExtension(
    'pos.home.tile.render',
    () => <SmartGridTile />
  );
  ```

  ##### TS

  ```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: 'Call cart action',
      enabled: true,
      onPress: () => {
        api.cart.addCartProperties({Engraving: 'John Doe'});
      },
    });

    root.append(tile);
  });
  ```

* #### Remove custom properties from the cart

  ##### React

  ```tsx

  import React from 'react';
  import {
    reactExtension,
    useApi,
    Tile
  } from '@shopify/ui-extensions-react/point-of-sale';

  const SmartGridTile = () => {
    const api = useApi<'pos.home.tile.render'>();

    return (
      <Tile 
        title='My App' 
        subtitle='Call cart function' 
        enabled 
        onPress={() => api.cart.removeCartProperties(['Engraving'])}
      />
    );
  };

  export default reactExtension(
    'pos.home.tile.render',
    () => <SmartGridTile />
  );
  ```

  ##### TS

  ```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: 'Call cart function',
      enabled: true,
      onPress: () => {
        api.cart.removeCartProperties(['Engraving']);
      },
    });

    root.append(tile);
  });
  ```

* #### Add custom properties to a line item

  ##### React

  ```tsx

  import React from 'react';
  import {
    reactExtension,
    useApi,
    Tile
  } from '@shopify/ui-extensions-react/point-of-sale';

  const SmartGridTile = () => {
    const api = useApi<'pos.home.tile.render'>();

    return (
      <Tile 
        title='My App' 
        subtitle='Call cart function' 
        enabled 
        onPress={() => api.cart.addLineItemProperties('aa-1234567', {Engraving: 'John Doe'})}
      />
    );
  };

  export default reactExtension(
    'pos.home.tile.render',
    () => <SmartGridTile />
  );
  ```

  ##### TS

  ```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: 'Call cart function',
      enabled: true,
      onPress: () => {
        api.cart.addLineItemProperties('aa-1234567', {Engraving: 'John Doe'});
      },
    });

    root.append(tile);
  });
  ```

* #### Add custom properties to multiple line items

  ##### React

  ```tsx

  import React from 'react';
  import {
    reactExtension,
    useApi,
    Tile
  } from '@shopify/ui-extensions-react/point-of-sale';

  const SmartGridTile = () => {
    const api = useApi<'pos.home.tile.render'>();

    return (
      <Tile 
        title='My App' 
        subtitle='Call cart function' 
        enabled 
        onPress={() => api.cart.bulkAddLineItemProperties([
          {lineItemUuid: 'aa-1234567', properties: {Engraving: 'John Doe'}},
          {lineItemUuid: 'bb-001234567', properties: {Engraving: 'Jane Doe'}}
        ])}
      />
    );
  };

  export default reactExtension(
    'pos.home.tile.render',
    () => <SmartGridTile />
  );
  ```

  ##### TS

  ```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: 'Call cart function',
      enabled: true,
      onPress: () => {
        api.cart.bulkAddLineItemProperties([
          {lineItemUuid: 'aa-1234567', properties: {Engraving: 'John Doe'}},
          {lineItemUuid: 'bb-001234567', properties: {Engraving: 'Jane Doe'}},
        ]);
      },
    });

    root.append(tile);
  });
  ```

* #### Remove custom properties from a line item

  ##### React

  ```tsx

  import React from 'react';
  import {
    reactExtension,
    useApi,
    Tile
  } from '@shopify/ui-extensions-react/point-of-sale';

  const SmartGridTile = () => {
    const api = useApi<'pos.home.tile.render'>();

    return (
      <Tile 
        title='My App' 
        subtitle='Call cart function' 
        enabled 
        onPress={() => api.cart.removeLineItemProperties('aa-1234567', ['Engraving'])}
      />
    );
  };

  export default reactExtension(
    'pos.home.tile.render',
    () => <SmartGridTile />
  );
  ```

  ##### TS

  ```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: 'Call cart function',
      enabled: true,
      onPress: () => {
        api.cart.removeLineItemProperties('aa-1234567', ['Engraving']);
      },
    });

    root.append(tile);
  });
  ```

* #### Set an attributed staff member on the cart

  ##### React

  ```tsx

  import React from 'react';
  import {
    reactExtension,
    useApi,
    Tile
  } from '@shopify/ui-extensions-react/point-of-sale';

  const SmartGridTile = () => {
    const api = useApi<'pos.home.tile.render'>();

    return (
      <Tile 
        title='My App' 
        subtitle='Call cart function' 
        enabled 
        onPress={() => api.cart.setAttributedStaff(123456)}
      />
    );
  };

  export default reactExtension(
    'pos.home.tile.render',
    () => <SmartGridTile />
  );
  ```

  ##### TS

  ```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: 'Call cart function',
      enabled: true,
      onPress: () => {
        api.cart.setAttributedStaff(123456);
      },
    });

    root.append(tile);
  });
  ```

* #### Set an attributed staff member on a line item

  ##### React

  ```tsx

  import React from 'react';
  import {
    reactExtension,
    useApi,
    Tile
  } from '@shopify/ui-extensions-react/point-of-sale';

  const SmartGridTile = () => {
    const api = useApi<'pos.home.tile.render'>();

    return (
      <Tile 
        title='My App' 
        subtitle='Call cart function' 
        enabled 
        onPress={() => api.cart.setAttributedStaffToLineItem(123456, 'aa-1234567')}
      />
    );
  };

  export default reactExtension(
    'pos.home.tile.render',
    () => <SmartGridTile />
  );
  ```

  ##### TS

  ```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: 'Call cart function',
      enabled: true,
      onPress: () => {
        api.cart.setAttributedStaffToLineItem(123456, 'aa-1234567');
      },
    });

    root.append(tile);
  });
  ```

* #### Add an address to the customer in the cart

  ##### React

  ```tsx

  import React from 'react';
  import {
    reactExtension,
    useApi,
    Tile
  } from '@shopify/ui-extensions-react/point-of-sale';

  const SmartGridTile = () => {
    const api = useApi<'pos.home.tile.render'>();

    return (
      <Tile 
        title='My App' 
        subtitle='Call cart function' 
        enabled 
        onPress={() => api.cart.addAddress({
          address1: '123456 Main Street', 
          city: 'Ottawa', 
          province: 'Ontario',
          firstName: 'John',
          lastName: 'Doe',
          country: 'Canada'
        })}
      />
    );
  };

  export default reactExtension(
    'pos.home.tile.render',
    () => <SmartGridTile />
  );
  ```

  ##### TS

  ```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: 'Call cart function',
      enabled: true,
      onPress: () => {
        api.cart.addAddress({
          address1: '123456 Main Street',
          city: 'Ottawa',
          province: 'Ontario',
          firstName: 'John',
          lastName: 'Doe',
          country: 'Canada',
        });
      },
    });

    root.append(tile);
  });
  ```

* #### Delete an address corresponding to an ID

  ##### React

  ```tsx

  import React from 'react';
  import {
    reactExtension,
    useApi,
    Tile
  } from '@shopify/ui-extensions-react/point-of-sale';

  const SmartGridTile = () => {
    const api = useApi<'pos.home.tile.render'>();

    return (
      <Tile 
        title='My App' 
        subtitle='Call cart function' 
        enabled 
        onPress={() => api.cart.deleteAddress(123456)}
      />
    );
  };

  export default reactExtension(
    'pos.home.tile.render',
    () => <SmartGridTile />
  );
  ```

  ##### TS

  ```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: 'Call cart function',
      enabled: true,
      onPress: () => {
        api.cart.deleteAddress(123456);
      },
    });

    root.append(tile);
  });
  ```

* #### Set the default address of the customer in the cart

  ##### React

  ```tsx

  import React from 'react';
  import {
    reactExtension,
    useApi,
    Tile
  } from '@shopify/ui-extensions-react/point-of-sale';

  const SmartGridTile = () => {
    const api = useApi<'pos.home.tile.render'>();

    return (
      <Tile 
        title='My App' 
        subtitle='Call cart function' 
        enabled 
        onPress={() => api.cart.updateDefaultAddress(123456)}
      />
    );
  };

  export default reactExtension(
    'pos.home.tile.render',
    () => <SmartGridTile />
  );
  ```

  ##### TS

  ```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: 'Call cart function',
      enabled: true,
      onPress: () => {
        api.cart.updateDefaultAddress(123456);
      },
    });

    root.append(tile);
  });
  ```