shopify-cart
component

The cart component provides a mini shopping cart functionality for your website. Here's how it works:

Add a button component inside a shopify-context component that's associated with a product.
Call the addLine() method in the button component's onclick attribute to add the product to the customer's cart.
- This method requires an event object or a product data object.
- If using an event, the event target must be inside a product context component.
Display the cart using a native HTML <dialog> element.
- To show it as a popup modal, call the showModal() method.
Apply discount codes automatically using the discountCodes attribute.
- Pass a comma-separated list of discount codes that will be automatically applied to the cart.
Customize the cart's styling and content with CSS parts and slots. View examples

Note

The cart component doesn't support mixing products from multiple stores.

Anchor to attributes and propertiesAttributes and properties

Anchor to addLine addLine (source: ) =>: A method to add an item to the cart. The source can either be an event triggered from an element within a product context or a product object with a variant id.
Anchor to close close () =>: A method to close the cart dialog.
Anchor to open open boolean: A property to get the open state of the cart.

Example: getElementById('cart').open
Anchor to show show () =>: A method to display the cart as a modal in a dialog element modelessly.
Anchor to showModal showModal () =>: A method to display the underlying cart as a modal in a dialog element.
Anchor to target target string: The target attribute for the checkout link. Defaults to "_top".

CartAttributes

addLine
A method to add an item to the cart. The source can either be an event triggered from an element within a product context or a product object with a variant id.
```
(source: CartLineSource) => CartAttributes
```
close
A method to close the cart dialog.
```
() => CartAttributes
```
open
A property to get the open state of the cart. Example: `getElementById('cart').open`
```
boolean
```
show
A method to display the cart as a modal in a [`dialog` element modelessly](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/show).
```
() => CartAttributes
```
showModal
A method to display the underlying [cart as a modal](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal) in a `dialog` element.
```
() => CartAttributes
```
target
The [target attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target) for the checkout link. Defaults to "_top".
```
string
```

interface CartAttributes {
  /** The [target attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target) for the checkout link. Defaults to "_top". */
  target?: string;

  /**
   * A property to get the open state of the cart.
   *
   * Example: `getElementById('cart').open`
   */
  open?: boolean;

  /**
   * A method to add an item to the cart. The source can either be an event triggered from an element within a product context or a product object with a variant id.
   */
  addLine?: (source: CartLineSource) => CartAttributes;

  /**
   * A method to display the underlying [cart as a modal](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal) in a `dialog` element.
   */
  showModal?: () => CartAttributes;

  /**
   * A method to display the cart as a modal in a [`dialog` element modelessly](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/show).
   */
  show?: () => CartAttributes;

  /**
   * A method to close the cart dialog.
   */
  close?: () => CartAttributes;
}

CartLineSource

Either an event triggered from an element within a product context or a product to add to the cart.

EventWithinProductContext | ProductToAddToCart

EventWithinProductContext

An event triggered from an element within a product context. The selected product is calculated from the event target by looking for the closest product context upward in the DOM. It automatically uses whatever variant is selected by any `<shopify-variant-selector>` in the product context.

target
```
HTMLElement
```

{ target: HTMLElement }

ProductToAddToCart

A product to add to the cart.

quantity
The quantity of the product to add to the cart.
```
number
```
sellingPlanId
The selling plan ID of the product to add to the cart. Only use for selling subscriptions.
```
string
```
variantId
The variant ID of the product to add to the cart.
```
string
```

{
  /** The variant ID of the product to add to the cart. */
  variantId: string;

  /** The quantity of the product to add to the cart. */
  quantity: number;

  /** The selling plan ID of the product to add to the cart. Only use for selling subscriptions. */
  sellingPlanId?: string;
}

Was this section helpful?

Anchor to css partsCSS parts

CSS parts allow you to target and override the default styling within the cart component.

Anchor to dialog dialog: The dialog element.
Anchor to discount-code discount-code: Discount code label.
Anchor to discount-error discount-error: Discount error message.
Anchor to input-field input-field: Input field. Used to style the input field that applies a discount code.
Anchor to line-heading line-heading: The cart line-item title element.
Anchor to line-image line-image: The cart line-item image element.
Anchor to line-options line-options: The cart line-item options element.
Anchor to line-price line-price: The cart line-item quantity element.
Anchor to primary-button primary-button: The primary button element. Used to style the checkout link.
Anchor to secondary-button secondary-button: The secondary button element. Used to style the buttons that modify a cart-line item.
Anchor to tertiary-button tertiary-button: The tertiary button element. Used to style the button that applies a discount code.

CartParts

dialog
The dialog element.
```
CSSPart
```
discount-code
Discount code label.
```
CSSPart
```
discount-error
Discount error message.
```
CSSPart
```
input-field
Input field. Used to style the input field that applies a discount code.
```
CSSPart
```
line-heading
The cart line-item title element.
```
CSSPart
```
line-image
The cart line-item image element.
```
CSSPart
```
line-options
The cart line-item options element.
```
CSSPart
```
line-price
The cart line-item quantity element.
```
CSSPart
```
primary-button
The primary button element. Used to style the checkout link.
```
CSSPart
```
secondary-button
The secondary button element. Used to style the buttons that modify a cart-line item.
```
CSSPart
```
tertiary-button
The tertiary button element. Used to style the button that applies a discount code.
```
CSSPart
```

