Choose a version:

Cart Lines
API

The APIs for interacting with the cart lines.

Anchor to orderstatusapiOrderStatusApi

The API object provided to this and other customer-account.order-status extension targets.

Anchor to lines lines <[]> required: A list of lines containing information about the items the customer intends to purchase.

Docs_OrderStatus_CartLinesApi

lines
A list of lines containing information about the items the customer intends to purchase.
```
ReadonlySignalLike<CartLine[]>
```

export interface Docs_OrderStatus_CartLinesApi
  extends Pick<OrderStatusApi<any>, 'lines'> {}

ReadonlySignalLike

Represents a read-only value managed on the main thread that an extension can subscribe to. Example: Checkout uses this to manage the state of an object and communicate state changes to extensions running in a sandboxed web worker. This interface is compatible with Preact's ReadonlySignal: https://github.com/preactjs/signals/blob/a023a132a81bd4ba4a0bebb8cbbeffbd8c8bbafc/packages/core/src/index.ts#L700-L709

subscribe
```
(fn: (value: T) => void) => () => void
```
value
```
T
```

export interface ReadonlySignalLike<T> {
  readonly value: T;
  subscribe(fn: (value: T) => void): () => void;
}

CartLine

attributes
The line item additional custom attributes.
```
Attribute[]
```
cost
The details about the cost components attributed to the cart line.
```
CartLineCost
```
discountAllocations
Discounts applied to the cart line.
```
CartDiscountAllocation[]
```
id
These line item IDs are not stable at the moment, they might change after any operations on the line items. You should always look up for an updated ID before any call to `applyCartLinesChange` because you'll need the ID to create a `CartLineChange` object.
```
string
```
lineComponents
Sub lines of the merchandise line. If no sub lines are present, this will be an empty array.
```
CartBundleLineComponent[]
```
merchandise
The merchandise being purchased.
```
Merchandise
```
quantity
The quantity of the merchandise being purchased.
```
number
```

export interface CartLine {
  /**
   * These line item IDs are not stable at the moment, they might change after
   * any operations on the line items. You should always look up for an updated
   * ID before any call to `applyCartLinesChange` because you'll need the ID to
   * create a `CartLineChange` object.
   * @example 'gid://shopify/CartLine/123'
   */
  id: string;

  /**
   * The merchandise being purchased.
   */
  merchandise: Merchandise;

  /**
   * The quantity of the merchandise being purchased.
   */
  quantity: number;

  /**
   * The details about the cost components attributed to the cart line.
   */
  cost: CartLineCost;

  /**
   * The line item additional custom attributes.
   */
  attributes: Attribute[];

  /**
   * Discounts applied to the cart line.
   */
  discountAllocations: CartDiscountAllocation[];

  /**
   * Sub lines of the merchandise line. If no sub lines are present, this will be an empty array.
   */
  lineComponents: CartLineComponentType[];
}

Attribute

key
The key for the attribute.
```
string
```
value
The value for the attribute.
```
string
```

export interface Attribute {
  /**
   * The key for the attribute.
   */
  key: string;

  /**
   * The value for the attribute.
   */
  value: string;
}

CartLineCost

totalAmount
The total amount after reductions the buyer can expect to pay that is directly attributable to a single cart line.
```
Money
```

export interface CartLineCost {
  /**
   * The total amount after reductions the buyer can expect to pay that is directly attributable to a single
   * cart line.
   */
  totalAmount: Money;
}

Money

amount
The price amount.
```
number
```
currencyCode
The ISO 4217 format for the currency.
```
CurrencyCode
```

export interface Money {
  /**
   * The price amount.
   */
  amount: number;
  /**
   * The ISO 4217 format for the currency.
   * @example 'CAD' for Canadian dollar
   */
  currencyCode: CurrencyCode;
}

CurrencyCode

