Cart Summary

Auto-generate your docs

Overview

The cart-summary snippet renders the cart totals section, including subtotal, discounts, estimated total, cart notes, discount code input, and checkout buttons. File Location: snippets/cart-summary.liquid

Parameters

string

Layout for additional checkout buttons (e.g., Apple Pay, Google Pay).Options: 'vertical' | 'horizontal'Default: Determined by Shopify platform

string

The section ID for the cart discount component. Used for proper morphing updates.

Usage

Basic Example

{% render 'cart-summary' %}

With Parameters

{% render 'cart-summary',
  accelerated_checkout_buttons_layout: 'vertical',
  section_id: section.id
%}

In Cart Block

_cart-summary.liquid (block)

<div class="cart-summary {{ cart_summary_inner_class }}">
  {% render 'cart-summary', 
    accelerated_checkout_buttons_layout: 'vertical', 
    section_id: section.id 
  %}
</div>

Features

Cart Totals Display

The snippet displays cart totals with support for discounts:

{%- if cart.cart_level_discount_applications.size > 0 -%}
  <span class="cart-totals__item cart-totals__original">
    <span class="cart-totals__original-label">
      {{ 'content.cart_subtotal' | t }}
    </span>
    <span class="cart-totals__original-value">
      {{ cart.items_subtotal_price | money }}
    </span>
  </span>
{%- endif -%}

<ul class="cart-discounts" role="list">
  {%- for discount in cart.cart_level_discount_applications -%}
    <li class="cart-discounts__item">
      <span class="cart-discounts__label">
        {{- 'icon-discount.svg' | inline_asset_content -}}
        {{ discount.title | escape }}
      </span>
      <span class="cart-discounts__value">
        -{{ discount.total_allocated_amount | money }}
      </span>
    </li>
  {%- endfor -%}
</ul>

<span class="cart-totals__total">
  <span class="cart-totals__total-label">
    {{ 'content.cart_estimated_total' | t }}
  </span>
  <text-component
    ref="cartTotal"
    value="{{ total_price | strip_html }}"
    data-cart-subtotal
  >
    {{ total_price }}
  </text-component>
</span>

Currency Display

Currency codes can be shown based on settings:

cart-summary.liquid

{%- liquid
  if settings.currency_code_enabled_cart_total
    assign total_price = cart.total_price | money_with_currency
  else
    assign total_price = cart.total_price | money
  endif
-%}

Cart Note

Optional cart note field with accordion UI:

cart-summary.liquid

{% if settings.show_cart_note %}
  <cart-note style="display: flex;">
    <accordion-custom
      class="cart-note"
      {% if settings.cart_note_open_by_default %}
        open-by-default-on-desktop
        open-by-default-on-mobile
      {% endif %}
    >
      <details {% if settings.cart_note_open_by_default %}open{% endif %}>
        <summary class="cart-note__summary">
          <span class="cart-note__label">
            {{ 'content.seller_note' | t }}
          </span>
          <span class="cart-totals__icon">
            {{- 'icon-plus.svg' | inline_asset_content -}}
          </span>
        </summary>
        <div class="details-content cart-note__inner">
          <textarea
            form="cart-form"
            on:input="/updateCartNote"
            id="cart-note"
            class="cart-note__instructions"
            name="note"
          >{{ cart.note }}</textarea>
        </div>
      </details>
    </accordion-custom>
  </cart-note>
{% endif %}

Settings:

settings.show_cart_note - Enable/disable cart note
settings.cart_note_open_by_default - Whether accordion starts open

Discount Code Input

Discount code application with error handling:

cart-summary.liquid

{% if settings.show_add_discount_code %}
  <cart-discount-component data-section-id="{{ section_id }}">
    <div class="cart-discount__content">
      <form
        on:submit="/applyDiscount"
        onsubmit="return false;"
        class="cart-discount__form"
      >
        <input
          id="cart-discount"
          class="cart-discount__input"
          type="text"
          name="discount"
          placeholder="{{ 'content.discount_code' | t }}"
          required
        >
        <button type="submit" class="button cart-discount__button">
          {{ 'actions.apply' | t }}
        </button>
      </form>
    </div>
  </cart-discount-component>
{% endif %}

Applied Discount Pills

Shows currently applied discount codes with remove option:

cart-summary.liquid

<ul class="cart-discount__codes">
  {% for discount_code in discount_codes %}
    <li
      class="cart-discount__pill"
      data-discount-code="{{ discount_code }}"
    >
      <p class="cart-discount__pill-code">
        {{ discount_code }}
      </p>
      <button
        type="button"
        on:click="/removeDiscount"
        class="cart-discount__pill-remove"
        aria-label="{{ 'actions.remove_discount' | t: code: discount_code }}"
      >
        {{- 'icon-filters-close.svg' | inline_asset_content -}}
      </button>
    </li>
  {% endfor %}
