The Header element is an essential component of the cart drawer, providing structure, navigation, and branding opportunities at the top of your cart layout. The element comes pre-configured and ready to use, requiring minimal setup.
Overview
The cart header provides key functionality and navigation for your cart drawer.
What the Header Includes
Component | Description |
Cart title | Displays "Your Cart" or custom text |
Close button | Allows customers to close the cart drawer |
Item count | Shows number of items in cart |
Branding area | Space for logo or brand elements |
Inserting the Header Element
Step 1: Open the Insert Panel
Navigate to the Insert Elements panel within the builder. This is where all cart-related elements are available.
Step 2: Locate the Header Element
Hover over the Cart section inside the Insert panel
A popover menu appears displaying all available cart elements
Select the Header element from this list
Step 3: Add the Header to Your Cart Drawer
Drag and drop the Header element into your Cart Drawer Layout
Place it at the top of the layout (above product items, reward bars, etc.)
Customization Options
Once inserted, you can customize the header to match your brand:
Property | Customization |
Title text | Change "Your Cart" to custom text |
Typography | Font, size, weight, color |
Background | Color or transparent |
Close button | Icon style, size, color |
Spacing | Padding and margins |
Quick Reference
Task | Action |
Insert header | Insert panel → Cart → Header → Drag to layout |
Position header | Place at top of cart drawer |
Customize title | Select header → Edit text content |
Style header | Select header → Style options in sidebar |
Recommended Placement
Position | Element |
1 (Top) | Header |
2 | Reward bar |
3 | Product items |
4 | Upsells |
5 (Bottom) | Footer |