'AED' | 'AFN' | 'ALL' | 'AMD' | 'ANG' | 'AOA' | 'ARS' | 'AUD' | 'AWG' | 'AZN' | 'BAM' | 'BBD' | 'BDT' | 'BGN' | 'BHD' | 'BIF' | 'BMD' | 'BND' | 'BOB' | 'BOV' | 'BRL' | 'BSD' | 'BTN' | 'BWP' | 'BYN' | 'BZD' | 'CAD' | 'CDF' | 'CHE' | 'CHF' | 'CHW' | 'CLF' | 'CLP' | 'CNY' | 'COP' | 'COU' | 'CRC' | 'CUC' | 'CUP' | 'CVE' | 'CZK' | 'DJF' | 'DKK' | 'DOP' | 'DZD' | 'EGP' | 'ERN' | 'ETB' | 'EUR' | 'FJD' | 'FKP' | 'GBP' | 'GEL' | 'GHS' | 'GIP' | 'GMD' | 'GNF' | 'GTQ' | 'GYD' | 'HKD' | 'HNL' | 'HRK' | 'HTG' | 'HUF' | 'IDR' | 'ILS' | 'INR' | 'IQD' | 'IRR' | 'ISK' | 'JMD' | 'JOD' | 'JPY' | 'KES' | 'KGS' | 'KHR' | 'KMF' | 'KPW' | 'KRW' | 'KWD' | 'KYD' | 'KZT' | 'LAK' | 'LBP' | 'LKR' | 'LRD' | 'LSL' | 'LYD' | 'MAD' | 'MDL' | 'MGA' | 'MKD' | 'MMK' | 'MNT' | 'MOP' | 'MRU' | 'MUR' | 'MVR' | 'MWK' | 'MXN' | 'MXV' | 'MYR' | 'MZN' | 'NAD' | 'NGN' | 'NIO' | 'NOK' | 'NPR' | 'NZD' | 'OMR' | 'PAB' | 'PEN' | 'PGK' | 'PHP' | 'PKR' | 'PLN' | 'PYG' | 'QAR' | 'RON' | 'RSD' | 'RUB' | 'RWF' | 'SAR' | 'SBD' | 'SCR' | 'SDG' | 'SEK' | 'SGD' | 'SHP' | 'SLL' | 'SOS' | 'SRD' | 'SSP' | 'STN' | 'SVC' | 'SYP' | 'SZL' | 'THB' | 'TJS' | 'TMT' | 'TND' | 'TOP' | 'TRY' | 'TTD' | 'TWD' | 'TZS' | 'UAH' | 'UGX' | 'USD' | 'USN' | 'UYI' | 'UYU' | 'UYW' | 'UZS' | 'VES' | 'VND' | 'VUV' | 'WST' | 'XAF' | 'XAG' | 'XAU' | 'XBA' | 'XBB' | 'XBC' | 'XBD' | 'XCD' | 'XDR' | 'XOF' | 'XPD' | 'XPF' | 'XPT' | 'XSU' | 'XTS' | 'XUA' | 'XXX' | 'YER' | 'ZAR' | 'ZMW' | 'ZWL'

CartDiscountAllocation

CartCodeDiscountAllocation | CartAutomaticDiscountAllocation | CartCustomDiscountAllocation

CartCodeDiscountAllocation

code
The code for the discount
```
string
```
discountedAmount
The money amount that has been discounted from the order
```
Money
```
type
The type of the code discount
```
'code'
```

export interface CartCodeDiscountAllocation extends CartDiscountAllocationBase {
  /**
   * The code for the discount
   */
  code: string;

  /**
   * The type of the code discount
   */
  type: 'code';
}

CartAutomaticDiscountAllocation

discountedAmount
The money amount that has been discounted from the order
```
Money
```
title
The title of the automatic discount
```
string
```
type
The type of the automatic discount
```
'automatic'
```

export interface CartAutomaticDiscountAllocation
  extends CartDiscountAllocationBase {
  /**
   * The title of the automatic discount
   */
  title: string;

  /**
   * The type of the automatic discount
   */
  type: 'automatic';
}

CartCustomDiscountAllocation

discountedAmount
The money amount that has been discounted from the order
```
Money
```
title
The title of the custom discount
```
string
```
type
The type of the custom discount
```
'custom'
```

export interface CartCustomDiscountAllocation
  extends CartDiscountAllocationBase {
  /**
   * The title of the custom discount
   */
  title: string;

  /**
   * The type of the custom discount
   */
  type: 'custom';
}

