Skip to main content

CartLines

The CartLines component iterates over each cart line and renders its children within a CartLineProvider for each cart line.

Example code​

import {
  CartLines,
  CartLineImage,
  CartLineProductTitle,
  CartLinePrice,
  Link,
} from '@shopify/hydrogen';

export function MyComponent() {
  return (
    <CartLines>
      <CartLineImage />
      <CartLineProductTitle />
      <CartLinePrice />
    </CartLines>
  );
}

export function MyComponentWithRenderProps() {
  return (
    <CartLines>
      {({merchandise}) => (
        <Link to={`/product/${merchandise.handle}`}>
          {merchandise.product.title}
        </Link>
      )}
    </CartLines>
  );
}

Props​

NameTypeDescription
as?"ul"A ReactNode element. Valid values: ul or undefined. If ul, then each child will be wrapped with a li element.
childrenReactNodeA ReactNode element.

Component type​

The CartLines component is a shared component, which means that it renders on both the server and the client. For more information about component types, refer to React Server Components.