This guide covers two related surfaces:
| Surface | When customers see it |
|---|---|
| Cart drawer | Opens as a slide-in panel when the customer clicks the cart icon in the header |
| Cart page | The full /cart page, reached by direct URL or from links that point to routes.cart_url |
The cart drawer is the primary cart interface in Fitcore: cart icon clicks open the drawer when JavaScript is available. The cart page is the fallback that customers see when they navigate directly to /cart, when JavaScript is disabled, or when they are sent there from external links (such as Shop Pay error returns or app integrations).
Both surfaces show the same items, but they are configured separately. The drawer's settings live in Theme settings, Cart drawer. The cart page is configured by editing the cart template in the theme editor.
Cart drawer
What it shows
| Element | Source |
|---|---|
| Free shipping bar | Optional. Shows progress toward your free shipping threshold |
| Line items | Image, product title, variant options, line item properties, quantity stepper, line price |
| Sale comparison | When the line price is lower than the compare-at price, both are shown |
| Selling plan name | When the line item uses a subscription, the plan name appears below the variant |
| Discount applications | Line item discounts (when applicable) |
| Cart note | Optional textarea for the customer to leave a note |
| Cart total | Subtotal of all line items |
| Checkout button | Primary call to action |
| Accelerated checkout buttons | Shop Pay, PayPal, Google Pay, Apple Pay (depending on what is enabled in your Shopify admin) |
Cart drawer settings
These settings are global. They apply to the cart drawer everywhere it appears. Find them in the theme editor under Theme settings, Cart drawer.
| Setting | Default | What it controls |
|---|---|---|
| Show free shipping bar | On | Display the free shipping progress bar at the top of the drawer |
| Free shipping threshold | 50 | The cart subtotal required to qualify for free shipping. Enter the amount in your store currency (for example, 50 for $50.00) |
| Show cart note | On | Display the cart note textarea below the line items |
| Continue shopping link | Empty | The URL the "Continue shopping" link inside the drawer points to. Leave empty to hide this link |
Free shipping bar behavior
The free shipping bar shows a progress bar and a message that updates as the customer adds items.
- Below threshold: shows how much more the customer needs to spend to qualify ("Add $12.00 more for free shipping").
- At or above threshold: shows a confirmation message ("You qualify for free shipping").
The bar uses cart.total_price (sum of line item prices after line-level discounts, excluding shipping and taxes calculated at checkout). The threshold is a single value entered in your store's primary currency. The bar does not automatically convert the threshold for other markets or currencies. If you sell in multiple currencies and want a market-specific threshold, you will need to handle that through Shopify Markets pricing rules and adjust the bar message in the theme locale files.
This bar is a display aid, not a guarantee. The actual shipping cost is calculated at checkout based on your Shopify shipping rules. Make sure your Shopify shipping settings include a free shipping rate that matches the threshold you display, or customers will see a discrepancy at checkout.
Cart drawer blocks
The cart drawer is rendered as a snippet, not a section. It does not accept blocks. Custom Liquid and app blocks for the cart belong on the cart page (covered below).
Cart page
What ships on the cart page
The default cart template contains two sections:
| # | Section | Purpose |
|---|---|---|
| 1 | Cart (main) | Line items, totals, checkout, and the empty state |
| 2 | Complementary products | Products that pair well with what is in the cart, based on cart contents. Driven by Shopify's recommendations API |
You can reorder, remove, or add sections from the theme editor.
Cart section settings
| Setting | Default | What it controls |
|---|---|---|
| Color scheme | Scheme 1 | Color scheme applied to the section |
| Show cart note | On | Display the cart note textarea below the line items |
| Empty state collection | Empty | A collection picker. When set, the empty cart state shows up to four products from this collection as suggestions |
| Padding top | 0 to 100 px in steps of 2 | 40 |
| Padding bottom | 0 to 100 px in steps of 2 | 40 |
Cart section blocks
| Block type | Limit | Purpose |
|---|---|---|
| Custom Liquid | Multiple | A code field for custom HTML or app-provided code snippets where appropriate |
| App block | Unlimited | An app insertion point. Apps you have installed can render their content here (for example, upsell apps, free gift apps, cart-stage promo apps) |
Empty cart state
When the cart has no items, the cart page shows:
- A cart icon
- An "Empty cart" heading and short description (translated through the theme locale files)
- A "Continue shopping" button that links to the empty state collection (if set) or to
/collections/all(if that route is available in the store) as a fallback
If you set an empty state collection in the section settings AND that collection has at least one product, the empty state also shows a "You may like" grid of up to four products from that collection. Customers can add directly from this grid via quick add. This converts dead empty-cart traffic into product discovery.
To customize the empty state copy, edit the locale strings under Online Store, Themes, Edit default theme content, Cart.
Line item display on the cart page
The cart page line item shows:
- Product image (linked to the product)
- Product title (linked to the product)
- Variant options (color, size, and so on)
- Custom line item properties (set by apps or by the gift card recipient form)
- SKU
- Selling plan name (for subscription items)
- Quantity selector (with decrement, input, and increment controls)
- Line item price, compared to compare-at price when the item is on sale
- Remove button
Customers can update quantities or remove items directly. The cart updates without a page reload.
Discounts
Discount codes are entered at checkout, not on the cart page. This matches Shopify's standard behavior.
Automatic discounts (configured in Shopify admin, Discounts) apply automatically and are shown on the line items and in the cart total. The discount title appears next to each affected line item.
Cart-level automatic discounts (such as "Spend $100, get 10% off") are shown above the cart total with the discount title and the amount discounted.
If you want a discount code field on the cart page, you can add a custom Liquid block with the relevant Shopify form. This is a customization, not a default Fitcore feature.
Accelerated checkout
The accelerated checkout buttons (Shop Pay, PayPal, Google Pay, Apple Pay) appear below the regular Checkout button on both the cart drawer and the cart page when:
- The customer's browser supports the relevant payment method.
- The merchant has enabled the payment method in Shopify admin, Settings, Payments.
Buttons may not render in the cart drawer in all browsers; Shopify controls availability per context. These buttons are rendered through Shopify's content_for_additional_checkout_buttons Liquid object on the cart page. Their colors and labels are controlled by the payment provider, not by Fitcore (per Shopify policy).
Tax and shipping
The cart page and drawer do not show tax breakdowns or shipping costs. These are calculated at checkout. The cart total reflects the line item subtotal only.
If your store uses tax-inclusive pricing (set in Shopify admin, Settings, Markets per market), the prices shown on the cart already include tax. A "Tax included" note appears near the total when this is the case.
Cart note
The cart note is a textarea where customers can leave instructions for your team (gift wrapping requests, special handling, allergies, and so on). The note is included with the order in your Shopify admin.
The cart note appears on:
- The cart drawer (if Show cart note is on in cart drawer settings)
- The cart page (if Show cart note is on in cart section settings)
Both settings default to On. The note text is shared between the drawer and page (it is the same Shopify cart object), so a note typed in the drawer carries over to the page and vice versa.
Multi-language and multi-currency
- Cart line item titles and variant option values reflect the customer's selected language (translated through Shopify's translation system).
- Prices update automatically based on the customer's selected market and currency.
- Free shipping threshold values are entered in your store's primary currency and are not automatically converted (see "Free shipping bar behavior" above).
- Cart note placeholder, "Continue shopping" button text, and similar UI strings are translated through the theme's locale files.
See markets-localization.md for the full localization workflow.
What to do next
| If you want to | Read |
|---|---|
| Set up the list collections page | template-list-collections.md |
| Configure search behavior | template-search.md |
| Set up complementary products and recommendations | sections-product-display.md |
| Configure trust badges | sections-promotional.md |
End of template-cart.md.