</ul>

Payment Installments

Optional payment terms display:

cart-summary.liquid

{% if settings.show_installments %}
  <span class="cart-totals__installments">
    {% form 'cart', cart %}
      {{ form | payment_terms }}
    {% endform %}
  </span>
{% endif %}

Tax Information

Shows tax and shipping information:

cart-summary.liquid

<div class="cart-totals__tax-note">
  {% render 'tax-info', 
    has_discounts_enabled: settings.show_add_discount_code 
  %}
</div>

Checkout Buttons

Primary checkout button with support for additional payment methods:

<button
  type="submit"
  id="checkout"
  class="cart__checkout-button button"
  name="checkout"
  {% if cart == empty %}
    disabled
  {% endif %}
  form="cart-form"
>
  <span class="button-text">
    {{ 'content.checkout' | t }}
  </span>
</button>

{% if additional_checkout_buttons and settings.show_accelerated_checkout_buttons %}
  <div
    class="
      additional-checkout-buttons
      {% if accelerated_checkout_buttons_layout == 'vertical' %}
        additional-checkout-buttons--vertical
      {% endif %}
    "
  >
    {{ content_for_additional_checkout_buttons }}
  </div>
{% endif %}

Theme Settings

The snippet behavior is controlled by several theme settings:

boolean

Enable the cart note textarea

boolean

Whether cart note accordion starts expanded

boolean

Enable discount code input field

boolean

Display payment installment options (e.g., “4 interest-free payments”)

boolean

Show additional checkout buttons (Apple Pay, Google Pay, etc.)

boolean

Show currency codes (e.g., “USD”) in cart total

Styling

The snippet includes comprehensive scoped styles:

Layout Structure

.cart-totals {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xl);
  width: 100%;
}

.cart-totals__container {
  display: flex;
  flex-direction: column;
  row-gap: var(--gap-2xs);
}

Cart Actions (Notes & Discounts)

.cart-actions {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-block: 1px solid var(--color-border);
  padding-block: 0;
  margin-block-start: var(--margin-3xs);
}

Typography

.cart-totals__total-label {
  font-size: var(--cart-font-size--sm);
}

.cart-totals__total-value {
  font-size: var(--cart-font-size--xl);
  
  @media screen and (max-width: 749px) {
    font-size: var(--font-size--lg);
  }
}

Data Attributes

Key data attributes for JavaScript interaction:

attribute

Cart subtotal value for testing

attribute

Cart total value for testing

attribute

Used by payment terms web component

attribute

Section ID for cart discount component

attribute

Discount code value on pill elements

Examples

<div class="cart-drawer__summary">
  {% render 'cart-summary',
    accelerated_checkout_buttons_layout: 'vertical',
    section_id: section.id
  %}
</div>

<div class="cart-page__summary">
  {% render 'cart-summary',
    section_id: section.id
  %}
</div>

<cart-component>
  <div class="ajax-cart__summary">
    {% render 'cart-summary',
      accelerated_checkout_buttons_layout: 'vertical'
    %}
  </div>
</cart-component>

Accessibility

The snippet includes several accessibility features:

Role Attributes: role="list" on discount lists, role="status" on totals
ARIA Labels: Descriptive labels for form inputs and buttons
Visual Hidden Text: Screen reader context for prices
Focus Management: Keyboard navigation support in accordions

<label for="cart-discount" class="visually-hidden">
  {{- 'accessibility.discount' | t -}}
</label>

cart-products.liquid - Cart line items display
tax-info.liquid - Tax and shipping information
Add to Cart Button - Product add to cart functionality

⌘I

Sections

Blocks

Snippets

Web Components

Overview

Parameters

Usage

Basic Example

With Parameters

In Cart Block

Features

Cart Totals Display

Currency Display

Cart Note

Discount Code Input

Applied Discount Pills

Payment Installments

Tax Information

Checkout Buttons

Theme Settings

Styling

Layout Structure

Cart Actions (Notes & Discounts)

Typography

Data Attributes

Examples

Accessibility

​Overview

​Parameters

​Usage

​Basic Example

​With Parameters

​In Cart Block

​Features

​Cart Totals Display

​Currency Display

​Cart Note

​Discount Code Input

​Applied Discount Pills

​Payment Installments

​Tax Information

​Checkout Buttons

​Theme Settings

​Styling

​Layout Structure

​Cart Actions (Notes & Discounts)

​Typography

​Data Attributes

​Examples

​Accessibility

​Related Snippets

Overview

Parameters

Usage

Basic Example

With Parameters

In Cart Block

Features

Cart Totals Display

Currency Display

Cart Note

Discount Code Input

Applied Discount Pills

Payment Installments

Tax Information

Checkout Buttons

Theme Settings

Styling

Layout Structure

Cart Actions (Notes & Discounts)

Typography

Data Attributes

Examples

Accessibility

Related Snippets