interface CartParts {
  /** The dialog element. */
  dialog?: CSSPart;

  /** The primary button element. Used to style the checkout link. */
  "primary-button"?: CSSPart;

  /** The cart line-item image element. */
  "line-image"?: CSSPart;

  /** The cart line-item title element. */
  "line-heading"?: CSSPart;

  /** The cart line-item options element. */
  "line-options"?: CSSPart;

  /** The secondary button element. Used to style the buttons that modify a cart-line item. */
  "secondary-button"?: CSSPart;

  /** The tertiary button element. Used to style the button that applies a discount code. */
  "tertiary-button"?: CSSPart;

  /** The cart line-item quantity element. */
  "line-price"?: CSSPart;

  /** Input field. Used to style the input field that applies a discount code. */
  "input-field"?: CSSPart;

  /** Discount code label. */
  "discount-code"?: CSSPart;

  /** Discount error message. */
  "discount-error"?: CSSPart;
}

CSSPart

A [`::part` CSS pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) allowing you to target and override the default styling within the component.

string

Was this section helpful?

Anchor to slotsSlots

Slots allow you to override the default content of the cart component.

Anchor to apply-discount-button apply-discount-button: The content to display in the apply discount button. Useful to add a custom apply discount button text.
Anchor to checkout-button checkout-button: The content to display in the checkout button. Useful to add a custom checkout button text.
Anchor to discount-apply-error discount-apply-error: The content to display when a discount code cannot be applied. Useful to add a custom error message for internationalization
Anchor to discounts-title discounts-title: The title of the discount section. Useful to add a custom discount section title for internationalization
Anchor to empty empty: The content to display when the cart is empty.
Anchor to extension extension: Extend the cart with additional content below the checkout button. Useful to add upsell products or other content.

CartSlots

apply-discount-button
The content to display in the apply discount button. Useful to add a custom apply discount button text.
```
SlotElement
```
checkout-button
The content to display in the checkout button. Useful to add a custom checkout button text.
```
SlotElement
```
discount-apply-error
The content to display when a discount code cannot be applied. Useful to add a custom error message for internationalization
```
SlotElement
```
discounts-title
The title of the discount section. Useful to add a custom discount section title for internationalization
```
SlotElement
```
empty
The content to display when the cart is empty.
```
SlotElement
```
extension
Extend the cart with additional content below the checkout button. Useful to add upsell products or other content.
```
SlotElement
```

interface CartSlots {
  /** The content to display when the cart is empty. */
  empty?: SlotElement;

  /** The content to display in the checkout button. Useful to add a custom checkout button text. */
  "checkout-button"?: SlotElement;

  /** The content to display in the apply discount button. Useful to add a custom apply discount button text. */
  "apply-discount-button"?: SlotElement;

  /** The title of the discount section. Useful to add a custom discount section title for internationalization */
  "discounts-title"?: SlotElement;

  /** The content to display when a discount code cannot be applied. Useful to add a custom error message for internationalization */
  "discount-apply-error"?: SlotElement;

  /** Extend the cart with additional content below the checkout button. Useful to add upsell products or other content. */
  extension?: SlotElement;
}

SlotElement

A slot element allows you to override the default content of the component. Read more on the [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot).

string

Was this section helpful?

Example

HTML

<shopify-store

store-domain="https://your-store.myshopify.com"

</shopify-store>

<shopify-context

type="product"

handle="handle-of-product"

<shopify-variant-selector></shopify-variant-selector>

<!-- The product added will be whatever

variant is selected for the context product handle -->

<button

onclick="getElementById('cart').addLine(event).showModal();"

Add to cart

</button>

</template>

</shopify-context>

<shopify-cart id="cart"></shopify-cart>

examples

example

description

This is the default example

HTML

<shopify-store
  store-domain="https://your-store.myshopify.com"
>
</shopify-store>

<!-- The context is bound to the store -->
<shopify-context
  type="product"
  handle="handle-of-product"
>
<template>
  <shopify-variant-selector></shopify-variant-selector>
  <!-- The product added will be whatever
  variant is selected for the context product handle -->
  <button
    onclick="getElementById('cart').addLine(event).showModal();"
  >
    Add to cart
  </button>
</template>
</shopify-context>

<shopify-cart id="cart"></shopify-cart>

Anchor to examplesExamples

Anchor to example-customize-the-cart-with-css-parts-and-slotsCustomize the cart with CSS parts and slots

Add <div> tags with slot attributes to show custom content on the empty state and checkout button. Add a <style> tag to include CSS parts that change the default styling of the cart's dialog, primary buttons, and secondary buttons.

Anchor to example-manually-add-a-product-to-the-cartManually add a product to the cart

Add a product to the cart without a product context. This is useful if you already have a product GID.

Anchor to example-apply-discount-codes-automaticallyApply discount codes automatically

Automatically apply discount codes to the cart by setting the discount-codes attribute. The discount codes will be applied whenever items are added, removed, or updated in the cart.

