Choose a version:

useTarget
hook

Returns the cart line the extension is attached to. This is only applicable to the Checkout::CartLineDetails::RenderAfter extension point.

Anchor to useTarget
useTarget()

Anchor to useTarget-returnsReturns

PresentmentCartLine

id string: The ID of the present cart line. This ID isn't stable and might change after any operations on the line items.
quantity number: The quantity of the merchandise being purchased.
cost: The details about the cost components attributed to the presentment cart line.
title string: The title of the line item.
lines []: The merchandise lines being purchased.
subtitle string: The subtitle of the line item.
image: The image associated with the line item.

PresentmentCartLine

id
The ID of the present cart line. This ID isn't stable and might change after any operations on the line items.
```
string
```
quantity
The quantity of the merchandise being purchased.
```
number
```
cost
The details about the cost components attributed to the presentment cart line.
```
PresentmentCartLineCost
```
title
The title of the line item.
```
string
```
subtitle
The subtitle of the line item.
```
string
```
image
The image associated with the line item.
```
ImageDetails
```
lines
The merchandise lines being purchased.
```
CartLine[]
```

export interface PresentmentCartLine {
  /**
   * The ID of the present cart line. This ID isn't stable and might change after
   * any operations on the line items.
   * @example 'gid://shopify/PresentmentCartLine/123'
   */
  id: string;

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

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

  /**
   * The title of the line item.
   */
  title: string;

  /**
   * The subtitle of the line item.
   */
  subtitle?: string;

  /**
   * The image associated with the line item.
   */
  image?: ImageDetails;

  /**
   * The merchandise lines being purchased.
   */
  lines: CartLine[];
}

PresentmentCartLineCost

totalAmount
The total cost of the merchandise line.
```
Money
```

export interface PresentmentCartLineCost {
  /**
   * The total cost of the merchandise 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'

ImageDetails

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

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

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

CartLine

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
```
merchandise
The merchandise being purchased.
```
Merchandise
```
quantity
The quantity of the merchandise being purchased.
```
number
```
cost
The details about the cost components attributed to the cart line.
```
CartLineCost
```
attributes
The line item additional custom attributes.
```
Attribute[]
```
discountAllocations
Discounts applied to the cart line.
```
CartDiscountAllocation[]
```
lineComponents
Sub lines of the merchandise line. If no sub lines are present, this will be an empty array.
```
CartBundleLineComponent[]
```

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[];
}

Merchandise

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

ProductVariant

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

Product

id
A globally-unique identifier.
```
string
```
vendor
The product’s vendor name.
```
string
```
productType
A categorization that a product can be tagged with, commonly used for filtering and searching.
```
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;
}

SellingPlan

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

export interface SellingPlan {
  /**
   * A globally-unique identifier.
   * @example 'gid://shopify/SellingPlan/1'
   */
  id: 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;
}

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

CartDiscountAllocation

CartCodeDiscountAllocation | CartAutomaticDiscountAllocation | CartCustomDiscountAllocation

CartCodeDiscountAllocation

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

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

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

CartAutomaticDiscountAllocation

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

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

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

CartCustomDiscountAllocation

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

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

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

CartBundleLineComponent

type
```
"bundle"
```
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
```
cost
The cost attributed to this bundle line component.
```
CartLineCost
```
attributes
Additional custom attributes for the bundle line component.
```
Attribute[]
```

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[];
}

Was this section helpful?

React

import React from 'react';

import {

render,

Text,

useTarget,

} from '@shopify/checkout-ui-extensions-react';

render(

'Checkout::CartLineDetails::RenderAfter',

() => <Extension />,

);

function Extension() {

const {title} = useTarget();

return <Text>Line item title: {title}</Text>;

}

Examples

React

import React from 'react';
import {
  render,
  Text,
  useTarget,
} from '@shopify/checkout-ui-extensions-react';

render(
  'Checkout::CartLineDetails::RenderAfter',
  () => <Extension />,
);

function Extension() {
  const {title} = useTarget();
  return <Text>Line item title: {title}</Text>;
}

Anchor to relatedRelated

APIsCartLineDetailsApi

useTargethook

Anchor to useTargetuseTarget()

Anchor to useTarget-returnsReturns

PresentmentCartLine

PresentmentCartLine

PresentmentCartLineCost

Money

CurrencyCode

ImageDetails

CartLine

Merchandise

SelectedOption

Product

SellingPlan

CartLineCost

Attribute

CartDiscountAllocation

CartCodeDiscountAllocation

CartAutomaticDiscountAllocation

CartCustomDiscountAllocation

CartBundleLineComponent

Examples

React

Anchor to relatedRelated

useTarget
hook

Anchor to useTarget
useTarget()