The Cart Footer element is the closing section of your cart drawer. It provides essential information like the order total, applied discounts, and the primary Checkout button. Since it appears at the bottom of the cart, it's the customer's final step before proceeding to checkout, making it a crucial conversion driver.
The element is pre-configured by default, ensuring it works out of the box, but it can be fully styled and customized to match your store's brand.
Overview
The cart footer is where customers make their final decision to proceed to checkout. It needs to be clear, trustworthy, and easy to interact with.
What the Footer Includes
Component | Description |
Estimated total | Dynamic order total that updates as items change |
Discounts display | Applied vouchers and promotional codes |
Checkout button | Primary call-to-action to proceed to payment |
Additional info | Taxes, shipping estimates (optional) |
Inserting the Cart Footer Element
Step 1: Open the Insert Panel
Navigate to the Insert Panel in Instant.
Step 2: Locate the Footer Element
Go to Elements → Cart
Hover over the Cart category to expand the options
Select Cart Footer
Step 3: Drag into Cart Layout
Drag and drop the Footer element into your Cart Drawer Layout
It appears pre-configured and ready to use
Configuration
Estimated Total
By default, the footer displays the cart's estimated total. This updates dynamically as items are added or removed.
Display | Description |
Subtotal | Total before taxes and shipping |
Estimated total | Approximate final amount |
Dynamic updates | Changes in real time with cart modifications |
Discounts & Vouchers
The footer includes a repeater that shows applied discounts, vouchers, or promotional codes relevant to the order.
Discount Type | Display |
Percentage off | Shows discount amount |
Fixed amount | Shows savings value |
Free shipping | Indicates shipping discount |
Voucher codes | Displays applied codes |
Checkout Button
The footer comes with a Checkout button that has a default action already applied.
Setting | Default Behavior |
Action | Directs customers to Shopify checkout page |
Text | "Checkout" or customizable |
Styling | Fully customizable |
Styling Options
Property | Customization |
Typography | Font, size, weight for totals and button |
Colors | Background, text, button colors |
Spacing | Padding and margins |
Button style | Shape, size, hover effects |
Best Practices
Practice | Description |
Make checkout prominent | Use contrasting colors for the checkout button |
Show savings | Display discounts clearly to reinforce value |
Keep it clean | Avoid clutter that distracts from checkout |
Add trust signals | Consider adding payment icons nearby |
Quick Reference
Task | Action |
Insert Footer | Insert panel → Elements → Cart → Cart Footer |
Position in layout | Place at bottom of cart drawer |
Customize checkout button | Select button → Style and interaction options |
Style footer | Select element → Typography, colors, spacing |
Recommended Placement
Position | Element |
1 (Top) | Header |
2 | Reward bar |
3 | Product Items |
4 | Upsells / Add-ons |
5 (Bottom) | Footer |