Cart Page
The cart template displays the customer’s shopping cart with line items, quantity controls, discounts, cart notes, and order summary.
Setup Order
- Choose cart typeOpen Theme settings > Cart and choose Page or Drawer.
- Configure cart featuresReview discount-code entry, cart notes, installment messaging, accelerated checkout, and drawer open behavior.
- Review cart page blocksOpen the Cart template and review Cart title, Cart products, and Cart summary blocks.
- Test cart updatesAdd products, change quantities, remove items, apply discounts, and empty the cart.
- Review checkout handoffConfirm the checkout button and accelerated checkout buttons are clear and reachable on mobile.
Default Layout
The cart page includes:
- Cart title — Heading with item count.
- Line items — Each product in the cart with image, title, variant, price, and quantity controls.
- Cart summary — Subtotal, discount codes, cart notes, and checkout button.
Features
Line Items
Each cart item displays:
- Product image linked to the product page
- Product title and variant name
- Unit price and line total
- Quantity selector with increment/decrement buttons
- Remove button
- Selling plan name if a subscription plan was selected
Discount Codes
Customers can enter discount codes directly on the cart page. Applied discounts are shown on the relevant line items and in the summary.
Discount-code entry can be enabled or disabled in Theme settings > Cart. Removing an applied code updates the cart without a full page reload.
Cart Notes
An optional text area lets customers add order notes or special instructions.
Cart Drawer
In addition to the cart page, Fit Check includes a cart drawer that slides in from the side. The cart drawer provides the same functionality without leaving the current page.
Configure the cart drawer in Theme settings > Cart.
Cart drawer settings include panel width, drawer heading size, product-list max height, cart notes, discount codes, installment messaging, accelerated checkout, and whether add-to-cart automatically opens the drawer.
Cart Page Layout
The cart page section includes desktop layout controls:
| Setting | Description |
|---|---|
| Panel max width | Maximum width of the cart panel on desktop. Range: 400-800px. Default: 520px. |
| Panel border radius | Corner rounding for the cart panel. Range: 0-40px. Default: 0. |
| Products area max height | Optional max height for line items. Set to 0 for automatic height. |
| Section width | Page width or full width. |
| Background color | Set the cart section background or leave blank to inherit the global page background. |
| Padding | Unified or independent top, bottom, left, and right padding. |
Blocks
| Block | Description |
|---|---|
| Cart title | Heading text for the cart section. |
| Cart products | The list of line items. |
| Cart summary | Subtotal, discounts, notes, and checkout button. |
Publish Checklist
- Add a product from the product template.
- Add a product from quick add if enabled.
- Change quantity and remove an item.
- Apply and remove a discount code.
- Try an invalid discount code and review the error state.
- Add and edit a cart note.
- Empty the cart and confirm the empty state has a useful continue-shopping path.
- Start checkout from desktop and mobile.