CartBundleLineComponent

attributes
Additional custom attributes for the bundle line component.
```
Attribute[]
```
cost
The cost attributed to this bundle line component.
```
CartLineCost
```
id
A unique identifier for the bundle line component. This ID is not stable. If an operation updates the line items in any way, all IDs could change.
```
string
```
merchandise
The merchandise of this bundle line component.
```
Merchandise
```
quantity
The quantity of merchandise being purchased.
```
number
```
type
```
'bundle'
```

export interface CartBundleLineComponent {
  type: 'bundle';

  /**
   * A unique identifier for the bundle line component.
   *
   * This ID is not stable. If an operation updates the line items in any way, all IDs could change.
   *
   * @example 'gid://shopify/CartLineComponent/123'
   */
  id: string;

  /**
   * The merchandise of this bundle line component.
   */
  merchandise: Merchandise;

  /**
   * The quantity of merchandise being purchased.
   */
  quantity: number;

  /**
   * The cost attributed to this bundle line component.
   */
  cost: CartLineCost;

  /**
   * Additional custom attributes for the bundle line component.
   *
   * @example [{key: 'engraving', value: 'hello world'}]
   */
  attributes: Attribute[];
}

Merchandise

id
A globally-unique identifier.
```
string
```
image
Image associated with the product variant. This field falls back to the product image if no image is available.
```
ImageDetails
```
product
The product object that the product variant belongs to.
```
Product
```
requiresShipping
Whether or not the product requires shipping.
```
boolean
```
selectedOptions
List of product options applied to the variant.
```
SelectedOption[]
```
sellingPlan
The selling plan associated with the merchandise.
```
SellingPlan
```
sku
The product variant's sku.
```
string
```
subtitle
The product variant's subtitle.
```
string
```
title
The product variant’s title.
```
string
```
type
```
'variant'
```

ProductVariant

ImageDetails

altText
The alternative text for the image.
```
string
```
url
The image URL.
```
string
```

export interface ImageDetails {
  /**
   * The image URL.
   */
  url: string;

  /**
   * The alternative text for the image.
   */
  altText?: string;
}

Product

id
A globally-unique identifier.
```
string
```
productType
A categorization that a product can be tagged with, commonly used for filtering and searching.
```
string
```
vendor
The product’s vendor name.
```
string
```

export interface Product {
  /**
   * A globally-unique identifier.
   */
  id: string;

  /**
   * The product’s vendor name.
   */
  vendor: string;

  /**
   * A categorization that a product can be tagged with, commonly used for filtering and searching.
   */
  productType: string;
}

SelectedOption

name
The name of the merchandise option.
```
string
```
value
The value of the merchandise option.
```
string
```

export interface SelectedOption {
  /**
   * The name of the merchandise option.
   */
  name: string;

  /**
   * The value of the merchandise option.
   */
  value: string;
}

SellingPlan

id
A globally-unique identifier.
```
string
```

export interface SellingPlan {
  /**
   * A globally-unique identifier.
   * @example 'gid://shopify/SellingPlan/1'
   */
  id: string;
}

Was this section helpful?

Preact

import '@shopify/ui-extensions/preact';

import {render} from 'preact';

export default async () => {

render(<Extension />, document.body);

};

function Extension() {

const title =

shopify.target.value.merchandise?.title;

return (

<s-text>Line item title: {title}</s-text>

);

}

examples

Preact

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

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

function Extension() {
  const title =
    shopify.target.value.merchandise?.title;

  return (
    <s-text>Line item title: {title}</s-text>
  );
}

Cart LinesAPI

Anchor to orderstatusapiOrderStatusApi

Docs_OrderStatus_CartLinesApi

ReadonlySignalLike

CartLine

Attribute

CartLineCost

Money

CurrencyCode

CartDiscountAllocation

CartCodeDiscountAllocation

CartAutomaticDiscountAllocation

CartCustomDiscountAllocation

CartBundleLineComponent

Merchandise

ImageDetails

Product

SelectedOption

SellingPlan

examples

Preact

Cart Lines
API