Was this section helpful?

Customize the cart with CSS parts and slots

HTML

<shopify-cart>

Ihr Warenkorb ist leer

</div>

Zur Kasse

</div>

Anwenden

</div>

Rabatte

</div>

Dieser Rabattcode kann nicht angewendet werden.

</div>

</shopify-cart>

<style>

shopify-cart::part(dialog) {

border-radius: 0.5rem;

}

shopify-cart::part(primary-button) {

background-color: #627059;

border: 0;

border-radius: 0;

color: #ffffff;

font-size: 0.875rem;

font-weight: 500;

}

shopify-cart::part(secondary-button) {

background-color: #ffffff;

color: #000;

fill: #000;

border: 2px solid #000;

border-radius: 0;

}

shopify-cart::part(tertiary-button) {

background-color: #ffffff;

color: #000;

fill: #000;

border: 2px solid #000;

border-radius: 0;

}

shopify-cart::part(discount-code) {

background-color: #ffffff;

color: #000;

fill: #000;

border: 2px solid #000;

border-radius: 0;

}

</style>

examples

Customize the cart with CSS parts and slots

description

Add `<div>` tags with `slot` attributes to show custom content on the empty state and checkout button. Add a `<style>` tag to include CSS parts that change the default styling of the cart's dialog, primary buttons, and secondary buttons.

HTML

<shopify-cart>
  <!-- Override the empty state with translated text -->
  <div slot="empty">
    Ihr Warenkorb ist leer
  </div>
  <!-- Override the checkout button with translated text -->
  <div slot="checkout-button">
    Zur Kasse
  </div>
  <!-- Override the apply discount button with translated text -->
  <div slot="apply-discount-button">
    Anwenden
  </div>
  <!-- Override the discounts section title with translated text -->
  <div slot="discounts-title">
    Rabatte
  </div>

  <!-- Override the discount apply error message with translated text -->
  <div slot="discount-apply-error">
    Dieser Rabattcode kann nicht angewendet werden.
  </div>
</shopify-cart>

<style>
  shopify-cart::part(dialog) {
    border-radius: 0.5rem;
  }
  shopify-cart::part(primary-button) {
    background-color: #627059;
    border: 0;
    border-radius: 0;
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 500;
  }
  shopify-cart::part(secondary-button) {
    background-color: #ffffff;
    color: #000;
    fill: #000; 
    border: 2px solid #000;
    border-radius: 0;
  }
  shopify-cart::part(tertiary-button) {
    background-color: #ffffff;
    color: #000;
    fill: #000; 
    border: 2px solid #000;
    border-radius: 0;
  }
  shopify-cart::part(discount-code) {
    background-color: #ffffff;
    color: #000;
    fill: #000; 
    border: 2px solid #000;
    border-radius: 0;
  }
</style>

Manually add a product to the cart

description

Add a product to the cart without a product context. This is useful if you already have a product GID.

HTML

<shopify-store
  store-domain="hydrogen-preview.myshopify.com"
>
</shopify-store>

<shopify-cart id="cart"></shopify-cart>

<button onclick="addToCart()">Add to cart</button>

<script>
  function addToCart() {
    const product = {
      variantId:
        "gid://shopify/ProductVariant/46565423349816",
      quantity: 1,
      // Optionally pass a sellingPlanId for subscriptions
      sellingPlanId:
        "gid://shopify/SellingPlan/8448376888",
    };

    document
      .getElementById("cart")
      // Manually add any product variant to the cart
      .addLine(product)
      .showModal();
  }
</script>

Apply discount codes automatically

description

Automatically apply discount codes to the cart by setting the `discount-codes` attribute. The discount codes will be applied whenever items are added, removed, or updated in the cart.

HTML

<shopify-store
  store-domain="https://your-store.myshopify.com"
>
</shopify-store>

<!-- Product context for adding items to cart -->
<shopify-context type="product" handle="handle-of-product">
  <template>
    <h3><shopify-data query="product.title"></shopify-data></h3>
    <p>Price: <shopify-money query="product.selectedOrFirstAvailableVariant.price"></shopify-money></p>
    
    <button 
      onclick="getElementById('cart').addLine(event); getElementById('cart').show();"
      shopify-attr--disabled="!product.selectedOrFirstAvailableVariant.availableForSale"
    >
      Add to cart
    </button>
  </template>
</shopify-context>

<!-- Cart with automatic discount codes -->
<shopify-cart 
  id="cart" 
  discount-codes="SAVE20,FREE-SHIPPING,WELCOME10">
</shopify-cart>

shopify-cartcomponent

Anchor to attributes and propertiesAttributes and properties

CartAttributes

CartLineSource

EventWithinProductContext

ProductToAddToCart

Anchor to css partsCSS parts

CartParts

CSSPart

Anchor to slotsSlots

CartSlots

SlotElement

examples

example

description

HTML

Anchor to examplesExamples

examples

Customize the cart with CSS parts and slots

description

HTML

Manually add a product to the cart

description

HTML

Apply discount codes automatically

description

HTML

shopify-cart
component