The Header Module allows you to customize the top section of your UpCart drawer with your brand’s logo, title text, layout, background color, and close button. Visual controls make it easy to style your header without needing to define exact pixel sizes.

You can choose between Slim and Tall header heights to control the vertical space. A thin bottom border can be added or disabled as needed. The background color can be set using a hex code or the built-in color picker.

There are three ways to define your cart drawer header title: inherit your theme’s default title styling, display your store’s logo, or create fully custom text styles. Each method offers flexibility depending on your design needs.

This option uses your theme’s default heading styles, helping you keep the design visually consistent with the rest of your site. You can add your own title using the Text field and dynamically include the number of cart items using {{cart_quantity}}. Text alignment can be set to Side or Center, and you can select the appropriate heading level H2, H3, or H4, based on your store’s content structure.

If you prefer to use a brand logo in place of text, you can upload your store’s logo directly in this section. Choose to align the logo to the Side or Center, and scale it using the visual size slider. While there is no enforced image size limit, using a PNG file is recommended for clean transparency and sharp edges. JPEGs are also supported but may include background noise or degrade logo detail. For performance, aim to keep file sizes optimized.

Selecting the Text option gives you full control over styling the title independently from your store’s theme. You can enter any custom title and include {{cart_quantity}} for dynamic updates. Text alignment can be set to Side or Center, with options to change the font weight to Normal, Semibold, or Bold. Font size is adjustable from 14px to 48px using a visual slider, and you can optionally apply a text color override.

The close button is customizable to match your store’s design. You can position it on the Left or Right side of the drawer. Set the background and hover states with custom colors, adjust icon size (Small, Medium, or Large), and choose between Normal or Thick icon stroke weight. The icon color can be set via hex code or the color picker. You may also add a border around the icon, choosing from None, Thin, Normal, or Thick, and define a distinct hover border color if needed.

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.
​