Skip to main content

shopify-cart
component

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

  1. Add a button component inside a shopify-context component that's associated with a product.

  2. 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.
  3. Display the cart using a native HTML <dialog> element.

    • To show it as a popup modal, call the showModal() method.
  4. Apply discount codes automatically using the discountCodes attribute.

    • Pass a comma-separated list of discount codes that will be automatically applied to the cart.
  5. 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

(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.

() =>

A method to open the checkout popup window.

() =>

A method to close the cart dialog.

boolean

A property to get the open state of the cart.

Example: getElementById('cart').open

() =>

A method to display the cart as a modal in a dialog element modelessly.

() =>

A method to display the underlying cart as a modal in a dialog element.

string

The target attribute for the checkout link. Defaults to "_top".

Was this section helpful?

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

The dialog element.

Discount code label.

Discount error message.

Input field. Used to style the input field that applies a discount code.

The cart line-item title element.

The cart line-item image element.

The cart line-item options element.

The cart line-item quantity element.

The primary button element. Used to style the checkout link.

The secondary button element. Used to style the buttons that modify a cart-line item.

The tertiary button element. Used to style the button that applies a discount code.

Was this section helpful?

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.

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

The title of the discount section. Useful to add a custom discount section title for internationalization

The content to display when the cart is empty.

Extend the cart with additional content below the checkout button. Useful to add upsell products or other content.

Was this section helpful?

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 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.

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

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>
<!-- 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>