Overview
The Header Module lets you customize the top section of your UpCart drawer with your branding logo, title text, colors, layout, and a close button. This guide shows you how to style your header to match your store.
No need to worry about exact pixel sizes, just use the visual control. For specific sizing, we recommend you add custom CSS.
Header Module Settings
General
Height: Choose between Slim and Tall to adjust the vertical size of the header.
Bottom Border: Add a Thin divider below the header, or turn it off completely.
Background Color: Pick any background color using the hex code field or a color picker.
Title
You have three ways to customize your cart drawer header title: inherit your theme’s text style, use a brand logo, or define your own styles. Here's an overview for each option:
Inherit from Theme Titles
Use your theme's built-in title styles to keep things simple and consistent with the rest of your storefront.
Add custom text using the Text field
Use
{{cart_quantity}}to dynamically show the number of items in the cartChoose alignment: Side or Center
Choose the heading level (H2, H3, or H4) that fits with your store's design preferences
Logo
This is where you can upload your store’s logo instead of using text.
Upload your logo directly inside this section
Choose logo alignment: Side or Center
Adjust the logo size using the visual slider
There's no enforced image size limit, but we recommend keeping file sizes small for performance
📝 Logo Tip:
We recommend using a PNG file for best quality and support for transparent backgrounds.
JPEGs work too, but may not look as clean—especially if your logo has a background or fine details.
Text
This option gives you full control over the title’s text style without using your theme font settings.
Enter your title text
Use
{{cart_quantity}}to display the number of items in the cart
Set alignment to Side or Center
Customize font weight: Normal, Semibold, or Bold
Adjust font size with the slider (range: 14px to 48px)
Add a custom text color override if needed
Close Button
Customize the cart drawer’s close button to match your brand:
Location: Display the button on the Left or Right side.
Background Color & Hover Color: Set colors for the default and hover states.
Icon Size: Choose from Small, Medium, or Large.
Icon Thickness: Choose Normal or Thick to adjust stroke weight.
Icon Color: Set the button color using a hex code or picker.
Border: Add a border around the icon and select its thickness (None, Thin, Normal, or Thick). You can also apply a hover border color.
📝 Best Practice Tips
Want precise spacing or sizing? Use Custom CSS for full control beyond sliders, great for exact margins, padding, or logo scaling.
Test on desktop and mobile. Header elements like text, logo, and buttons can display differently on various screen sizes
Use proper heading levels. Choosing the right heading (H2, H3, H4) helps with accessibility and SEO. Match the structure of your store's content.
For more ways to personalize your cart, explore our UpCart Help Docs. If you need custom changes, we recommend reaching out to a Shopify Expert.