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
accelerated_checkout_buttons_layout
Layout for additional checkout buttons (e.g., Apple Pay, Google Pay).Options: 'vertical' | 'horizontal'Default: Determined by Shopify platform
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 -%}
Currency Display
Currency codes can be shown based on settings:
{%- 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:
{% 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.show_cart_note - Enable/disable cart notesettings.cart_note_open_by_default - Whether accordion starts open
Discount Code Input
Discount code application with error handling:
{% 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:
<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:
{% 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:
<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>
Theme Settings
The snippet behavior is controlled by several theme settings:
Enable the cart note textarea
settings.cart_note_open_by_default
Whether cart note accordion starts expanded
settings.show_add_discount_code
Enable discount code input field
settings.show_installments
Display payment installment options (e.g., “4 interest-free payments”)
settings.show_accelerated_checkout_buttons
Show additional checkout buttons (Apple Pay, Google Pay, etc.)
settings.currency_code_enabled_cart_total
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:
data-testid='cart-subtotal-value'
Cart subtotal value for testing
data-testid='cart-total-value'
Cart total value for testing
Used by payment terms web component
Section ID for cart discount component
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>
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>
Related Snippets
cart-products.liquid - Cart line items displaytax-info.liquid - Tax and shipping information- Add to Cart Button - Product add to cart functionality