Cart Drawer layout and header
This page covers the structural settings of the ConvertX Cart Drawer: the header, title, empty cart state, drawer width, colors, and shell styling.
Use this page together with How to add Cart Drawer.
What you can customize
Core layout settings include:
- Cart title text
- Title alignment
- Header size
- Close icon size and colors
- Header background and border
- Drawer background
- Drawer width
- Empty cart message
- Empty cart button text
- Optional inherited theme fonts
Header settings
The header is the first thing shoppers see when the drawer opens.
Recommended decisions:
- Keep the title short and readable
- Use title alignment that matches the theme style
- Keep the close button obvious, especially on mobile
The title text can include cart quantity information. Keep it simple so it still reads well when the quantity changes.
Drawer shell settings
The drawer shell controls the overall feeling of the cart:
- Width controls how much space the drawer uses
- Background color affects contrast and readability
- Header border helps separate the title area from the cart content
- Bottom spacing affects how the footer sits inside the drawer
Empty cart state
The empty cart state should explain what happened and what the shopper can do next.
Use:
- A clear empty cart message
- A continue shopping button label that matches your tone
The empty cart state is part of the shopper experience too. It should feel intentional, not like a fallback error.
Troubleshooting
Reduce the drawer width and simplify the number of active sections or footer modules.
Shorten the title text, reduce title size, or switch to a slimmer header size.
Adjust the empty message and button text so the drawer still encourages navigation when the cart has no items.
Best practices
- Match the drawer shell to the active theme
- Keep contrast high enough for quick scanning
- Use compact title text and a visible close control